[JavaScript] call, bind, apply의 차이

 
 
함수를 괄호 ()로 호출하는 방법도 있지만 자바스크립트에서는 두 가지 방법(call, apply)을 추가로 제공한다. call, apply는 this를 첫번째 인자로 넘겨 한정할 수 있다.
 
 
◽️ call
함수 안에서 값을 this로 한정(여기서는 null)하며 두번째 인수를 펼쳐 전달하지 않고 순서대로 전달한다.

const user = {
  age: 12 
}

function test() {
  console.log(this.age)
}

test.call(age) // 12

 
 
 
◽️ apply
함수 안에서 값을 this로 한정(여기서는 null)하며 두번째 인수를 펼쳐 함수에 매개변수로 전달한다.

function add(a: number, b: number): number {
	return a+b
}

add(10, 20)
add.apply(null, [10, 20]) // 30

 
 
 
◽️ bind
함수를 실행하지 않고 함수를 리턴한다.
영구적으로 this를 바인딩한다.

function add(a: number, b: number): number {
	return a+b
}

add(10, 20)
add.bind(null, 10, 20)() // 30

 
로그도 줄여쓸 수 있다.

const log = console.log.bind(document);

log('hi~')

 
 
 
 

---

 
 
 
 

출처

보리스 체르니, 타입스크립트 프로그래밍 (프로그래밍 인사이트, 2020)
call, apply, bind의 차이
binding의 개념과 call, apply, bind의 차이점
 
 
 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.