[자바스크립트 중급] call, apply, bind

https://youtu.be/KfuyXQLFNW4

call, apply, bind

자바스크립트에서의 함수 호출 방식

function add(a: number, b: number): number {
  return a + b;
}
console.log(add(10, 20));
console.log(add.apply(null, [10, 20]));
console.log(add.call(null, 10, 20));
console.log(add.bind(null, 10, 20)());

call, apply, bind : 함수 호출 방식과 관계없이 this를 지정할 수 있음

javascript의 함수는 각자 자신만의 this라는 것을 정의한다.

기본적으로 this는 window이지만 this는 객체 내부, 객체 메서드 호출시, 생성자 new 호출시, 명시적 bind시에 따라 바뀐다.

자바스크립트에서는 함수를 어디서 어떻게 호출했느냐에 관계없이 this가 무엇인지 지정할 수 있다.

call, apply, bind 는 함수의 this를 명시적으로 바인딩 할때 사용합니다.

유용하면서 자주 사용되는 함수이고, 형태는 조금씩 다르니 익숙해 지도록 하자

const mike = {
  name: "Mike",
};

const tom = {
  name: "Tom",
};

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

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

showThisName.call(mike);
showThisName.call(tom);

updateBtith.call(mike, 1999, "singer");
console.log(mike);
updateBtith.apply(tom, [1995, "programmer"]);
console.log(tom);

const nums = [3, 100, 12, 342, 2];
const minNum = Math.min(...nums);
const maxNum = Math.max(...nums);
console.log(minNum); //2
console.log(maxNum); //342

apply 응용해보기

const nums = [3, 100, 12, 342, 2];
//const minNum = Math.min(...nums);
const minNum = Math.min.apply(null, nums);
//const maxNum = Math.max(...nums);
const maxNum = Math.max.apply(null, nums);
console.log(minNum); //2
console.log(maxNum); //342

call 응용해보기

const nums = [3, 100, 12, 342, 2];
//const minNum = Math.min(...nums);
//const minNum = Math.min.apply(null, nums);
const minNum = Math.min.call(null, ...nums);
//const maxNum = Math.max(...nums);
//const maxNum = Math.max.apply(null, nums);
const maxNum = Math.max.call(null, ...nums);
console.log(minNum); //2
console.log(maxNum); //342

결국 중요한 것은

apply와 call의 동작 방식은 같은데 매개 변수를 받는 방법만 다를 뿐이다.

bind

bind함수가 call, apply와 다른 점은 함수를 실행하지 않는다는 점이다. 대신 bound함수를 리턴한다.

const mimi = {
  name: "MiMi",
};

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

const updateMiMi = update.bind(mimi);
updateMiMi(1995, "artist");
console.log(mimi);

const user = {
  name: "Kara",
  lookName: function () {
    console.log(`hello, ${this.name}`);
  },
};

user.lookName(); //hello, Kara

let fn = user.lookName;
fn.call(user); //hello, Kara

fn.apply(user); //hello, Kara

let boundFn = fn.bind(user);
boundFn(); //hello, Kara

---

적용 사례

const say = function() {
  console.log(this); // 여기서 this는 뭘까?
  console.log("Hello, my name is " + this.name);
};

say();

say함수에서 Window객체를 사용하고 싶지 않다. 즉, this를 그때 그때 알맞은 객체로 바꿔서 this값에 따라 인사말이 할 수 있도록 만들기 위해서 this를 binding할 수 있다. 명시적으로 위의 this를 Window가 아닌 다른 객체로 바꿔주는 함수가 call, apply, bind이다.