[Javascript] " Function() " vs " Const = () => "

머릿말

 

최근 next-step 과제를 통해 다양한 사람들의 코드를 보면서, 제목에 보이는 2가지 모두 "함수다운" 기능을 수행하는데 그 차이점이 궁금하여 검색을 하게 되었다.

 

 

그래서 차이점이 뭔가요?

 

간략하게 그 둘의 차이를 말하자면, 범위 ( Scope)의 차이라고 정의 할 수 있겠다.

 

1) 

function () 같은 경우는 다른 문장의 가장 상단에서 읽히는 hoisting 이 허용이 되고,

 

2)

const = () => 같은 경우에는 block 내부에서만 구현이 가능한 범위를 가지고 있으며, 다시 선언이 될 수 없다는 특징을 가지고 있다.

 

위와 같은 이유를 통해, 일반적으로는 hoisting을 지원하는 function을 더 선호한다.

 

 

코드를 통해 알아보자.

 

1) Using Arrow 

위에서 언급 했던 것과 같이, const 형태의 Arrow Function을 선언하면 hoisting 을 지원 하지 않기 때문에, 선언을 위해서는 맨 하단에 선언 해야한다.

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 getAwesome = () => (+((Math.random() * 10000).toString().split('.')[0]))


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

doTheThing() // prints

2) Using Function

 

위와는 다르게 function 을 이용하면, hoisting이 적용이 되어 코드의 위치와는 상관없이 선언이 가능하다.

doTheThing();


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

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

 

 

출처

softwareengineering.stackexchange.com/questions/364086/why-use-const-foo-instead-of-function-foo

Why use `const foo = () => {}` instead of `function foo() {}`