1. 값

값(value)은 식(expression)이 평가(evaluation)되어 생성된 결과를 말한다.

모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다.

변수는 하나의 값을 저장하기 위해 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.

var sum = 10 + 20;

가장 기본적인 방법은 리터럴을 사용하는 것이다.

2. 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

리터럴은 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳 등) 또는 미리 약속된 기호(””, [] 등)로 표기한 코드다

자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다.

3. 표현식

표현식은 값으로 평가될 수 있는 문(statement)이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

다음 예제 모두 표현식이다.

var score = 100;
var score = 50 + 50;
score;

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

4. 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다. 문은 여러 토큰으로 구성된다.

토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.

// 변수 선언문
var x;

// 할당문
x = 5;

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

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

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

5. 세미콜론과 세미콜론 자동 삽입 기능

세미콜론(;)은 문의 종료를 나타낸다. 즉, 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.

문의 끝에 붙이는 세미콜론은 옵션이다. 즉, 세미콜론은 생략 가능하다. 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 시점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능이 암묵적으로 수행되기 때문이다.

하지만 세미콜론 자동 삽입 기능의 동작과 개발자의 예측이 일치하지 않는 경우가 간혹 있다.

function foo() {
  return
  {}
}
// API의 동작결과 return; {};
// 개발자의 예측 return {};

console.log(foo());

ESLint 같은 정적 분석 도구에서도 세미콜론 사용을 기본으로 설정하고 있으며 현재 자바스크립트 진영에서는 세미콜론 사용을 권장하는 분위기이므로 세미콜론을 붙이는 것을 기본으로 하면 된다.

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

// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아님
var x;
// 1, 2, 1 + 2, x = 1 + 2 모두 표현식.
// x = 1 + 2는 표현식이면서 완전한 문
x = 1 + 2;

문에는 표현식인 문과 표현식이 아닌 문이 있다.

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것

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

// 할당문은 그 자체가 표현식이지만 완전한 문
x = 100

// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // SyntaxError

할당문은 표현식인 문이기 때문에 값처럼 사용할 수 있다.