javascript의 bind 함수

개요

javascript의 bind 함수에 대해 기록

bind 란?

어떤 함수 뒤에 x.bind(param1, pararm2)가 체인되어 있으면 이건 새로운 함수를 생성해서 반환시킨다는 의미이다.

param1로는 우리가 새롭게 생성한 함수 내에서 사용할 this를 전달할 수 있고

param2로써는 새로운 parameter를 정의할 수 있다.

 

Usage

button의 click 이벤트에 어떤 함수를 등록하고 싶다.

어떤 함수는 greet로써 이름을 매개변수로써 받고있다.

function greet(name) {
  alert('Hi ' + name);
}

greet에 매개변수를 전달하고 싶은데 밑에 처럼 코드를 작성하면 greet가 실행되어서 alert가 바로 출력되어진다.

someButton.addEventListener('click', greet('희원'));

 

이럴때 bind를 활용할 수 있는데 bind는 함수를 실행하지 않고 함수를 새롭게 생성해서 반환하는 친구이기에 아주 적절한 모양으로 매개변수를 전달할 수 있다.

someButton.addEventListener('click', greet.bind(null, '희원'));