++ 연산자

++ 을 앞이든 뒤든 붙이면 원본 변수에도 영향을 주어 원본이 같이 변하게 된다.
for문의 조건에서만 써봐서 별 생각 없이 썼었는데 원래 변수를 변하게 한다는 것이 신기했다!
아래는 이 의문이 들었던 예제 코드

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

// 실행 결과
// 0 (0.3초)
// 1 (0.6초)
// 2 (0.9초)
// 3 (1.2초)
// 4 (1.5초)

콜백함수의 this 바인딩

코어자바스크립트 책에는 예제에 다 var로 변수를 정의하고 function 키워드로 함수를 정의한다. 화살표 함수로 바꾸면 this 바인딩이 어떻게 될지 궁금해서 한 번 해봤다.

var obj1 = {
  name: 'obj1',
  func: () => { // 이 부분이 원래는 function 키워드로 쓴 익명함수였음.
    console.log(this);
    console.log(this.name);
  }
};
setTimeout(obj1.func, 1000);

var obj2 = { name: 'obj2' };
setTimeout(obj1.func.bind(obj2), 1500);

콜백함수는 기본적으로 '함수'이기 때문에 객체의 메서드로써 사용을 한다고 하더라도 일반 함수 호출처럼 전역 객체에 this 바인딩이 된다. 따라서 다른 객체에 바인딩을 하고 싶다면 bind 메서드를 사용하면 간편하게 할 수 있는데, 위 예제에서 마지막 줄에 obj2에 바인딩해줬음에도 불구하고 window 객체가 나왔다. function 키워드로 프로퍼티를 정의하면 정상적으로 바인딩됐는데, 화살표 함수로 바꾸니 바인딩이 안 되는 것이다.

화살표 함수의 this는 오직 lexical context에서 결정되는 것이고, bind 등의 메서드를 이용해 명시적으로 this를 바꿀 수 없는 것이 이유였다!

event loop 복습

코코아 과정 때 예제였던 콜백지옥 setTimeout이 어떻게 동작할지 다시 한 번 함께 봤는데 여전히 이해 못한 나 ... 다시 공부하자 ^^