[모던 자바스크립트 Deep Dive] 표현식(Expression)과 문(Statement)

해당 글은 모던 자바스크립트 Deep Dive 5장을 읽고 정리한 글이다.

1. 값(Value)

• 값은 식(표현식)이 평가되어 생성된 결과를 말함.
  • 평가: 식을 해석해서 값을 생성하거나 참조하는 과정을 의미함.
• 모든 값은 데이터 타입을 가지며, 메모리에 2진수(bit) 형태로 저장됨.
• 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음.
  • 예: 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만, 문자로 해석하면 "A"임.
• 변수에 할당되는 것은 표현식 그 자체가 아니라 표현식의 평가 결과로서 생성된 값임.

2. 리터럴(Literal)

• 리터럴은 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 약속된 기호("", ., [], {}, // 등)를 사용해 값을 생성하는 표기법임.
• 자바스크립트 엔진은 코드가 실행되는 시점(런타임)에 리터럴을 평가해 값을 생성함.
• 즉, 리터럴은 값을 생성하기 위한 미리 약속된 표기법이라 할 수 있음.

리터럴 종류	예시
숫자	10, 3.14
문자열	"Hello", 'Hi'
불리언	true, false
배열	[1, 2, 3]
객체	{x:10, y:20}

3. 표현식(Expression)

• 표현식은 값으로 평가될 수 있는 문을 말함.
• 표현식이 평가되면 새로운 값을 생성하거나(예: 1+2) 기존 값을 참조함(예: arr[0]).
• 표현식은 리터럴, 식별자(변수명, 함수명 등), 연산자, 함수 호출 등의 조합으로 이루어질 수 있음.

var score = 100; // 리터럴 100 자체가 표현식
var score = 50 + 50; // 리터럴 + 연산자로 구성된 표현식

score; // 변수 식별자를 참조하면 변수 값으로 평가되므로, 식별자 참조는 표현식

// 리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

4. 문(Statement)

• 문(Statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위임.
• 문의 집합으로 이루어진 것이 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 행위가 곧 프로그래밍이라 할 수 있음.
• 문은 여러 토큰(token)으로 구성됨.
  • 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 말함(예: 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등).
• 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있음.

// 변수 선언문
var x;

// 할당문
x = 5;

// 함수 선언문
function foo() {}

// 조건문
if (x > 1) {
  console.log(x);
}

// 반복문
for (var i = 0; i < 2; i++) {
  console.log(i);
}

5. 세미콜론(;)과 세미콜론 자동 삽입 기능(ASI)

• 자바스크립트 엔진은 세미콜론을 통해 문이 종료되는 위치를 파악하고, 순차적으로 하나씩 문을 실행함.
• 단, 코드 블록({...}) 뒤에는 세미콜론을 붙이지 않음.
  • 왜냐하면 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문임.
• 프로그래밍할 때 세미콜론은 생략 가능함.
  • 자바스크립트 엔진이 소스코드를 실행할 때, 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 ASI(Automatic Semicolon Insertion) 기능이 암묵적으로 수행되기 때문임.
• 하지만 ASI의 동작이 개발자의 의도와 다를 수 있는 예외 상황이 있으므로, 명시적으로 세미콜론을 붙이는 것을 권장함.

6. 표현식인 문과 표현식이 아닌 문

• 표현식인 문은 값으로 평가될 수 있는 문임.
• 표현식이 아닌 문은 값으로 평가될 수 없는 문임.
• 둘을 가장 간단히 구별하는 방법은 변수에 할당해보는 것임.
  • 표현식인 문은 값으로 평가되어 변수에 할당 가능함.
  • 표현식이 아닌 문은 값으로 평가할 수 없으므로, 변수에 할당하면 에러가 발생함.

// 변수 선언문은 표현식이 아닌 문
var x;

// 할당문은 그 자체로 표현식이며 동시에 완전한 문(표현식인 문)
x = 100;

// 표현식이 아닌 문은 값처럼 사용할 수 없음
var foo = var x; // SyntaxError: Unexpected token var

// 표현식인 문은 값처럼 사용할 수 있음
var foo = x = 100;

완료 값(Completion Value)

• 크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 완료 값 undefined를 출력함. 이를 완료 값이라 부름.
• 표현식인 문을 실행하면 평가된 값이 반환됨.