함수 호출 메서드 (call, apply, bind)

Hi, There!
안녕하세요, 바오밥입니다.

---

목차

1. 개요
2. 본문
3. Reference

---

개요

자바스크립트의 함수 호출 메서드에 대하여 정리하였습니다.

---

본문

 

일반 호출

개발자 A는 객체의 이름을 호출하는 함수를 정의하였습니다.

전달되는 매개 변수가 객체 형태임에도 불구하고 객체의 이름이 아닌 window 객체가 반환됩니다.

const mike = {
  "name": "Mike",
}

function showThisName() {
  console.log(this.name)
}

showThisName(mike) // window 객체

이를 해결하기 위해 우리는 함수 호출 메서드(call, apply, bind)를 사용해야 합니다.

 

call, apply

call 또는 apply 메서드를 사용하여 전달할 경우 객체의 이름을 호출 시킬 수 있습니다.

즉, 개발자가 의도한 객체에 접근할 수 있다는 것입니다.

const mike = {
  "name": "Mike",
}

function showThisName() {
  console.log(this.name)
}

showThisName.call(mike) // Mike
showThisName.apply(mike) // Mike

 

그렇다면, call과 apply 차이점은 무엇일까요?

바로 인수 전달 방식에 있습니다.

call의 경우 아래와 같이 인수를 원시형으로 전달합니다.

const mike = {
  "name": "Mike",
}

function showObject() {
  console.log(this)
}

function ageUpdate(age) {
  this.age = age
}

ageUpdate.call(mike, 21) // 원시형 그대로 전달
showObject.call(mike)
/*
{
  "name": "Mike",
  "age": 21
}
*/

 

apply의 경우 아래와 같이 배열로 묶어 전달합니다.

const mike = {
  "name": "Mike",
}

function showObject() {
  console.log(this)
}

function ageUpdate(age) {
  this.age = age
}

ageUpdate.apply(mike, [21]) // 배열로 묶음
showObject.call(mike)
/*
{
  "name": "Mike",
  "age": 21
}
*/

 

call을 사용하여 배열을 전달하고 싶은 경우 나머지 매개변수를 이용하면 됩니다.

apply는 그대로 배열을 전달하면 됩니다.

const nums = [1,2,6,3,10]
console.log(Math.max.call(null, ...nums)) // 10
console.log(Math.max.apply(null, nums)) // 10

 

bind

bind 함수는 call, apply 함수와 다르게 함수를 호출하지 않습니다.

다만 인수를 this에 매핑하여 함수를 반환합니다.

const mike = {
  "name": "Mike",
}

const showObject = function() { 
  console.log(this)
}

const showMike = showObject.bind(mike)
showMike()
/*
{
  "name": "Mike"
}
*/

 

 

---

Reference

• https://youtu.be/KfuyXQLFNW4