apply, call

자바스크립트를 개발하다 보면 apply와 call을 사용하는 경우가 생깁니다.

 

1. this 변수에 원하는 값을 할당하고 싶을 때.

2. '파라미터를 담은 배열'을 이용할 때.

 

하나씩 알아보겠습니다.

 

function thisTest() {
    console.log(this);
}
 
thisTest();
thisTest.apply(5);
thisTest.call({x:10});
 
function drawPage() {
    var str;
    str = '버튼 클릭'
    createBtn();
    //createBtn.call(this, str);
    //createBtn.apply(this, [str]);
}
function createBtn(str) {
    $('<button>생성</button>').click(() => {
        console.log(str);
    }).appendTo($('body'))
}
drawPage();

#5 일반적인 함수 호출시 this는 전역 window객체를 참조하게 됩니다.

#6 apply로 함수 호출시 this값을 첫 번째 파라미터로 받아 실행됩니다.

#7 call로 함수 호출 시 this값을 첫 번째 파라미터로 받아 실행됩니다.

 

아주 멋지군요.! 계속 알아보겠습니다

 

#21 자바스크립트로 화면을 랜더 하는 함수인 drawPage를 실행합니다.

#12 버튼을 생성하는 함수인 createBtn을 호출합니다.

 

#18 과연 str은 호출이 잘 될까요? #13~14번의 주석을 풀어보면서 확인해봅시다.

 

확인해 보셨다면 아시겠지만 첫 번째 파라미터는 this 값, 두 번째 파라미터는 일반적 함수의 파라미터임을 알 수 있습니다.

그런데 apply는 파라미터를 배열에 담아 보내는군요.

이러한 특성은 아주 유용하게 사용됩니다.

 

다음 검정 화면입니다.

Math.max(1,2,3);
Math.max([1,2,3]);
Math.max.apply(null, [1,2,3]);
Math.max(...[1,2,3]);

 

Math.max 함수는 파라미터들 중 가장 큰 수를 리턴해줍니다.

#1 3이 리턴되겠군요.

그런데 언제 파라미터를 저렇게 다 넣어주고 있죠. 보통은 엄청나게 많은 수들 중 최대 값을 찾고자 할 텐데요

#2 배열로 넣어 보았더니 NaN이 돌아옵니다. 배열을 받아주지는 않네요.

#3 apply를 통해 실행했더니 잘 동작합니다.

apply는 '파라미터를 담은 배열'을 받고 이를 다시 파라미터들로 전달하거든요. 마치 arguments를 알아서 풀어 처리해주는 거죠.

훌륭합니다.

 

#4 번외로 es6의 전개 구문 (펼치기라고 하죠)을 사용할 수도 있습니다.