[ JavaScript ] bind의 이해

bind는 this를 변경 해주는 내장 메서드로 모든 함수에서 사용할 수 있습니다.

다음 예제는 this.foo는 전역으로 state 내의 foo는 지역으로 선언되어 있습니다.

 

(예1)처럼 bar객체를 생성해서 사용하면 전역의 this.foo 즉 10을 반환합니다.

state가 전역으로 선언되었고, this.foo도 전역에 있음으로 이를 반환하는 것입니다.
만일 전역에 this.foo가 없다면 어떻게 될까요?

브라우저 환경에서는 windows.foo를 찾게 되는데, windows.foo라는 것은 없으니 undefined라고 출력됩니다.

 

그렇다면 state내부에 있는 foo를 읽어오려면 어떻게 해야 할까요?

(예2)처럼 호출하면 지역의 state내의 foo, 즉 50 반환합니다.
이렇게 직접 호출하면 문제는 없지만 반복해서 여러번 호출해야 한다면 객체를 생성해서 사용하는 것이 편합니다.

객체를 생성해서 사용한 (예1)의 경우처럼 전역을 읽어오거나, undefined되는 것을 방지하기 위에서 (예1)에서 생성한 bar를 state와 binding시켜 새로운 객체를 생성하면 (예3)처럼 지역의 50을 반환하게 됩니다.

설명을 하기위해 예1, 예3의 과정을 거쳤으나 (예4)와 같이 바로 binding해서 사용하면 됩니다.

this.foo = 10
let state = {
  foo: 50,
  getFoo: function() { return this.foo }
}

// (예1)
let bar = state.getFoo
console.log(`전역 반환: ${bar()}`) // 10

// (예2)
state.getFoo()
console.log(`지역 반환: ${state.getFoo()}`) // 50

// (예3)
let bindBar = bar.bind(state)
console.log(`binding: ${bindBar()}`) // 50

// (예4)
let foobar = state.getFoo.bind(state)
console.log(`직접 binding: ${foobar()}`) // 50