これらの内容は「Core Javascript」の書籍を参考にして作成され、初心者開発者に有益な書籍を提供してくれた著者の池恩・鄭在南に感謝します。

コールバック関数

呼び出しポイント/パラメータ/this

let i = 0;
let timer = setInterval(() => {
  console.log(i);
  i++;
  i > 4 ? clearInterval(timer) : null;
}, 300);
// 0.3초마다 콜백함수가 호출되도록 제어하는 setInterval

[1, 2, 3].map((idx, value) => {
  console.log(idx, value);
  /*
  1 0
  2 1
  3 2
  */
});
// 인자의 명칭과 상관없이 첫번째 인자에는 요소가 두번째 인자에는 인덱스가 배치된다
// map 메서드처럼 콜백 함수가 받는 인자에 대한 규칙이 있을시 제어할 수 있다.

[1, 2, 3].forEach(
  function () {
    console.log(this); // [1,2]
  },
  [1, 2]
);
// forEach 같은 this 인자를 받는 메서드 같은 경우에는 콜백함수의 this 값을 지정해주기도 한다.

コールバック関数は関数です。

let obj = {
  val: [6, 7],
  func: function () {
    console.log(this);
  },
};

[1, 2].forEach(obj.func);
// obj 가 아닌 전역객체가 출력된다 왜일까?

コールバック関数の内部で別の値をバインド

let obj = {
  val: [5, 6],
  func: function () {
    let self = this;
    return function () {
      console.log(self);
    };
  },
};

let newFunc = obj.func();
[1, 2].forEach(newFunc); // { val: [ 5, 6 ], func: [Function: func] }
// 이런식으로 활용할 this 값을 미리 정의한 함수를 반환하여 새로운 변수에 할당하는 방식이다.

// 두가지 방식이 있다.
let obj = {
  val: [5, 6],
  func: function () {
    let self = this;
    return function () {
      console.log(self);
    };
  },
};

// 1. 프로퍼티로서 해당 함수를 그대로 활용하는 법
let obj2 = {
  val: [7, 8],
  func: obj.func,
};

let newFunc2 = obj2.func();
[1, 2].forEach(newFunc2); // { val: [ 7, 8 ], func: [Function: func] }

// 2. call 메서드를 활용하여 this 값을 지정하는 법
let obj3 = { val: [9, 0] };
let newFunc3 = obj.func.call(obj3);
[1, 2].forEach(newFunc3); // { val: [ 9, 0 ] }

Bind

let obj = {
  val: [5, 6],
  func: function () {
    console.log(this);
  },
};

[1, 2].forEach(obj.func.bind(obj));
// bind 메서드는 새로운 함수를 반환하기 때문에 this 값이 지정된 함수를 넘겨줄 수 있다.