JavaScript에서 Function.prototype.bind의 의미

Scenario

---

react를 쓰다보면 (asd는 fuction ) asd.bind(this) 이런구문을 쓰게된다.

솔직히 this의 인자에대한 의미도 잘알지못했고

또한 component의 onclick을 재정의할때,

onClick= handleOnclick.bind(this,{flag:'add',value:'asd'}); 이런식으로 개인적으로 자주쓰는편인데, 

위와 같은식으로 쓸때는 재정의한 fuction에서 인자를 어떻게 받아줘야할지 고민이었다.

 

 

Solution

---

내가 이해한 바로는 Fuction.proptotype.bind 를 쓰는 이유는 2가지가 있다.

 

 

첫번째는 Fuction의 스코프를 지정할 때이고

두번째는 매개변수를 고정하기 위해서이다.

 

첫번째의 예는 다음과 같이 쉽게 이해 할 수있다.

this.x = 9;
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// 9 반환 - 함수가 전역 스코프에서 호출됐음

// module과 바인딩된 'this'가 있는 새로운 함수 생성
// 신입 프로그래머는 전역 변수 x와
// module의 속성 x를 혼동할 수 있음
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

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

scope를 달리하여 호출할때 불러오는 변수가 유동적으로 변경된다.

기본적으로 react는 컴포넌트 기반이므로, 원하는 컴포넌트의 스코프를 사용하기 위해

bind(this)를 해주는것이다.

첨언: 초보 JavaScript 프로그래머로서 흔한 실수는 객체로부터 메소드를 추출한 뒤 그 함수를 호출할때, 원본 객체가 그 함수의 this로 사용될 것이라 기대하는 겁니다(예시 : 콜백 기반 코드에서 해당 메소드 사용). 그러나 특별한 조치가 없으면, 대부분의 경우 원본 객체는 손실됩니다. (출처:모질라재단)

 

두번째 방법으로 사용할 때는 미리 지정된 파라미터가 있는 함수를 만드는 것이다.

상황1. 고정된 인수로 override 해버리는경우
function addArguments(arg1, arg2) {
    return arg1 + arg2
}

var result1 = addArguments(1, 2); // 3

// 첫 번째 인수를 지정하여 함수를 생성합니다.
var addThirtySeven = addArguments.bind(null, 37); 

var result2 = addThirtySeven(5); // 37 + 5 = 42 

// 두 번째 인수는 무시됩니다.
var result3 = addThirtySeven(5, 10); // 37 + 5 = 42



상황2 전달받은 인수를 뒤로 밀어버리는경우,
function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 선행될 인수를 설정하여 함수를 생성합니다. 
var leadingThirtysevenList = list.bind(null, 37);

var list2 = leadingThirtysevenList();  // [37]

var list3 = leadingThirtysevenList(1, 2, 3);  // [37, 1, 2, 3]

 

위 코드를 본다면 아주 쉽게 이해 할 수있다.