function 과 화살표 함수의 차이, 호이스팅(hoisting)과 연관성.

React로 컴포넌트를 만들 경우, function 과 화살표 함수를 사용해서 만들때 두가지의 차이점은 무엇일까?

 

function : 

화살표 함수 arrow function : 

 

위 처럼 두가지 방법 모두 사용이 가능하고 성능의 차이는 없다.

 

단 여기서 알 수 있는건 자바스크립의 호이스팅 개념을 공부 해 볼 수 있다.

 

1. 화살표 함수

2. function

 

1번의 화살표 함수의 경우 , const 로 선언되기에 const 아래줄에 func() 을 입력해야 동작한다.

 

2번 function 의 경우, JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당하기 때문에, 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있다.

 

(const , let 으로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않는다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외 처리가 발생.)