bind() 함수란 무엇인가?
자바스크립트에서 apply() 함수가 실행 결과로 값(value)을 반환하는 것과 달리, bind() 함수는 코드를 실행할 수 있는 새로운 함수 자체를 반환합니다.
즉, 두 함수 모두 this 값을 바인딩하는 역할은 같지만, 즉시 실행되느냐 나중에 실행할 수 있는 함수를 돌려주느냐가 핵심적인 차이입니다.
예제 1: bind()와 apply()의 출력 결과 비교
아래 코드에서 apply()는 곧바로 값을 출력하는 반면, bind()는 함수를 출력하는 것을 확인할 수 있습니다.
<html>
<body>
<script>
var obj = {num : 10};
var mul = function(i, j, k){
return this.num * i*j*k;
}
var array = [6,3,4];
document.write(mul.bind(obj,array));
document.write("</br>");
document.write(mul.apply(obj,array));
</script>
</body>
</html>출력 결과
function () { [native code] }
720반환된 함수에 인수 전달하기
일반적으로 어떤 함수에든 인수를 전달하면 값이 출력됩니다. 마찬가지로 bind()가 반환한 함수에 인수를 전달해 호출하면, 그때 비로소 값이 출력됩니다.
예제 2: bind()로 생성한 함수를 변수에 담아 실행하기
다음 예제에서는 bind()가 반환한 함수를 "round"라는 변수에 할당한 뒤, 해당 변수에 인수를 전달하여 함수가 아닌 값을 얻는 과정을 보여줍니다.
<html>
<body>
<script>
var obj = {num : 10};
var mul = function(i, j, k){
return this.num * i*j*k;
}
var array = [6,3,4]
var round = mul.bind(obj);
document.write(round(6,3,4));
document.write("</br>");
document.write(mul.apply(obj,array));
</script>
</body>
</html>출력 결과
720 720
정리: bind()와 apply()의 핵심 차이
apply()는 함수를 즉시 실행하고 그 결과값을 반환하지만, bind()는 this가 고정된 새로운 함수를 반환합니다. 따라서 동일한 컨텍스트를 재사용해야 하는 상황에서는 bind()로 함수를 미리 만들어 두고, 필요할 때마다 인수를 전달해 호출하는 방식이 유용합니다.