[복습] 함수선언 vs 함수표현식

함수선언과 함수표현식의 차이점

• 함수선언에서의 this

const obj = {
  name: "Giggles",
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // 결과: "Giggles"

• 함수표현식에서의 this

const obj = {
  name: "Giggles",
  greet: () => {
    console.log(this.name);
  }
};

obj.greet(); // 결과: undefined
/* 화살표 함수에서는 this가 obj를 가리키지 않고,
함수가 선언된 상위 스코프(전역, 또는 모듈의 this)를 그대로 사용함. */

• 함수선언에서의 this
  function A() { } 은 → "나를 누가 부르냐?"를 보고 그때그때 this를 정함.
• 화살표함수에서의 this
  () => { } 은 → "나 태어날 때 주인 누구였냐?"를 보고 고정함. (출생 시점이 중요함)
• 화살표 함수는 객체 안에서 쓰더라도 this를 객체인 "obj"에 바인딩하지 않는다. 오직 "선언 당시의 바깥 this"를 캡처할 뿐이다. 그래서 객체 안의 메서드는 보통 함수선언의 형태 function A() 로 쓴다.
• 화살표함수는 콜백 안에서 this 를 유지하고 싶을 때 유용하다.

const obj = {
  name: "Giggles",
  greet() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

obj.greet(); // "Giggles"