Function.prototype.bind() 정리

정의

MDN에 나와있는 정의는 다음과 같다.

bind() 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다.

설명

정의만 보면 무슨 역할을 하는지 확실히 모르겠다. 코드를 보면서 이해해보자.

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

console.log(myModule.getX()); // 42

const unboundGetX = myModule.getX;
console.log(unboundGetX()); // undefined

const boundGetX = unboundGetX.bind(myModule);
console.log(boundGetX()); // 42

위 코드를 보면 myModule의 getX 메서드를 변수에 할당하고 실행하면 undefined가 출력되는 것을 볼 수 있다. 왜 그럴까?

자바스크립트의 this는 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정되기 때문이다.

• myModule.getX()는 메서드를 직접 호출하기 때문에 this는 myModule 객체에 바인딩 되있다.
• unboundGetX()는 메서드를 일반함수처럼 호출하기 때문에 this는 global(window) 객체에 바인딩 되어있다.

이런 경우에 this를 자신이 지정한 객체에 바인딩 하도록 해주는 것이 bind() 메서드 이다.

예제

1. 미리 지정된 초기 인수가 있는 함수 만들기

function addArguments(arg1, arg2) {
		return arg1 + arg2;
}

// bind의 2번 째 인자는 호출 할 함수의 인자를 고정시킨다.
const addFive = addArguments.bind(null, 5);

const result = addFive(10); // 15 === addArguments(5, 10)

// bind를 통해 첫 번째 인자를 고정했으므로, 두 번째 인자는 무시된다.
const result2 = addFive(10, 20); // 15 === addArguments(5, 10);

💡 **화살표 함수의 this는 렉시컬 환경의 this(함수가 정의 된 스코프의 this)를 바인딩 하므로, 화살표 함수에서는 bind() 메서드를 사용하더라도 바인딩 되지 않는다.**

2. setTimeout 콜백 함수

콜백 함수의 this는 제어권을 가진 함수의 this를 바인딩 한다.

따라서, 아래 코드에서는 setTimeout의 콜백 함수가 일반 함수이므로 this가 global 객체에 바인딩 되있는 상태이기 때문에, myModule 객체의 this를 바인딩 해주어야 한다.

const myModule = {
		user: 'chojs',
		logUser() {
				setTimeout(function() {
						console.log(this.user);
				}.bind(this), 1000); // myModule의 this를 바인딩.
		}
}

myModule.logUser(); // chojs

하지만, 이 경우에는 bind를 사용하는 것 보다 화살표 함수를 사용해서 콜백 함수의 this가 렉시컬 this를 바인딩 하도록 하는게 더 간단하다.

const myModule = {
		user: 'chojs',
		logUser() {
				setTimeout(() => { // 화살표 함수
						console.log(this.user); 
				}, 1000);
		}
}

myModule.logUser(); // chojs