[JS] call vs apply vs bind

함수호출

JS에서 함수를 호출하는 방법에는 가장 일반적이고 빈번히 사용되는 함수 뒤에 ()를 붙여 호출하는 방법과

call, apply를 사용하여 호출하는 방법이 잇다.

 

아래 예제 코드를 보면 각각 함수 호출 방식은 다르지만, 같은 결과를 보여주고 있다.

function foo(a, b, c) {
  console.log(a + b + c);
};
foo(1, 2, 3); // 6
foo.call(null, 1, 2, 3); // 6
foo.apply(null, [1, 2, 3]); // 6

 

---

call()

MDN에 기재되어 있는 call()의 매개변수의 설명을 보면 아래와 같다.

func.call(thisArg[, arg1[, arg2[, ...]]])

• thisArg: func 호출에 제공되는 this의 값
• arg1, arg2, ...func이 호출되어야 하는 인수

첫번째 매개변수 thisArg는 각 함수의 실행문맥의 this를 특정하게 지정하는 매개변수임을 알 수 있다.
그리고 두번째부터는 호출할 함수의 인수들이 들어간다.

 

const person1 = {
    name: 'Sung'
};

const person2 = {
    name: 'Kim',
    study: function() {
        console.log(this.name + '이/가 공부를 하고 있습니다.');
    }
};

person2.study(); // Kim이/가 공부를 하고 있습니다.

// call()
person2.study.call(person1); // Sung이/가 공부를 하고 있습니다.

call을 이용하여 person2의 함수를 호출하고 있지만 call 메소드 첫번째 매개변수에 person1을 넣어주고 있기 때문에
this는 person2가 아닌 person1을 가리키게 된다.

 

---

apply()

func.apply(thisArg, [argsArray])

• thisArg: func 호출에 제공되는 this의 값
• argsArray: func이 호출되어야 하는 인수를 지정하는 유사 배열 객체

첫번째 매개변수 thisArg는 Function.prototype.call()과 같이 this를 지정한다.

하지만 call()과 다르게 apply()는 두번째 매개변수를 배열 형태로 넣게된다는 차이점이 있다.(배열 or 유사배열 객체)

const person1 = {
  name: 'seungho'
};

const person2 = {
  name: 'Kim',
  study: function(age, location) {
      console.log(`${location}에 사는 ${age}살 ${this.name}가 공부를 하고 있습니다. `);
  }
};


// apply()
person2.study.apply(person1, [26, "jejudo"]); // jejudo에 사는 26살 seungho가 공부를 하고 있습니다.

 

---

bind()

func.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg: 바인딩 함수가 타겟 함수의 this에 전달하는 값
• arg1, arg2, ...func이 호출되어야 하는 인수

bind()는 새롭게 바인딩한 함수를 만든다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수이다.

bind()는 call(), apply()와 같이 함수가 가리키고 있는 this를 바꾸지만 호출되지는 않는다.

따라서 변수를 할당하여 호출하는 형태로 사용한다.

const person1 = {
  name: 'seungho'
};

const person2 = {
  name: 'Kim',
  study: function(age, location) {
      console.log(`${location}에 사는 ${age}살 ${this.name}가 공부를 하고 있습니다. `);
  }
};


let student = person2.study.bind(person1, 26, "jejudo");
student(); // jejudo에 사는 26살 seungho가 공부를 하고 있습니다.

---

참고자료

https://mong-blog.tistory.com/entry/call-apply-bind%EC%9D%98-%EC%B0%A8%EC%9D%B4

https://velog.io/@josworks27/%ED%95%A8%EC%88%98%ED%98%B8%EC%B6%9C-call-apply-bind-%EC%B0%A8%EC%9D%B4

함수 호출 call, apply, bind의 차이