자바스크립트 call() apply() 차이

call()와 apply() 함수들은 bind() 함수처럼 만약 객체1에서 객체2의 함수를 빌려 쓰고 싶을 때 쓸 수 있다. (상속 없이)

 

두 함수의 차이점은 call()는 여러 인자를 나열해서 받고 apply()는 여러 인자를 한 배열에 받는다.

두 함수 모두 첫 인자는 this를 가리킬 객체를 받는다.

const bank = {
    deposit: function(amount) {
        this.money += amount;
    },
    deposits: function(amountOne, amountTwo) {
        this.money += amountOne + amountTwo;
    }
};
 
const john = {
    money: 0
};
 
bank.deposit.call(john, 100);
console.log(john.money)
 
bank.deposits.apply(john, [200,300]);
console.log(john.money)

만약 bank라는 객체의 deposit()과 deposits() 함수를 john 객체에 적용해서 쓰고 싶다면

bank.deposit.call(john, 100) 호출을 한다

그러면 bank의 deposit() 함수 속 this가 john를 가리키면서 

john의 money 프로퍼티가 100이 더해진다.

 

call() 대신 apply()로 deposit() 함수를 쓸 수 있다.

bank.deposit.apply(john, [100]) 호출 시 bank.deposit.call(john, 100)와 동일한 결과가 나온다

왜냐하면 두 함수의 차이는 인자들을 배열에 받드냐 안 받드냐 차이기 때문이다.

 

bank.deposits(john, [200,300]) 호출 시 200, 300을 john의 money 프로퍼티에 더한다

하지만 200, 300이라는 인자들을 한 배열에 넣었다.

bank.deposits(john, [200,300])를 call() 함수로 대체하려면 bank.deposits(john, 200, 300)이다

 

만약 두 함수에 3개의 인자들을 넣으려면

call()의 경우 call(john, 인자1, 인자2, 인자3)

apply()의 경우 apply(john. [인자1, 인자2, 인자3])