Call · Apply · Bind의 차이점

Call · Apply · Bind의 차이점

Call, Apply, Bind 메소드 모두 명시적으로 this를 바인딩(Binding)할 때 사용한다.

Call 메소드와 Apply 메소드는 메소드의 호출 주체인 함수를 즉시 실행한다.

Apply 메소드는 첫번째 인자 이후의 인자들을 배열로 받는다.

Bind 메소드는 Call 메소드와 Apply 메소드와 다르게 함수를 즉시 실행하지 않고 새로운 함수를 반환한다.

---

자바스크립트의 함수는 각자 자신만의 this를 정의한다. 

const say = () => {
	console.log(this);
    console.log(`Hello, my name is ${this.name}`);
}

say();

여기서 함수를 실행하게 되면, this는 전역객체인 window를 의미한다.

기본적으로 자바스크립트의 this는 window이기 때문이다. 함수 안에서 전역객체인 window가 아닌, this를 그때 그때 알맞은 객체로 바꿔 출력을 하고 싶다면 this를 명시적으로 바꿔줘야하는데, 이를 this의 binding이라고 한다.

 

명시적으로 위의 this를 전역 객체의 window를 의미시키는 것이 아닌, 다른 객체로 바꿔주는 함수가 call, apply, bind이다.

 

Call · Apply

const person = {name : "Tom"};

const say = (city) => {
	console.log(`Hello, my name is ${this.name}! I lived in ${city}`);
}

say("Seoul"); // Hello, my name is ! I lived in Seoul
say.call(obj, "Seoul"); // Hello, my name is Tom! I lived in Seoul
say.apply(obj, ["Seoul"]); // Hello, my name is Tom! I lived in Seoul

call과 apply는 함수를 호출하는 함수이다. 그러나 그냥 실행하는 것이 아니라 첫 번째 인자에 this로 세팅하고 싶은 객체를 넘겨주어 this로 세팅하고 싶은 객체를 넘겨주어 this를 바꾸고나서 실행한다.

 

첫 번째 실행인 say("Seoul")의 경우 say가 실행될 때 this에 아무런 세팅이 되어있지 않으므로 전역 객체인 window 객체를 this로 인식한다. say.call(obj, "Seoul")과 say.apply(obj, "Seoul")의 경우 this를 obj로 변경시켰으므로 원하는 값이 나올 것이다.

 

call과 apply의 유일한 차이점은 첫번째 인자(this를 대체할 값)를 제외하고, 실제 함수에 필요한 파라미터를 입력하는 방식에 있다.

일반적인 매개변수처럼 넣는 call과는 다르게, apply의 경우는 두번째 인자부터 모두 배열에 넣어야한다.

 

Bind

bind 함수가 Call · Apply와 다른 점은 함수를 실행하지 않는다는 점이다. 대신 bound 함수를 리턴한다.

그러니까, 함수를 즉시 실행하는 Call과 Apply와는 달리 넘겨받은 인자를 가지고 새로운 함수를 리턴을 해준다.

const obj = { name: "hyeon woo" };

function say(job, skill) {
    console.log(`Hello, my name is ${this.name}, my job is ${job}, my tech skill is ${skill}`);
};

say.call(obj, "front-end developer", "react"); // Hello, my name is hyeon woo, my job is front-end developer, my tech skill is react
say.apply(obj, ["back-end developer", "springBoot"]); // Hello, my name is hyeon woo, my job is back-end developer, my tech skill is springBoot
const bound = say.bind(obj, "designer", "figma");
bound(); // Hello, my name is hyeon woo, my job is designer, my tech skill is figma

레퍼런스

binding의 개념과 call, apply, bind의 차이점 · 쾌락코딩

 

[Javascript] Call, Apply, Bind 차이점