TIL 6월 25일 - Function methods

call, apply는 꽤나 이전에 this의 바인딩에서 배운 개념들이지만 오늘은 온라인 세션에서 bind까지 넣은 function methods라는 이름으로 배웠다. 복습 겸 정리를 해본다.

function Methods

- Function.prototype.call()
- Function.prototype.apply()

• 위 둘은 거의 비슷하게 작동하고 인자를 전달할 때 차이가 있다.

function add(x, y){
  this.val = x + y;
  console.log(this.val);
}
let obj = { val: 0 };

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

// 위와같이 apply는 인자로 배열이나 유사배열(array-like)로 받고, call은 인자를 콤마로 분리해서 받는다.

// 활용례 1
let arr = [7, 24, 13, 2, 1];
let minimum = Math.min.apply(null, arr); 
  // Math.min의 기능만 사용하려고 하는 것이고, this는 의미가 없으므로 null을 넣어줘도 된다고 한다.

// 활용례 2
function test(){
  /*  // 이 코드는 실행할 수 없다. arguments는 array-like object라서 forEach를 사용할 수 없기 때문이다.
	arguments.forEach((val) => {
    	console.log(val);
    })
  */
  
	Array.prototype.forEach.call(arguments, function(val){ console.log(val); })

}

출처: 거의 코드스테이츠의 수업 슬라이드

- Function.prototype.bind()

• 함수의 this를 명시적으로 bind시킨 함수를 반환한다.

let obj = {
    name: 'john',
	timer: function(){
    	console.log(this.name);
    }
}

setInterval(obj.timer, 1000); // 원래 'john'이 1초마다 출력돼야 하지만, 아무것도 출력되지 않는다.
// setInterval은 함수의 this를 자동으로 window에 바인드 시키기 때문이다.
// 아래와 같이 하면 된다.
setInterval(obj.timer.bind(obj), 1000); // 정상적으로 출력됨을 알 수 있다.