[javascirpt] 03 - 함수의 기본메서드 call(), apply(), bind()

안녕하세요. 이번 시간에는 call(), apply(), bind()에 대하여 포스팅하고자합니다.

개인적으로 들어는 봤지만 this를 제어한다는 수준으로 밖에 몰랐는데 이번 기회에 한번 알아보려고합니다. 

 

자바스크립트 함수에는 기본메서드인 call(), apply(), bind()가 있습니다. 

참고 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments#

         ( 왼쪽 관련 주제 탭 -> MethodsMethods  )  

 

---

* 참고 : 함수와 메서드(메소드) 라는 말은 같은 말일까? 

프로그래밍 언어에서 공통적으로 함수라는 것은 특정한 기능을 가진 하나의 단위를 '함수'라고 말합니다. 
( 예를 들어 : x, y값 받아서 더하기를 하는 함수 ) 

자바와 같은 객체지향언어에서는 이 함수를 '메서드'라고 부르며, 자바스크립트에서는 '객체'안에 정의한 함수를 '메서드'라고 부릅니다.

하지만 '함수'와 '메서드'를 정확히 구별해서 사용하지 않지는 않습니다. 

 

function Calculator(x,y) { // 생성자 함수
    this.x = x;
    this.y = y;
}
Calculator.prototype.sum =function (){ // 메서드
    return this.x + this.y
}

 

---

* call(), apply(), bind()의 특징

- 이 3가지 기본메서드는 함수 호출 방식과 상관없이 this를 지정할 수 있습니다.

- 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다.
  실행 중에는 할당으로 설정할 수 없고 함수를 호출할 때마다 다를 수 있습니다.
  함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 메서드입니다.

 

 

call() 과 apply()

call(this로 사용될 값, 호출할 함수의 매개변수들 ... )  / apply(this로 사용될 값, 호출할 함수의 매개변수들을 배열로 받는다. ) 

 

const obj1 = {
    value : 'B'
}

const obj2 = {
    value : 'C'
}

function consoleValue(){
    console.log(this.value);
}

consoleValue(); // this => window
consoleValue.call(obj1); // 결과:B this => obj1
consoleValue.call(obj2); // 결과:C this => obj2
consoleValue.apply(obj1); // 결과:B this => obj1
consoleValue.apply(obj2); // 결과:C this => obj2

 

this의 값은 함수를 호출한 방법에 의해 결정되며, 기본적으로 window를 가리킵니다. 

call(), apply() 메서드를 통하여 this를 지정할 수 있습니다. 

 

call(), apply() 메서드의 차이

호출할 함수의 매개변수들을 배열로 담아서 처리할 경우 apply()를 사용하며, 그렇지 않을 경우 call()을 사용합니다.

 

const obj1 = {
    value : 'B'
}

const obj2 = {
    value : 'C'
}

function consoleValue(add1,add2){
    console.log(this.value, 'add1+add2 => ', add1, add2);
}

// apply()는 배열로 call()은 ','로
consoleValue.call(obj1,'오늘도','힘내자');
consoleValue.apply(obj2,['내일도','힘내자']);

 

활용방법

특정 함수를 호출할 때 '매개변수'를 배열로 넣어야 한다면  => apply()를 할용하고

각각 매개변수로 값을 넣어야 한다면  => ...args (스프레드 연산자) 를 이용해볼 수 있습니다.

 

console.log(Math.min.apply(null, [1,2,3]));
console.log(Math.min.call(null, ...[1,2,3]));

 

bind() 함수

bind() 메서드는 call(), apply() 메서드처럼 this를 제어하지만 함수 호출을 하지 않는다. 따라서 bind() 메서드를 사용할 경우 

변수에 해당 함수를 담아서 사용합니다.

 

const obj1 = {
    value : 'B'
}

function consoleValue(add1,add2){
    console.log(this.value,'add1+add2 => ', add1, add2);
}

console.log('bind는 함수호출을 하지않는다.');
consoleValue.bind(obj1,'바인드','함수'); // this => obj1으로 바꿨지만 함수호출을하지않는다.
console.log('함수호출을 해보자')
let obj1Value = consoleValue.bind(obj1,'바인드','함수');
obj1Value();

 

* 정리

- call(), apply(), bind()는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있다.

- call(), apply() 차이는 call()은 함수의 매개변수에 따라 값을 넣으면 된다. apply()는 매개변수를 '배열'형태로 담아서 넣는다.

- call(), apply() 과 bind() 함수의 차이는 call(), apply()는 선언 후 함수 호출을 하지만 bind()는 함수 호출을 하지 않는다.

 

 

실제로 객체를 생성하고나서 this값으로 인하여 원하지 않는 결과값을 얻거나 undefined가 나타는 경우 해당 메서드를 사용하면 유용하다.

 

 

 

 

감사합니다.

 

" 실패는 하나의 교훈이며 

상황을 호전시킬 수 있는 첫걸음이다 " 

 

필립스