중급 기본 정리 (with 앙마코딩) call, apply, bind

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)
문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

call, apply, bind

**함수 호출 방식과 관계없이 this를 지정 할 수 있다.

call : 모든 함수에서 사용가능하며 this를 특정값으로 지정 할 수 있다

function showThisName() {
  console.log(this.name);
}

이라는 함수가 실행된다면 반환되는 값은 공백이다. 그 이유는 함수 안에 있는 this는 윈도우 객체를 가르키기 때문에 공백이 반환된다.
여기서 call을 사용하면 this값을 지정할 수 있다.

const btae = {
  name: 'Btae',
};

function showThisName() {
  console.log(this.name);
} // 이 자체는 여전히 공백

showThisName.call(btae); // this를 btae로 지정함으로 btae.name을 console.log 한다.

만약 함수가 인수를 받는다면 call(this값 , 인수1,인수2....)형태로 작성하면 인수 값도 받을 수 있다.

const btae = {
  name: 'Btae',
};

function update(birthYear, occupation){
  this.birthYear = birthYear;
  this.occupation = occupation;
} // 태어난 연도와 직업을 입력 받아 객체로 만드는 함수 

update.call(btae, 1996, 'coach');

console.log(btae); // { name : 'Btae', birthYear = 1996, occupation: 'coach'} 

이렇게 사용하면 btae객체 안에 함수를 실행하여 키값과 프로퍼티를 추가 할 수 있다.

aplly : 함수 매개변수를 처리하는 방법을 제외하면 call과 완전 동일하다.

call은 일반적인 함수와 마찬가지로 매개변수를 직접 받았지만 apply는 매개변수를 배열로 받는다.
배열로 받는다고 해서 값이 달라지는 건 아니다.(똑같이 객체로 반환된다)

const btae = {
  name: 'Btae',
};

function update(birthYear, occupation){
  this.birthYear = birthYear;
  this.occupation = occupation;
} // 태어난 연도와 직업을 입력 받아 객체로 만드는 함수 

update.call(btae, [1996, 'coach']);

console.log(btae); // { name : 'Btae', birthYear = 1996, occupation: 'coach'} 

apply는 배열요소를 함수 매개변수로 사용할 때 유용하다.

const nums  [1, 5, 7, 8, 2]; //이 배열의 최솟값을 구해보자

const minNum1 = Math.min(...nums);
const minNum2 = Math.min.call(null, ...nums);
const minNum3 = Math.min.apply(null, nums);

간단하게 이렇게 3가지 방법을 이용 할 수 있다.
minNum1은 스프레드 연산자를 이용하여 배열을 각각 인수로 입력받아 사용했다.
minNum2는 마찬가지로 인수에 배열이 올 수 없어 스프레드 연산자를 사용하여 각각 인수로 입력받아 사용했다.
minNum3는 배열로 인수를 받을 수 있기 때문에 그대로 사용했다.

call과 apply의 첫 번째 인수 null은 this값을 의미한다. 여기서 this는 필요 없으므로 아무 값이나 입력하면 된다.

bind : this값을 영구히 바꿀 수 있다.

const btae = {
  name: 'Btae',
};

function update(birthYear, occupation){
  this.birthYear = birthYear;
  this.occupation = occupation;
} // 태어난 연도와 직업을 입력 받아 객체로 만드는 함수 

const updateBtae = update.bind(btae);

updateBtae(1996, 'coach');
console.log(btae); // { name : 'Btae', birthYear = 1996, occupation: 'coach'} 

위 예제와 같이 새로운 변수에 할당하여 this를 영구히 btae로 받는 함수를 만들었다.

다른 예를 들어보자

const user = {
  name: 'btae',
  showName: function(){
    console.log(`hello, ${this.name}`);
  },
};

user.showName(); // hello, Btae

let fn = user.showName;
fn(); // hello,

fn.call(user);
fn.apply(user);

let boundFn = fn.bind(user);
boundFn();
/* call, apply, boundFN 모두 hello, Btae*/

이 예제에서 fn()은 반환을 hello, 만 했다. 그 이유는 할당되는 과정에서 함수만 옮겼기 때문에 this값이 없어진 것이다.
우리는 이 상태에서 call과 apply를 통해 this값을 지정할 수 있으며, bind를 통해 this값을 영구히 정할 수 있는 새로운 함수를 만들 수도 있다.