자바스크립트의 Declaration vs Statement

시작은 Svelte였다

Svelte를 공부하면서 이상한 문법의 향연에 그만 정신을 잃어버리고 마는데..

$: doubled = count * 2;

..???

웃긴건 자기들도 이상한건 알지만 진짜 유효한 문법이라고 MDN Docs의 링크를 걸어놨다 ㅋㅋ

그래서 들어가봤는데, 저런 문법을 Labeled Statement라고 한다. 이걸 보고 든 생각은 Statement가 뭔데? 여서 가볍게 찾아 들어가니 Statement와 Declaration의 차이에 대해서 설명하고 있었다.

그러면서 처음 눈에 들어온 거는

if (어쩌고) var i = 0;

은 가능한 문법인데,

if (어쩌고) let i = 0;
if (어쩌고) const i = 0;

은 틀린 문법이라는.. 충격적인 내용을 봤다.

그래서 조금 더 깊게 알아보기로 했다!

Declaration과 Statement의 뜻

단순히 영어 단어 뜻을 생각해보면 비슷한 것 같다.
Declaration은 선언인데 Statement도 선언.. 아닌가? 싶었다. 번역기는 성명이라고 알려주긴 하는데, 프로그래밍 영역에서 성명이랑 선언은 같은 뜻 같은데... 라고 생각했다.

원래 알고 있던 선언

사실 프로그래밍을 조금 배우면 단어 자체로 선언문이 뭔지 배우진 않을 수도 있어도, 체감적으로는 선언문과 표현식의 차이를 알고 있을꺼다.

x + 1 // 표현식
x = 2; // 선언문

그러면 Declaration은 뭔데

MDN Docs의 설명으로는

• Declaration: 어떠한 값과 그 식별자를 연결해주는 것

  "binding identifiers to values"

• Statement: 어떠한 동작을 실행하는 것

  "carrying out actions"

으로 설명하고있다. JS의 기준에서 Declaration과 Statement는 코드가 사용될 수 있는 위치가 다르다. 위치를 잘못 사용하면 문법 오류를 내뱉는다.

JS에서 Declaration은 딱 9개 밖에 없다.

1. let
2. const
3. function
4. function*
5. async function
6. async function*
7. class
8. export // 모듈 가장 상위에만 등장 가능
9. import // 모듈 가장 상위에만 등장 가능

이걸 제외한건 모두 statement인데, var만 특이 케이스로 Statement라고 한다. 왜냐면 var는 블록 단위 선언이 아니기 때문에, Declaration으로 만들면 전역변수로 동작하거나 이미 있는 값을 바꾸는데 있어서 의도치 않게 동작할 수 있기 때문이라고 한다.

이 모든게 시작된 label 문법도 Statement에만 사용할 수 있다고 한다.

세줄 요약

1. Declaration은 변수에 값 할당하는 것
2. Statement는 지정된 명령의 실행
3. 이거는 몰라도 아무 문제 없을 것 같다(?)

var vs const vs let

• 많이 알려진 내용에 더불어서 var은 Declaration이 아니고 Statement이다 정도를 알면 누군가 물어볼 때 멋있게 대답할 수 있다 ㅋㅋ