[JavaScript] Bind가 뭐죠?

Bind란 무엇일까?

모든 함수의 메소드로 context를 수정하게 해주는 것이다.

 

bind는 함수처럼 호출 가능한 "특수객체"를 반환한다.

이 객체를 호출하면 this가 원하는 형태로 고정된 함수가 반환된다!!

 

 

let user = {
  firstName: "John"
};

function func() {
  alert(this.firstName);
}

let funcUser = func.bind(user);
funcUser(); // John

이렇게 바인딩을 시켜주면 func내부의 this는 user를 가리키게 된다!!

신기하다..

 

 

let user = {
  firstName: "John",
  say(phrase) {
    alert(`${phrase}, ${this.firstName}!`);
  }
};

let say = user.say.bind(user);

say("Hello"); 
say("Bye");

또 이런식으로 변수에 bind 결과를 할당 시켜주면 이후부터는 함수처럼 사용이 가능하다!!(user객체를 선언하지 않고도..!)

 

그렇다면 this 말고도 다른 인수도 고정시켜줄 수 있을까?

 

 

부분 적용을 해보자!(많이 쓰이진 않지만..!)

 

function mul(a, b) {
  return a * b;
}

let double = mul.bind(null, 2);

alert( double(3) ); // = mul(2, 3) = 6
alert( double(4) ); // = mul(2, 4) = 8
alert( double(5) ); // = mul(2, 5) = 10

이런식으로 bind(null, 인수)를 쓰면 2가 고정되고 함수를 사용할때 뒤에 곱해질 숫자만 전해주면 사용할 수 있게 된다!!

bind에는 항상 context를 넘겨줘야 하므로 여기서는 this대신 null을 넘겨준 것이다

 

 

+bind와 항상 같이 언급되는 call,apply

call, apply

함수를 호출하는 함수로 첫번째 인자에 this로 세팅하고 싶은 객체를 넘겨 this를 바꾸고 나서 실행한다.

const obj = {name:"fansor"};

const hi = function(hobby){
	console.log(`hello my name is ${this.name}, my hobby is ${hobby}`);
}

hi("soccer") //hello my name is , my hobby is soccer
hi.call(obj,"soccer") //hello my name is fansor, my hobby is soccer
hi.apply(obj,["soccer"]) //hello my name is fansor, my hobby is soccer

위와 같은 코드가 있다고 하자

 

첫번째 실행인 hi("soccer")은 hi가 실행될때 this에 아무런 세팅이 되어있지 않으므로 this는 window객체이다.

두번째 실행을 보면 this를 obj로 변형시켰으므로 원하는 값이 나오게 된다.

세번째 실행도 this를 obj로 변형시켜줬으므로 의도한 값이 나온다.

 

 

그러면 call과 apply의 차이가 뭐야?

첫번째 인자를 제외하고 파라미터를 입력하는 방식이 다르다!!

call과 다르게 apply는 두번째 인자부터 모두 배열에 넣어줘야 한다!!

 

끝!