call(), apply(), bind()?

Parker.Park·2022년 7월 25일

개념

목록 보기

6/16

call(), apply(), bind()

이 글은 지난 this와 바인딩?에서 다른 내용들이 많아 추출하여 쓴 글이다. call(), apply(), bind() 메소드 모두 this와 관련이 있는 내용이라 this에 대해서 부족다하고 생각한다면 공부를 좀더 하기를 추천한다.

call()

우선 call() 메소드는 주어진 this값 및 각각 전달된 인수와 함께 함수를 호출한다고 한다. apply()와 거의 동일하지만 call()은 인수목록을, apply()는 인수 배열 하나를 받는 점이 차이점이라고 한다.

call() 구문

func.call(thisArg[, arg1[, arg2[, ...]]])

thisArg - func 호출에 제공되는 this의 값이라고 한다.
arg1, arg2 ... - 객체를 위한 인수라고 한다.

call() 설명

call()은 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체에 재할당할 때 사용한다고 한다. this는 현재 객체를 참조하기 때문이다. 메소드를 한번 작성하면 새 객체를 위한 메소드를 재작성할 필요없이 call()을 이용해 다른 객체에 상속할 수 있다고 한다. 그렇다면 call()은 상속에 가까운 것인가?

call() 몇 가지 예시

function Product(name, price) {
  this.name = name
  this.price = price
}

function Food(name, price) {
  Product.call(this, name, price)
  this.category = 'food'
}

console.log(new Food('cheese', 5).name)
// expected output: "cheese"

위 예시는 객체의 생성자 연결에 call을 사용할 수 있었던 것이다.

var obj ={ animal : "cats", cute: "very very"}

function amountCute(){
	console.log(`${this.animal} are ${this.cute} cute`)  
}

amountCute.call(obj) // 'cats are very very cute'

var Cname = 'Kitty'
function amountCute(){
	console.log(`${this.Cname} is cute`)  
}
amountCute.call() //'Kitty is cute'

인수를 지정하지 않고 호출한 call은 전역객체 this 의 값에서 바인딩 된다고 한다. 주의가 있다면 앞에서 말했듯이 엄격 모드에서는 this가 제한 되니 다시 한번 체크하도록 하자.

apply()

apply() 구문

func.apply(thisArg, [argsArray])

call()과 비슷하지만 apply()는 인수를 배열로 받는 것이 특징이다. 몇 가지 예시만 정리하고 넘어가려고 한다.

apply() 예시

let arr1 = ['a', 'b']
let arr2 = [1,2,3]
arr1.push.apply(arr1, arr2)
console.log(arr1) //[ 'a', 'b', 1, 2, 3 ]

위 예시는 push를 사용하여 배열을 확장한 것이라고 한다. concat이라는 메소드가 있긴 하지만 concat은 새로운 배열을 만들어 반환하기 때문에 apply와는 차이가 있다고한다.
다른 사용 예시도 있지만 정확하게 이해가 안가기도 해서 넘어가도록 하자 아래 참조가 있다.

bind()

ECMAScript5에서 bind메소드가 도입되었다고 한다. bind()는 받게되는 첫 인자의 value로 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수로 제공된다고 한다. 말이 조금 어려운거 같다. 즉, 첫 번째 바인드된 value값이 고정된다는 의미이다.

구문

func.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg - this에 전달하는 값이라고 한다. 바인딩 함수를 new 연산자로 생성할 경우에는 무시된다고 한다.

bind() 몇 가지 예

스코프에 따라 this값이 달라진다. bind()를 이용하여 원본 객체와 바인딩 할 수 있다.
위에서 설명한

this.x = 9
var module = {
  x: 81,
  getX: function() { return this.x }
};

module.getX() // 81

var retrieveX = module.getX
retrieveX() // 9 - 전역 스코프에서 호출 되었기 때문!

var boundGetX = retrieveX.bind(module)
boundGetX() // 81

다음은 함수 사용 시 예이다. 바인딩 된 함수는 호출 될 때마다 인수 앞에 삽입 될 것이다.

function addTwoNum(a, b){
  return a + b
}

var result1 = addTwoNum(1, 2)
console.log(result1) // 3

// 첫 번째 인수를 지정하여 함수를 생성한다고 한다.
var addBindTen = addTwoNum.bind(null, 10)

var result2 = addBindTen(5)
console.log(result2) // 15

var result3 = addBindTen(2,10)
// 두 번째 인수는 무시된다.
console.log(result3) // 12