자바스크립트 call, apply, bind (+ 스프레드 연산자, 나머지 매개변수)

함수 호출 방식(어디서, 어떻게)과 관계없이 this 지정하는 방법

: call, apply, bind

 

---

 

call(this로 사용할 매개변수, ...매개변수: 호출한 함수에 전달할 매개변수)

: 일반적인 함수와 같이 매개변수를 직접 받는다.

 

call에 this로 사용할 객체를 파라미터를 담아서 함수를 호출하면

해당 함수가 주어진 객체의 메서드인 것처럼 사용 가능

 

즉, call의 첫 번째 매개변수: this로 사용할 값, 

그 외의 매개변수 : 호출하는 함수로 전달

 

(1) this.name이 mike, tom이 됨

(2) update에 this로 사용할 매개변수 mike 전달, 나머지는 호출할 함수로 전달 1999, 'singer

---

apply(this로 사용할 매개변수, 배열 [ ])

: 두 번째 매개변수를 배열로 받는다. (즉, 배열 요소를 함수 매개변수로 사용할 때)

const nums =[3, 10, 1, 6, 4];

//스프레드 연산자 이용 (!= 나머지 매개변수)
const minNum = Math.min(...nums);
//apply 이용
const minNum = Math.min.apply(null, nums);
//call 이용 (차례대로 매개변수 전달)
const minNum = Math.min.apply(null, ...nums);

 

*스프레드 연산자와 나머지 매개변수

JavaScript에서 스프레드 연산자 (`...`)와 나머지 매개변수 (`...rest`)는 비슷해 보이지만, 서로 다른 역할을 수행합니다.

1. **스프레드 연산자 (`...`):**
   - **배열에서 사용:** 배열을 펼쳐서 각 요소를 복사하거나 다른 배열과 결합할 때 사용됩니다.

     const arr1 = [1, 2, 3];
     const arr2 = [4, 5, 6];
     const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

    
   - **객체에서 사용:** 객체를 펼쳐서 다른 객체와 병합하거나 객체를 복사할 때 사용됩니다.

     const obj1 = { a: 1, b: 2 };
     const obj2 = { c: 3, d: 4 };
     const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

     

2. **나머지 매개변수 (`...rest`):**
   - 함수의 매개변수에서 사용됩니다. 나머지 매개변수는 함수에 전달된 인수 중에서 나머지를 모두 수집하여 배열로 저장합니다.

     function sum(first, second, ...rest) {
         console.log(rest); // 나머지 매개변수로 전달된 인수들이 배열로 저장됨
         return first + second + rest.reduce((acc, val) => acc + val, 0);
     }

     const result = sum(1, 2, 3, 4, 5); // 1 + 2 + 3 + 4 + 5

   - 나머지 매개변수는 함수 정의에서 맨 마지막에 위치해야 합니다.

스프레드 연산자는 배열 또는 객체를 펼치거나 병합하는 데 사용

나머지 매개변수는 함수에서 가변 개수의 인수를 배열로 수집하는 데 사용됩니다.

 

 

---

bind(항상 this로 받을 변수)
:함수의 this 값을 영구히 바꾼다.

function update(birthYear, occupation){
   this.birthYear = birthYear;
   this.occupation = occupation;
}

const updateMike = update.bind(mike);

//항상 mike의 프로퍼티를 바꾸는 메서드
updateMike(1980, "police);

fn()만 호출 시, fn할당 시에 this를 잃어버렸기 때문에 mike가 나오지 않는다. (메서드의 this는 호출 시, '.'앞에 있는 변수가 this)

 

따라서, fn.call(user)로 호출해야 함 (fn.apply(user)로 호출해도 됨)