표현식과 문

값

표현식이 평가되어 생성된 결과

모든 값은 데이터 타입을 가지며 메모리에 2진수(bit)의 나열로 저장된다.
메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있는데,

예를 들어 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만 문자로 해석하면 ‘A’다.

리터럴

사람이 이해할 수 있는 문자, 약속된 기호를 사용해 값을 생성하는 표기법

자바스크립트 엔진이 런타임에 리터럴을 평가해 값을 생성한다.

표현식

값으로 평가될 수 있는 문(statement)

표현식이 평가되면 새로운 값을 생성하거나 기존의 값을 참조한다.

var score = 100; // 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 그 자체로 표현식이다.
var score = 50 + 50; // 자바스크립트 엔진에 의해 평가되어 숫자 값 100을 생성하므로 표현식이다.
score; // 값 100으로 평가되므로 표현식이다.

자바스크립트의 표현식 1 + 2는 평가되어 3을 생성하므로 이 둘은 같다고 할 수 있다. 이러한 원리로 표현식은 값처럼 사용할 수 있고, 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 의미한다.

var x = 1 + 2;
x + 3;

위와 같이 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있다.

문

프로그램을 구성하는 기본 단위이자 최소 실행 단위

여러 토큰(문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미함)으로 구성된다.
선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있고 실행 시 컴퓨터에 특정 명령이 실행되고 어떤 일이 일어난다.

문의 종료

세미콜론으로 나타냄. 단, 0개 이상의 문을 중괄호로 묶은 코드 블록({...}) 뒤에는 세미콜론을 붙이지 않는다.

문의 끝에 붙이는 세미콜론은 생략이 가능한데, 자바스크립트 엔진이 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행되기 때문이다.

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

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

console.log(foo()); // undefined

var bar = function () {}
(function() {})();
// ASI의 동작 결과 => var bar = function () {}(function() {})();
// 개발자의 예측 => var bar = function () {}; (function() {})();
// TypeError: (intermediate value)(...) is not a function

위처럼 ASI는 개발자의 의도와는 다르게 코드가 동작할 수 있기 때문에
세미콜론을 넣는 것이 권장된다.

표현식 구별

var x; // 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다.
x = 1 + 2; // 다음은 표현식이면서 완전한 문이기도 하다.

다음과 같이 표현식과 문은 비슷해서 구별하기 어렵다.
우선, 문에는 표현식인 문과 표현식이 아닌 문이 있다.

이 둘은 값으로 평가될 수 있는지 여부에 따라 갈리게 되는데,
표현식은 값으로 평가될 수 있는 문을, 표현식이 아닌 문은 값으로 평가될 수 없는 문을 말한다.

예를 들면, 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아닌 문, 할당문은 값으로 평가될 수 있으므로 표현식인 문이다.

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

다음 예제를 통해 확인해보자.

var x;
var foo = var x; // SyntaxError: Unexpected token var

표현식이 아닌 문은 값처럼 사용할 수 없다.

x = 100;
var foo = x = 100;
console.log(foo); // 100

표현식인 문은 값처럼 사용할 수 있다.