자바스크립트에서 표현식과 문이란? (리터럴? 토큰??)

본 게시글은 모던 자바스크립트 Deep Dive 공부를 위해 만들어진 글이며,
저작권에 의해 글의 내용을 직접 발췌하기 보다 정리하는 식으로 쓰여졌습니다.

📙 1. 값

값은 표현식이 평가되어 생성된 결과를 말한다. (식의 결과라고 생각)

표현식이 무엇인지에서는 3번에서 다룬다!

10 + 20;

이 식이 평가되면 30이라는 '값'이 발생한다.

📙 2. 리터럴

사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글) 또는 약속된 기호( '' , . , [] , {} , // )를 사용해 값을 생성하는 표기법이다.

정수 (100) / 부동소수점 (10.5) / 2진수 0b01000001 / 8진수 0o101 / 문자열 'ab' "ab" / 불리언 리터럴 true false /

이런 식으로 사용하는 것이다! (문자 + 기호)로 만들어낸 표기법이다.

📙 3. 표현식

표현식은 값으로 평가될 수 있는 문이다. 표현식이 평가되면

(1) 새로운 값을 생성한다.

(2) 기존의 값을 참조한다.

위 둘 중의 하나의 결과가 발생한다.

var score = 100; //100이 표현식
var score = 50 +50;//50+50역시 100이라는 값을 만들기 때문에 표현식
score; //값을 참조하기 때문에 표현식

세 줄의 코드 모두 표현식이다!

첫 번째 문에서 100자체가 이미 새로운 값 자체를 생성한다.

우리가 100을 입력해주면, 자바스크립트 엔진이 '아 이 100은 100이라는 숫자 값을 나타내는구나!'하고 생각한다.따라서 이 100이라는 문자를 값으로 인식한 후 생성해주기 때문에 표현식이다.

이는 50+50에서 역시 마찬가지이다.

주의해야 하는 것은 var socre = 100; 자체는 표현식이 아니라는 것이다. 이는 선언문이다.

크롬 콘솔창에서 이를 입력해주면 표현식이 아니라는 것을 알 수 있다. (undefined가 뜨기 때문에!)

그러나 score =100 자체는 '리터럴 표현식'이므로 값을 가지고 있다. (score을 사전에 선언했다고 가정했을 때!)

A = (score = 100)을 해주면 A에 100이 할당되는 것으로 이를 증명 가능하다.

📙 4. 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 문은 선언문, 할당문, 조건문, 반복문으로 구분할 수 있다.

📙 5. 토큰

문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이다. 키워드, 식별자, 연산자, 리터럴, 세미콜론이 이에 포함된다.

다음 사진을 보자.

위 사진에서는 키워드/변수/등호(연산자)/리터럴(아라비아 숫자)/+(연산자)/리터럴(아라비아 숫자)/세미콜론 이라는 토큰으로 문이 구성되어 있다!