JS엔진이 표현식과 문을 구분하는 법

 

https://youtu.be/Zc9ifjZy0gs?si=PknWCo0KNwPJO3De

 

 

표현식과 문을 정리하다보니까 헷갈리기 시작했다.

정확히 뭐가 표현식이고 뭐가 문인가

a = 1	// 표현식
a = 1;	// 문으로 쓰인 표현식
var a;	// 선언문 (표현식x)
var a = 1;	// 변수 선언문 (표현식x)

띠용~~ 그래서 더 정리해봤다.

 

표현식			문
⋅ 값이 된다. ⋅ 평가하면 결과값이 나온다 ⋅ 다른 표현식 안에 들어갈 수 있다			⋅ 동작을 '지시'한다 ⋅ 프로그램의 흐름 제어, 변수 선언 등이 가능하다 ⋅ 표현식을 포함할 수 있다
코드	설명	평가 결과	코드	설명	값 반환 여부
1 + 2	숫자 덧셈 표현식	3	var a;	변수 선언문	⭕
'hello'	문자열 리터럴 표현식	'hello'	if (a>0) { ... }	조건문	⭕
a = 1	할당 표현식	1	for (...) { ... }	반복문	⭕
true && false	논리 AND 표현식	false	a = 1;	표현식 문	❌
			var a = 1;	변수 선언문	❌

 

자바스크립트는 ECMAScript 명세에 따라 코드를 문과 표현식으로 파싱한다.

• var : 선언문을 만드는 키워드로, var를 만나는 순간 해당 코드는 문으로 해석된다.→ 다른 표현식에 들어갈 수 없음
• 세미콜론(;) : 문을 끝내는 토큰으로, 파서가 세미콜론을 만나면 '여기까지가 한 문이구나'하고 끊는다.

엔진의 파싱 과정은 아래와 같이 진행된다.

1. 토큰화 (Tokenize)
   
   • a = 1;  →  Identifier(a), =, NumericLiteral(1), ;
2. 파싱 (Parse)
   • 토큰을 *AST(Abstract Syntax Tree)로 변환
   • a = 1은 AssignmentExpression 노드로,
     뒤에 세미콜론이 붙으면 ExpressionStatement 노드로 감쌈
3. 실행 (Execute)
   • ExpressionStatement는 실행하되, 반환값을 버림

*AST란 추상 문법 트리의 약자로, 소스 코드를 구조적으로 표현한 트리 형태의 자료구조이다.

코드의 문법 구조를 노드(node)와 가지(branch)로 나누어 추상화해서 표현한다.

자바스크립트 엔진, 도구들(Babel, ESLint, TypeScript 컴파일러 등)이 AST로 코드를 검사하고 수정한다.

let a = 1 + 2;

VariableDeclaration	// 변수 선언
 ├─ Identifier: a	// 변수 이름
 └─ BinaryExpression (+)	//더하기 연산
     ├─ NumericLiteral: 1	// 피연산자
     └─ NumericLiteral: 2	// 피연산자

AST Explorer같은 AST 시각화 도구를 사용해서 다양한 언어의 AST를 볼 수 있다.

 

 

 

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators#expressions_and_statements

Expressions and operators - JavaScript | MDN

https://velog.io/@rhaudgks12/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-5%EC%9E%A5-%ED%91%9C%ED%98%84%EC%8B%9D-%EA%B3%BC-%EB%AC%B8

자바스크립트 5장 표현식 과 문

https://valur.tistory.com/entry/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Deep-Dive-5%EC%9E%A5-%ED%91%9C%ED%98%84%EC%8B%9D%EA%B3%BC-%EB%AC%B8

[모던 자바스크립트 Deep Dive] 5장 표현식과 문