[코어 자바스크립트] this를 바인딩하는 방법

함수를 호출하는 상황에 따라 this가 바인딩 되는 것이 다르지만 그것이 꼭 확정적인 것은 아니다. 이러한 규칙을 깨고 this에 별도의 대상을 바인딩하는 방법도 있다.

🥑 call 과 apply 메서드

call과 apply는 메서드의 해당 주체인 함수를 즉시 호출하도록 하는 명령이다. 이때 call과 apply는 첫번째 인자를 this로 바인딩 한다는 공통점이 있다. 반면에 두번째 이 후의 인자의 경우(함수 실행시 매개변수로 사용됨), call은 매개 변수 각각을 comma로 구분한 인자로 받지만 apply의 경우 array 형태로 매개변수를 받는다.

//call
Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]);

//apply
Function.prototype.apply(thisArg[, argsArray]);

🥑 call과 apply의 활용

유사 배열 객체에 call 또는 apply 메서드를 사용하면 객체에 배열 메서드를 적용하거나 객체를 배열로 변환도 가능하다.

유사 배열 객체(array-like object): 키(key)가 0 또는 양의 정수인 프로퍼티가 존재하고 length 프로퍼티의 값이 0 또는 양의 정수인 객체. 즉, 배열의 구조와 유사한 구조의 객체를 말한다.

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

/*slice: 첫번째 두번째 인자로 idx 값을 입력 받아 배열 요소를 추출하는 메서드이다.
인자로 아무것도 입력 받지 않았을 경우에는 우너복 백열의 얕은 복사본을 반환한다.*/
var arr = Array.prototype.slice.call(obj); // [ 'a', 'b', 'c' ]

Array.from(): ES6에 도입된 문법으로 유사 배열 객체와 같은 순회 가능한 모든 종류의 데이터 타입을 배열로 변환할 때 사용한다.

console.log(Array.from('foo'));  // ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x)); // [2, 4, 6]

var obj = {
  0: 1,
  1: 2,
  3: 3,
  length: 4
}

console.log(Array.from(obj)) // [ 1, 2, undefined, 3 ]

🥑 bind 메서드

bind 메서드는 ES5에 추가된 문법으로 call, apply와 비슷하지만 메서드 앞의 함수를 넘겨 받은 this와 매개변수로 새롭게 구성된 함수를 반환하기만 한다. 즉, bind 메서드는 1)this를 미리 적용하는 것과 2)매개변수를 미리 전달함으로써 부분 적용 함수를 구현하는 두 가지 목적을 갖는다.