[이론]js 개발자라면 알아야하는 핵심 컨셉 33개 #7.Expression vs Statement

js 개발자라면 알아야하는 핵심 컨셉 33개, 7번째 개념은 Expression과 Statement에 대한 이야기이다.

 

Expression vs Statement

Expression은, value를 return하는 어떤 것을 의미한다.

위의 경우 function add는 2개의 인자를 넘겨받아 두 인자의 합을 return한다.

따라서 add는 Expression이다.

※참고로 함수에 return값을 명시하지 않더라도 Expression이 아닌 것은 아니다.

이와 같은 경우에도 함수의 결과 값은 undefined를 return하기 때문에, Expression이라고 할 수 있다.

JS는 Expression을 return되는 Value로 대체한다.

위의 경우에 JS는 1+1이 Expression이기 때문에 1+1 -> 2로 변환하고,

그것을 출력하는 것이다.

 

Statement는 명령, 지시이다.

다음과 같은 if문이 존재한다.

이것을 constant 변수에 저장하려고 시도하면..

역시나 에러를 발생시킨다.

Statement를 변수로 저장할 수 없기 때문이다.

 

Function Expression vs Function Declaration

Function Expression과 Function Declaration도 살펴보자.

Function Declaration

프로그램 흐름상 function add는 const awesome이 선언되기 이전에 존재하지 않아야 맞다.

그러나 왠걸, 위 코드가 정상 작동하는 모습을 볼 수 있다.

이것이 Function Expression과 Function Declaration의 차이다.

JS가 코드를 읽어 내려갈 때, 모든 declaration을 js 최상단으로 끌어온다(호이스팅이라고 한다.)

 

그럼 이런 경우는 어떨까?

화살표 함수

이 또한 hoisting되어 정상적인 결과를 출력할까?

코드가 동작하지 않는다.

이유는 이것이 Function Declaration(함수 선언)이 아니라 Function Expression(함수 할당)이기 때문이다.

호이스팅은 '선언'에 해당하는 것들만 최상단으로 끌어올리기 때문에 이와 같은 에러가 발생한 것이다.

 

출처 : github js-33concepts, Nomad Coders