[Javascript] bind 알아보기

 

bind 알아보기

 

해당 예시는 코어 자바스크립트의 '함수 바인딩'을 참조하였습니다.

---

 

📌 들어가며

 

유데미 강의 중 bind에 대해 설명하며 'bind는 향후 실행을 위해 함수를 사전에 구성한다. 기본적으로 함수가 실행될 때 받을 인수를 미리 구성할 수 있다.'라고 설명하는데,

bind에 사용법에 대해 추가로 더 알아본다. 

 

 

📌 bind란

 

bind는 자바스크립트 메소드로 호출되면 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환한다.

이 객체를 호출하면 this가 참조하는 변수(context)로 고정된 함수가 반환된다.

 

 

let exFunc = func.bind(context);

 

📌 사용하기

 

1. 먼저 객체에 변수와 함수가 존재할 때 객체 내의 함수를 다른 변수에 할당해 실행하면 예상한 대로 반환되는지 알아보자.

 

let 객체 = {
    name: "홍길동",
    func: function () {
	return console.log(this.name + "씨");
    }
};

 

 

객체 안에 name이라는 변수가 선언되고 ("홍길동") 함수 func로 콘솔에 "홍길동씨"가 찍힐 것으로 예상된다.

 

 

const 호명 = 객체.func;

 

위와 같이 인사생성 이라는 상수에 객체의 func 함수를 가리키게 하고 실행해보자.

 

 

 

위의 실행결과와 같이 "홍길동씨"가 아니라 "씨"만 반환되는 것을 볼 수 있다.

그럼 this.name은 어디로 갔을까?

 

2. bind를 이용하여 호명이라는 함수에 객체를 바인딩하자

 

 

const 호명 = 객체.func.bind(객체);

 

이제 다시 호명을 실행해보면 아래와 같이 우리가 예상한 대로 실행이 된다.

 

 

 

 

 

혹은 호명 함수에 객체를 bind 하여 실행해도 동일하게 예상한 결과를 반환한다.

 

 

const 바인딩된호명 = 호명.bind(객체);

 

 

 

 

bind로 우리가 필요로 하는 메서드(객체 안의 func)를 가져와서 객체를 바인딩 하는 방법을 알아보았다. 이제 setTimeout 등 this가 가리키는 변수가 변하는 것과 상관없이 원하는대로 this를 고정할 수 있다.

 

그럼 위에서 이야기한 '함수가 실행될 때 받을 인수를 미리 구성할 수 있다.'는 이야기는 무엇일까?

 

 

bind는 this 뿐만 아니라 인수도 바인딩이 가능하다.

bind의 전체 문법을 다시 한 번 확장해서 살펴보자.

 

 

let exFunc = func.bind(context);

...

let exFunc = func.bind(context, arg1, arg2, ...);

 

 

위와 같이 bind에서 context(참조값)만 지정해 주는 것이 아니라 인수도 미리 넣어줄 수 있다.

 

 

1. 곱셈값을 반환하는 함수를 만든다.

 

function 곱하기(a, b) {
  return a * b;
}

 

 

이제 bind를 이용하여 2배를 해주는 함수를 만들 수 있다.

 

let 두배 = 곱하기.bind(null, 2);

 

첫 번째 인수를 null로 전달하면 두배는 참조하는 context가 없게 되고, 두 번째 인수를 2로 넣어주면 

두배 라는 함수는 곱하기 함수를 통해서 인수 한 개만 넣어도 2배를 해주는 함수가 된다.

첫 번째 인수로 null을 넣는 이유는 bind 메소드에는 항상 참조값context를 넣어줘야 하기 때문에 null로 넘겨주는 것이다.

 

 

 

이렇게 기존 함수를 가지고 부분 함수를 만들어서 가독성이 좋은 이름을 가진 함수를 새로 생성해서 사용할 수 있고

첫 번째 인수를 고정하면서 매번 인수를 전달하지 않아도 된다 (ex 곱하기(2, 2), 곱하기(2,5), 곱하기(2, 36))

 

 

📌 공식문서 및 참조

MDN

코어 자바스크립트

bind의 성능