[ React ] function(선언문) vs const (표현식)

// 선언문
function main(){}

// 표현식
const main = () =>{}

 

이 둘의 차이는 무엇일까?

 

1. export default를 선언과 동시에 할 수 있는가

export default function main(){}

선언문은 가능하지만, 표현식은 불가능하다.

 

 

2. 호이스팅

호이스팅(Hoisting)은 JavaScript에서 변수 선언과 함수 선언을 해당 스코프의 최상단으로 끌어올리는 동작을 말합니다. 변수 선언은 호이스팅되지만 변수의 할당은 호이스팅되지 않습니다. 따라서 변수 선언은 최상단으로 끌어올려지지만, 실제로 변수에 값을 할당하는 부분은 원래 코드의 위치 그대로 남게 됩니다.

함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어올려진다.

함수 표현식은 함수 선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다. 함수 표현식에서는 선언과 할당의 분리가 발생한다.

 

=> 함수 선언문의 경우 함수 호이스팅이 가능해 선언부를 모두 모듈 하단에 내려놓고, 메인 로직만 상단에 배치함으로써 가독성을 높일 수 있다.

 

나는 회사에서 표현식을 쓰다보니 훨씬 더 익숙해서 표현씩을 꼐속 쓸 것 같다. 

 

 

출처 : https://yejinrla.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F 

Tistory

 

https://whales.tistory.com/111

호이스팅(Hoisting) 이해하기