[Core JS] 콜백함수?

let b = function () {
  console.log("b");
};

var count1 = 0;
var timer = setInterval( () => {
  console.log(count1);
  if(++count1 > 4) clearInterval(timer);
}, 300);

실행결과
0
1
2
3

 1. 변수 count1을 선언하고 0을 할당한다.
 2. timer에는 setInterval()의 id값이 담긴다.
 3. setInterval()함수가 0.3초마다 익명함수를 실행한다.
 4. 익명함수는 count1의 값을 1씩 증가한다. setInterval()로 돌아간다.
 4. count1의 값이 4보다 커지면 clearInterval()을 호출하여 timer를 종료한다.

var obj = {
  vals: [1, 2, 3],
  logValues: function (v, i) {
    console.log(this, v, i);
  },
};
// 메서드로써 호출 => this : obj
obj.logValues(1, 2);
// 콜백함수로써 호출 => this : window
obj.vals.forEach(obj.logValues);

실행결과
{vals: [1,2,3], logValues: func}, 1, 2
window 1
window 2

 1. obj 객체를 생성한다. 프로퍼티 vals의 값으로 배열 [1, 2, 3] 을 할당,
   프로퍼티 logValues는 this, v, i의 값을 출력하는 함수를 할당
 2. obj 프로티인 logValues 메서드를 호출, 메서드 이므로
   this는 obj를 바인딩한다.
 3. obj.vals의 값인 배열 [1, 2, 3]의 forEach 함수의 콜백으로 logValues를 실행
   콜백 함수는 this를 전역 객체에 바인딩.

var obj = {
  name: "sonia",
  getName: function () {
    // 1. self에 this 할당
    var self = this;
    // 2. 익명 함수를 리턴
    return function () {
      console.log(self.name, this);
    };
  },
};

// 3. callback에 2항의 익명함수를 할당.
var callback = obj.getName();
// 4. 0.3이후 self.name에 접근
// 클로저로 내부 변수(self)의 값(name)을 출력
setTimeout(callback, 300);

실행결과;
sonia;
window;

var obj = {
  name: "sonia",
  getName: function () {
    // 1. 해당 객체의 프로퍼티 접근
    console.log(obj.name);
  },
};

var callback = obj.getName();
setTimeout(callback, 300);

// 1. obj 객체 생성
var obj = {
  name: "sonia",
  getName: function () {
    // self 변수에 this를 할당하여 재활용 가능
    var self = this;
    return function () {
      console.log(self.name);
    };
  },
};

var callback = obj.getName();
setTimeout(callback, 300);

// 2. obj 객체 생성
var obj2 = {
  name: "star",
  // 1항에서 생성한 getName을 할당
  getName: obj.getName,
};

var callback2 = obj2.getName();
setTimeout(callback2, 300);

var obj3 = { name: "sujin" };

// 1항에서 생성한 getName에 this에 obj3인자로 넘김
var callback3 = obj.getName.call(obj3);
setTimeout(callback3, 300);

var obj = {
  name: "sonia",
  getName: function () {
    console.log(this.name);
  },
};
setTimeout(obj.getName.bind(obj), 300);

var obj2 = { name: "sujin" };
setTimeout(obj.getName.bind(obj2), 300);

var obj = {
  name: "sonia",
  getName: function () {
    // 화살표함수를 선언과 동시에 반환
    return () => console.log(this.name);
  },
};

var callback = obj.getName();
setTimeout(callback, 300);