[Javascript] call(), apply()의 차이

 

 

조금 슬픈 마음으로 정리해보는,,,🥺

 

https://be-a-weapon.tistory.com/206

예전에 정리해놓고도 왜 기억을 못하니,,

당시에도 저렇게 적어놓고 이해를 제대로 못했을 가능성이 높다.

삭제하려다가 반성의 의미로 남겨두었다,,

 

새로운 정보라고 생각하고 포스팅하던 중에

이미 관련 글이 블로그에 있을 때 울적하다,,😮‍💨

 

 

---

 

 

◽ call(), apply()을 왜 사용하는가?

this를 명시적으로 바인딩하기 위해서 사용한다.

이렇게 콘솔을 찍는 경우 결과값이 '페퍼로니'가 나올 것 같지만, this는 window를 가리킨 상태가 아니기때문에 undefined이다.

const name = '페퍼로니'

function print() {
   console.log(this.name);
}

print() // undefined

 

 

◽ call()

call()을 사용하면 this를 바인딩할 수 있다.

fun.call(thisArg[, arg1[, arg2[, ...]]])
// .call(this로 지정할 대상)

[예제 1. 매개변수가 없는 경우]
const pizza = {
  name: '페퍼로니'
}

function print() {
   console.log(this.name);
}

print.call(pizza) // 페퍼로니


[예제 2. 매개변수가 있는 경우]
const pizza = {
  name: '페퍼로니'
}

function print(price, brand) {
   console.log('[%s] %s 피자(%s원)', brand, this.name, price);
}

// call로 호출하는 경우 전역변수인 name이 호출된다.
print.call(pizza, 50000, '도미노') // [도미노] 페퍼로니 피자(50000원)

 

 

◽ apply()

call()과 비슷하지만 차이점은 매개변수를 배열로 전달한다는 점이다.

[예제 1. 매개변수가 없는 경우]
const pizza = {
  name: '페퍼로니'
}

function print() {
   console.log(this.name);
}

print.apply(pizza) // 페퍼로니


[예제 2. 매개변수가 있는 경우]
const pizza = {
  name: '페퍼로니'
}

function print(price, brand) {
   console.log('[%s] %s 피자(%s원)', brand, this.name, price);
}

// 매개변수를 배열로 전달한다.
print.apply(pizza, [50000, '도미노']) // [도미노] 페퍼로니 피자(50000원)

 

💡 bind()

bind를 사용하여 특정 변수로 만들어 사용할 수도 있다.

const printUseBind = print.bind(pizza);
printUseBind(60000, '미스터') // [미스터] 페퍼로니 피자(60000원)

 

 

 

출처

call, apply, bind의 차이