[JavaScript] Function vs Const

React로 웹 프론트엔드 개발을 하면서 컴포넌트를 function(){} 형태로 선언하기도 하고 const=()=>{} 형태로 선언하기도 한다. 그렇다면 두 방식의 차이점은 무엇인지, 더 나은 방식이 있다면 어떤 것인지 알아보도록 하자.

 

먼저 두 방식의 차이점은 크게 두 가지이다. 

• 호이스팅 가능 여부
• export default 동시 선언 여부

* 호이스팅(hoisting) : 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정

 

호이스팅 가능 여부

Function() 으로 선언하는 방식은 호이스팅이 가능하기 때문에 함수 실행 코드 밑에 선언을 해주는 것이 가능하다.

반면에 Const=()=>와 같은 경우 호이스팅이 불가능하기 때문에 먼저 선언을 해주고 그 밑에서 함수 실행을 해줘야 한다.

 

이 덕분에 Function()과 같은 함수형 선언의 경우 선언부는 코드 하단에 두고, 메인 로직만 윗 부분에 구현해주면서 코드 가독성을 더 높일 수 있다.

 

1. Const=()=>{}

const tryDoTheThing = () => {
  console.log(`This is me trying to be awesome ${getAwesome()}`)
}

// "getAwesome is not defined", because it is referenced too early
tryDoTheThing() // comment to see the rest work

const doTheThing = () => {
  console.log(`This is awesome! ${getAwesome()}`)
}

doTheThing() // prints

 

2. function(){}

/*
Function declarations are given two passes, where the first lifts them to
the top of the namespace, allowing "out of order" usage
*/

doTheThing();

function doTheThing() {
  console.log(`This is awesome number ${getAwesome()}`)
}

function getAwesome() {
  return (+((Math.random() * 10000).toString().split('.')[0]))
}

 

export default 가능 여부

// 선언문은 함수 선언과 export default를 동시에 할 수 있다.
export default function Foo(){}

// 표현식은 불가능하다
export default const Foo = () => {} // error

// named export는 가능하다
export const Foo = () => {}

export default를 붙여줬다는 건 해당 코드의 메인 로직이라는 것을 의미한다. 

다른 컴포넌트에서 해당 컴포넌트를 불러올 때도 export 만이 붙어있는 컴포넌트는 import {} from "./.." 형태로 불러오지만, export default가 붙어있는 컴포넌트 import name from "./..";으로 불러올 수 있다. 

 

선언과 동시에 export default를 붙일 수 있는 건 function 형식으로 선언하는 경우이고, const=()=>는 export만 붙일 수 있다.