46. Bind Method

안녕하세요. 박기린 입니다.

저번에 call()과 apply()에 대해서 알아봤습니다. 이번에는 call(), apply()처럼 함수 내 this 키워드를 지정해주는 내장함수인 'bind()'에 대해 알아보겠습니다.

 

 

Function.prototype.bind()

우선 book이라는 함수를 선언해줍니다.

function book(flightNum, name) {
    console.log(
        `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
    );
    this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });
};

book 함수는 전역 범위에서 선언된 함수이지만, 'this' 키워드와 property를 사용합니다. 곧 bind()를 이용해서 객체와 연결해줄 예정입니다.

 

const eurowings = {
  airline: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};

book 함수에 연결해줄 'eurowings' 객체 입니다.

이제 bind를 사용해보겠습니다.

 

 

const bookEW = book.bind(eurowings);

함수이름.bind(연결해줄 객체);

bind()는 대상이 되는 함수의 this에, 인수로 받은 '연결해줄 객체'를 연결한 함수를 return 합니다.

 

 

실행 결과물

bookEW에 eurowings 객체가 연결된 것을 확인할 수 있습니다.

 

 

 

---

With Event Listeners

eurowings.planes = 300;
eurowings.buyPlane = function() {
    console.log(this);

    this.planes++;
    console.log(this.planes);
};

eurowings 객체에 planes property와 buyPlane method를 추가합니다.

이때 buyPlane method는 'console.log(this)'로, 해당 메소드가 어떤 객체와 연결되어 있는 지를 체크해줍니다.

 

 

document.querySelector('.buy').addEventListener('click', eurowings.buyPlane);

그리고 DOM과 연결해줍니다.

buy 버튼을 누르면, eurowings.buyPlane()이 실행됩니다.

 

 

 

실행 결과물

buy 버튼을 누르고 난 후의 콘솔 창입니다.

원하는 결과값인 planes의 값이 나오지 않았습니다. 그리고 html element가 출력이 됐습니다.

 

왜 그럴까요?

document.querySelector('.buy')

document.querySelector()로 DOM이 선택됐습니다. 그러면 this 키워드에는 DOM 객체가 연결되어 있습니다. 여기에 addEventListner()로 콜백함수를 추가하면, 콜백함수의 this 키워드 또한 DOM 객체가 연결됩니다.

그래서 위의 실행결과물에서 html element(DOM)가 this에 연결되어 있다보니, 그것이 출력된 것입니다.

 

 

해결방법

document.querySelector('.buy').addEventListener('click', eurowings.buyPlane.bind(eurowings));

eurowings.buyPlane.bind(eurowings)

eurowings.buyPlane에 bind() 내장함수를 사용해서, 그 안에 다시 this 키워드로 지정해 줄 객체를 연결해줍니다.

 

 

 

 

---

Partial application

bind()가 새로운 함수를 return 한다는 점을 이용해서, 인수를 미리 설정할 수 있습니다.

const addTax = (rate, value) => value + value * rate;
const addVAT = addTax.bind(null, 0.23);
// addVAT = value => value + value * 0.23;
console.log(addVAT(100)); // 123

위의 코드 구조 설명

1. addTax는 rate와 value를 인수로 받습니다.

2. addVAT은 addTax에서 bind로 파생되어 나온 함수입니다.

3. bind의 첫 번째 인수는 this 키워드에 연결해줄 객체를 인수로 받습니다. 그런데 this 키워드를 연결할 필요가 없어서 null을 전달해줍니다.

4. bind의 첫 번째 이후의 인수들은 기존 함수의 인수들을 받습니다. 이때 bind로 인수를 전달받으면, 그 값이 고정된 채로 새로운 함수를 return 합니다.

5. 그래서 addVAT에는 rate에 0.23이 고정된 채로 return된 함수입니다. 그래서 유일하게 bind로 전달받지 않은 value 만을 인수로 받습니다.