`function foo () {}`대신`const foo = () => {}`를 사용하는 이유

예를 들어,이 Redux 비디오 에서 강사는 항상 다음과 같은 구문을 사용합니다.

const counter = (state=0, action) => {
   ... function body here
}

여기서는 "전통적인"

function counter(state=0, action) {
   ... function body here
}

실제로 더 짧고 IMO가 더 명확합니다. 작은 "=>"에 대해 울퉁불퉁 한 오른쪽 가장자리를 스캔하는 것보다 "기능"이라는 단어에 대해 페이지의 상당히 고르고 구조화 된 왼쪽 가장자리를 스캔하는 것이 더 쉽습니다.

this의견이 아닌 객관적이 되려고 노력하는 것 이외에도 , 새로운 방식의 구문에 유용한 차이점이나 이점이 있습니까?

함수 명령문 (함수, 두 번째 구문 표시)은 if명령문 과 같이 임의 및 제어 블록 뒤에있는 함수까지 전체 어휘 범위의 맨 위에 표시 됩니다. const(like let)를 사용하여 변수를 선언하면 블록 범위가 지정되고 전체 호이 스팅이 중지되고 (단지 블록으로 호이 스팅) 변수를 다시 선언 할 수 없습니다.

스크립트를 함께 연결하거나 다른 패키지 작성 도구를 사용하는 경우 함수 호이 스팅은 충돌하는 스크립트가 자동으로 실패하기 때문에 디버그하기 어려운 방식으로 충돌 할 수 있습니다. 다시 선언 const하면 프로그램을 실행하기 전에 예외가 발생하므로 디버깅하기가 훨씬 쉽습니다.

사용해야하는 이유는 다음과 같습니다 function.

1. 신호는 명확하고 간결합니다. 이것은 다른 답변에 나와있는 최첨단 호이 스팅 문제보다 훨씬 유리합니다.

2. 아래 코드에서 볼 수 있듯이 자동 const으로 tryDoTheThing실패 선언이 호출되고 호출을 시도 할 때까지 포착되지 않기 때문에 실제로 모듈 내에서 호이 스팅을 원합니다 .

3. 내가 접촉 한 대부분의 주니어는 const탭 위에 공백을 사용하거나 functional!!!"OOP가 잘못 되었기 때문에 모든 것을 만드는 것과 같이 유행이기 때문에 모든 기능을 선언 하는 데 사용 하기 시작 합니다. 하지마 당신은 그 의미를 완전히 이해하지 않고 유행을 따르는 그 사람이되고 싶지 않습니다.

https://gist.github.com/stephenjfox/fec4c72c7f6ae254f31407295dc72074 통해

/*
This shows that, because of block-scoping, const function references must be
invoked in-order or else things will fail silently.
const's are added the name space serially (in the order in which they appear)
and much of the body isn't declared when we first try to invoke or functions
*/


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

vs

/*
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]))
}