JavaScript - function Method

function Method 함수를 실행하는 다양한 방법이 있습니다.

1. function(method)호출
2. new 키워드를 이용한 호출
3. 함수 메소드 .call .apply를 이용
4. 이는 그 중 함수 메소드를 사용하는 방법입니다.

.call과 .apply

function add(x,y){
    return x + y
}

add.call(null,2,8) //10
add.apply(null,[2,8]) //10

let arr = [1,2,3,4,5]
Math.max.apply(null,arr) //5
첫번째 인자는 this를 의미하고 두번째부터는 argument가 들어간다.

call, apply의 쓰임

call 또는 apply를 이용해 주체가 되는 인스턴스와 메소드의 순서를 바꿀 수 있습니다.

arr.filter(함수이름); // 1번
Array.prototype.filter.call(arr,함수이름) // 2번

1번에서는 인스턴스(arr)가 먼저 등장하고 메소드(filter)가 뒤에 등장합니다.
그러나 2번에서는 메소드(filter)가 먼저 등장하고 인스턴스(arr)를 뒤에 넣습니다.

그렇다면 굳이 이런 패턴을 이용하는 이유가 무엇일까요?
이런 패턴은 흔히 유사배열에 적용 시킬 때 사용할 수 있습니다.

예를들어 NodeList라는 자료형은 배열처럼 보이지만 유사배열이기 때문에 배열 메소드를 사용할 수 없습니다. 이렇게 배열 메소드를 사용할 수 없을 때, 이 방법이 유용하게 쓰입니다.

.bind

call/apply와는 다르게 함수를 바로 실행시키지 않고, this값이 바인딩 된 함수를 return 합니다.

function add(x,y){
    return x + y
    console.log(this.val);
}
let obj = {val:0};
add.bind(obj,2,8)
/*
ƒ add(x,y){
    return x + y
    console.log(this.val);
}
*/
add.bind(obj,2,8)() //10

bind의 쓰임 1

bind는 특정함수가 this값을 바꿔버리는 경우에 사용됩니다. 아래는 setTimeout 사용시 this 전달하는 예제입니다.

function Box(w,h){
  this.width = w;
  this.height = h;
  
  this.getArea = function(){
    return this.width * this.height;
  }
  this.printArea = function(){
    console.log(this.getArea());
  }

}
let b = new Box(100, 50);
b.printArea(); //5000
setTimeout(b.printArea, 2000)
// 427
// Uncaught TypeError: this.getArea is not a function at Box.printArea (<anonymous>:9:22)

setTimeout의 경우, 인자로 넘기는 함수의 this값은 기본적으로 window객체가 바인딩 됩니다. 그래서 여기의 this의 값은 window이기 때문에 window엔 getArea라는 함수가 없기 때문에 에러가 발생합니다.

이를 해결하기 위해서는 this 값을 명시 해줘야하는데 이때 사용할 수 있는 방법이 bind를 사용하는 것 입니다.

setTimeout(b.printArea.bind(b), 2000)
// 1263
// 5000

bind의 쓰임 2

currying: 인자 여러개를 받는 함수를 인자 하나를 받는 함수로 바꾸는 방법입니다.

function t(name, money){
  return name + '의 전 재산은 ' + money +'원 입니다.'
}

let tn = t.bind(null, 'n');
tn(123456)
//"n의 전 재산은 123456원 입니다."

tn이라는 함수에는 이미 'n'이라는 값이 바인딩 되어있습니다.
t라는 함수는 this값을 사용하지 않기 때문에 다른 특별한 값을 넣어줄 필요가 없습니다.