Javascript 함수의 Call & Apply & Bind

Call 함수란

먼저 Call을 사용하기전에 왜 사용하는지를 알아보자

모든 함수는 실행할때 함수 앞에 작성한 오브젝트를 this로 참조한다 하기 코드를 보자

위 코드처럼 현재 함수를 실행하는곳이 어느 위치(오브젝트)냐가 즉 this가 되고 this에 따라 함수 결과값이 달라진다

그럼 어떻게 해야 데이터 중심적인 결과를 도출할 수 있을까?

바로 모든 Javascript 함수에 내장되어있는 Call함수를 사용하면 된다.

위에 코드를 Call함수를 사용하여 정상적인 결과를 만들어보자

Call 함수를 사용하여 현재 this가 hello라는 객체라고 알려주어 messg라는 값을 잘 출력하는것을 볼 수 있다.

Call 함수 사용법은 func.call(thisArg[, arg1[, arg2[, ...]]]) 로 사용하면 된다

Apply 함수란

apply()는 위에서 배운 Call()과 동일하지만 뒤에 받는 함수의 파라미터가 배열인 경우에 사용된다

var korea = {
    name: "한국",
    age: 100
};

var us = {
    name: "미국",
    age: 80
};

function updateName(name, age){
    this.name=name;
    this.age=age;
}

// 첫번째 인수인 this를 korea객체로 주어서 오브젝트를 지정하고 두번째 인수를 배열로주었다
// 배열이 아니었으면 위에서 배운 call을 사용할 수 있지만 인자가 배열이기 때문에 apply를 사용한다
updateName.apply(korea, ["대한민국",150]); 

// 결과 값이 name: 대한민국, age: 150 잘나오는것을 확인할 수 있다
console.log(korea);

만약 call로 배열 인자를 처리하고 싶다면 ES6문법인 Spread 문법을 사용할 수 있다

하기 코드는 위 코드 apply에서 call로 변경한 코드이다

var korea = {
    name: "한국",
    age: 100
};

var us = {
    name: "미국",
    age: 80
};

function updateName(name, age){
    this.name=name;
    this.age=age;
}

const updateData = ["대한민국", 150];

// 첫번째 인수인 this를 korea객체로 주어서 오브젝트를 지정하고 두번째 인수는 위에 배열 변수를 만든 후 
// Spread문법으로 나열하였다
// call로도 배열을 처리할 수 있다
updateName.call(korea, ...updateData); 

// 결과 값이 name: 대한민국, age: 150 잘나오는것을 확인할 수 있다
console.log(korea);

Bind 함수란

Bind 키워드를 사용하면 this의 값을 영구적으로 바꿀 수 있다

var korea = {
    name: "한국",
    age: 100
};

var us = {
    name: "미국",
    age: 80
};

function updateName(name, age){
    this.name=name;
    this.age=age;
}

// bind 키워드를 사용하여 updateKorea함수를 사용하면 항상 this가 korea이게 만들 수 있다
const updateKorea = updateName.bind(korea);

// call이나 apply를 사용하지 않아도 updateKorea가 this를 korea로 갖고있기 때문에 
// 바로 파라미터만 전달하여 업데이트할 수 있다
updateKorea("대한민국", 150); 

// 결과 값이 name: 대한민국, age: 150 잘나오는것을 확인할 수 있다
console.log(korea);