kidow/archive

call, apply, bind의 차이점

call, apply, 그리고 bind는 JavaScript에서 함수를 호출하거나 함수의 컨텍스트를 변경하는 데 사용되는 메서드들이다. 모두 함수 호출과 관련된 작업을 수행하지만 차이점이 있다.

call:

  • 함수를 호출하는 동시에 특정 컨텍스트(this)와 필요한 매개변수를 제공
  • 함수 내부에서 this가 특정 객체를 참조하도록 설정
function greet(name) {
  console.log(`Hello, ${name}! I'm ${this.job}.`)
}
 
const person = {
  job: 'developer'
}
 
greet.call(person, 'Alice') // Output: Hello, Alice! I'm developer.

apply:

  • call과 유사하지만, 매개변수를 배열로 전달
  • 함수의 매개변수가 배열로 제공되며, 배열의 각 요소가 함수의 매개변수로 대응
function multiply(a, b) {
  return a * b
}
 
console.log(multiply.apply(null, [5, 3])) // Output: 15

bind:

  • 함수의 컨텍스트(this)를 영구적으로 바인딩하기 위해 사용
  • 새로운 함수가 생성되며, 기존 함수의 컨텍스트는 유지
const person = {
  name: 'Alice',
  greet: function () {
    console.log(`Hello, I'm ${this.name}.`)
  }
}
 
const sayHello = person.greet
const sayHelloBound = person.greet.bind(person)
 
sayHello() // Output: Hello, I'm undefined. (컨텍스트 손실)
sayHelloBound() // Output: Hello, I'm Alice. (bind로 컨텍스트 고정)

위의 예시에서 sayHello 함수는 컨텍스트를 잃어버려서 undefined를 출력하지만, bind를 사용하여 sayHelloBound 함수는 person 객체와 함께 호출되어 정상적인 결과를 출력한다.

캐싱Call by value, Call by reference