[JS] 함수를 호출하는 메서드 Call, apply, bind

 

 

 

자바스크립트에서 함수를 호출하는 방법에는 일반적 방법인 함수 뒤에 ()를 붙여 호출하는 방법과 call, apply를 사용하여 호출하는 방법이 있다.

 

 

 

1. call()

call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다.

 

func.call(thisArg[, arg1[, arg2[, ...]]])
// thisArg: func 호출에 제공되는 this의 값
// arg1, arg2, ...: func이 호출되어야 하는 인수

 

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"

 

 

2. apply()

apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출한다.

 

func.apply(thisArg, [argsArray])
// thisArg: func 호출에 제공되는 this의 값
// argsArray: func이 호출되어야 하는 인수를 지정하는 유사 배열 객체

 

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7

const min = Math.min.apply(null, numbers);

console.log(min);
// expected output: 2

 

※ call()과 apply()는 비슷한 것 같지만 call()은 인수 목록받고 apply()는 인수 배열 하나를 받는다는 점에서 다르다.

 

 

3. bind()

bind() 메소드가 호출되면 새로운 함수를 생성한다. 

 

func.bind(thisArg[, arg1[, arg2[, ...]]])
// thisArg: 바인딩 함수가 타겟 함수의 this에 전달하는 값
// arg1, arg2, ...: func이 호출되어야 하는 인수

 

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

 

 

 

# 참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind