[면접질문 #3] What is the difference between Call, Apply and Bind?

아래 글은 https://github.com/sudheerj/javascript-interview-questions#what-are-the-possible-ways-to-create-objects-in-javascript 에서 번역한 내용이며, Sudheer Jonna 로 부터 번역 허락을 받았음을 알립니다.

 

이 글을 읽고, 면접 뿐만 아니라 자바스크립트의 기본 및 심화 개념을 잡는데 도움이 되었으면 좋겠습니다. 영어 전공자가 아니므로, 오역 또는 제 나름대로의 직역이 있습니다.

 

Call, Apply, Bind의 차이점을 아래 예시에서 확인해보자

 

Call:

Call 메소드는 this 와 각각의 인자로 호출한다.

const parkoon = {name: 'parkoon', age: 30}
const kimyang = {name: 'kimyang', age: 27}

function introduce(greeting1, greeting2) {
  console.log(greeting1 + 'my name is ' + this.name + 'and im ' + this.age + 'years old. ' + greeting2)
}

introduce.call(parkoon, 'Hello', 'how about you')
introduce.call(kimyang, 'Hi', 'nice to meet you')

 

Apply:

Apply 메소드는 함수를 호출 할 때 인자로 Array를 사용하여 전달한다.

const parkoon = {name: 'parkoon', age: 30}
const kimyang = {name: 'kimyang', age: 27}

function introduce(greeting1, greeting2) {
  console.log(greeting1 + 'my name is ' + this.name + 'and im ' + this.age + 'years old. ' + greeting2)
}

introduce.apply(parkoon, ['Hello', 'how about you'])
introduce.apply(kimyang, ['Hi', 'nice to meet you'])

 

Bind:

Bind 메소드는 새로운 함수를 생성한다.

const parkoon = {name: 'parkoon', age: 30}
const kimyang = {name: 'kimyang', age: 27}

function introduce(greeting1, greeting2) {
  console.log(greeting1 + 'my name is ' + this.name + 'and im ' + this.age + ' years old. ' + greeting2)
}

const introducingPerson1 = introduce.bind(parkoon)
const introducingPerson2 = introduce.bind(kimyang)

introducingPerson1('Hello', 'how about you')
introducingPerson2('Hi', 'nice to meet you')

Call 과 Apply 메소드는 서로 교체해서 사용할 수 있다. 두 메소드는 함수를 즉시 호출한다. 우리는 Array로 인자를 보낼지 콤마로 구분해서 인자를 보낼지 결정하기만 하면 된다. 반면에 Bind는 첫번째 인자로 this가 설정된 새로운 함수를 생성한다.