[javascript]call, apply, bind 정리

// 유사배열 document.querySelectorAll('div'); // NodeList [div, div, div, div, div, ...]
const data = { 0: "aaa", 1: "bbbb", length: 2 };

// call
Array.prototype.forEach.call(data, (e) => console.log(5, e));

// apply
Array.prototype.forEach.apply(data, [(e) => console.log(8, e)]);

// 매개변수 없는 메소드 사용법

const user = {
 name: "junseong",
 speak: function () {
  console.log("hello I'm" + this.name);
  }
};
user.speak();
user.speak.call({ name: "HAHA" });
user.speak.apply({ name: "HAHA" });

// 매개변수 있는 메소드 사용법
const user2 = {
 name: "junseong",
 speak: function (hobby) {
  console.log(25, `hello I'm ${this.name}. My hobby is ${hobby}`);
 }
};
user2.speak("sleep");
user2.speak.call({ name: "HAHA" }, "eating");
user2.speak.call({ name: "HAHA" }, ["eating"]);

// bind 사용법 => 새로운 함수 리턴
const bark = user.speak.bind({ name: "dog" });
bark();

배열같지만 배열이 아닌 유사 배열들을 배열함수 적용 하는 방법을 위의 코드에서 정리해 보았습니다.

document.querySelectorAll(‘div’)의 결과들이 흔이 유사 배열이라고 합니다. 위에처럼 let a = {0: “aaa”, 1: “bbbb”} 이런 식으로 

만들어진 객제인데 접근할때 a[0], a[1]이렇게 값을 가져올수 있어서 배열로 착각하곤 하지만 막상 a.forEach, a.filter, a.map 등의 
배열함수를 사용할려고 할때 오류가 발생합니다. 그럴때는 위에 정리해둔 call, apply등을 사용하여 배열 함수의 메소드를 사용할수 있습니다.
마지막으로 bind는 함수를 재정의하는 방법입니다. 한번 코드를 복사해서 한번씩 실행해보시면 이해하기 좋을거 같아요.