함수 선언 방식에 따른 차이

아래와 같은 두 함수 선언 방식의 차이

 

const 함수명 = () => {}
function 함수명 () {}

 

 

1. 요약

 

1) 함수 선언문 : function 함수명() {}

 - function 키워드를 사용해 선언

 - 호이스팅*이 적용됨

 - this가 동적임 (일반 함수에서 this는 호출된 컨텍스트를 따름)

 

 

2) 함수 표현식 : const 함수명 = () = > {}

 - const 키워드를 사용해 변수처럼 선언

 - 호이스팅이 적용되지 않음

 - 화살표 함수로, 이 함수는 this를 부모 스코프에서 유지함

 

 

2. this 바인딩 차이

 

- ()=>{}와 같은 화살표 함수는 this가 변하지 않기 때문에 React 이벤트 핸들러로 사용함.

// 1) 함수 선언문 : 일반 함수의 this는 호출된 객체(obj)를 가리킴.
const obj = {
  name: "Alice",
  sayHello: function () {
    console.log(this.name);
  },
};

obj.sayHello(); // "Alice"


// 2) 함수 표현식(화살표 함수) : 
//    화살표 함수의 this는 객체가 아니라 부모 스코프(전역 객체 window 또는 undefined)를 가리킴!
const obj = {
  name: "Alice",
  sayHello: () => {
    console.log(this.name);
  },
};

obj.sayHello(); // undefined

 

 

 

* 호이스팅(Hoistiong) : 호출된 변수나 함수명이 이전에 선언된 적이 없어도 이후에 선언된 것을 찾아 적용해준다.