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

 

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다.

 

05장 표현식과 문

 

5.1 값

 값은 표현식이 평가되어 생성된 결과를 말합니다. 여기서 평가는 식을 해석하여 값을 생성하거나 참조하는 것을 의미합니다.

아래 예제는 표현식 10 + 20을 평가한 결과로 30이라는 숫자 값을 생성합니다.

10 + 20; // 30

 모든 값은 데이터 값을 가지며 메모리에는 2진수(bit)의 연속으로 표현됩니다. 또한, 데이터 값에 따라 메모리에 저장된 값이 다르게 해석될 수 있음에 주의해야 합니다. 예를 들어 0100 0001이라는 값이 메모리에 저장되어 있을 때, 데이터 타입이 숫자인 경우에는 65, 문자인 경우에는 'A'으로 해석됩니다.

 

 앞서 변수는 하나의 데이터를 저장하기 위하여 확보한 메모리 공간 자체 또는 메모리 공간에 붙인 이름이라고 하였는데 이때의 데이터가 값이 됩니다. 즉, 값은 변수에 할당되는 것이라고 볼 수 있습니다.

 

var score = 10 + 20;

 

 위 예제에서 score 변수에 할당되는 것은 표현식 10 + 20가 아닌 해당 식이 평가된 결과인 30입니다. 즉, 변수가 기억하는 메모리 공간에 저장되는 것은 '값'이라는 것을 알 수 있습니다.

 

 이러한 값은 위 예제처럼 식으로 생성할 수도 있지만 가장 기본적으로 리터럴을 사용하여 만들 수 있습니다.

 

5.2 리터럴

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

3
'Hello'

위 예제는 단순히 3이라는 아라비아 숫자와 'Hello'라는 문자열이 아니라 각각 숫자 리터럴, 문자열 리터럴입니다.

 

사람이 이해할 수 있는 문자(이 경우에는 아라비아 숫자) 또는 약속된 기호(이 경우에는 ''로 감싸는 것)를 통하여 값을 생성한 예시이며 이처럼 자바스크립트 엔진은 리터럴을 평가하여 값을 생성합니다.

 

자바스크립트에서는 아래와 같은 리터럴을 가지고 있으며 값을 생성하기 위하여 미리 약속한 표기법 정도로 볼 수 있습니다.

리터럴 종류	예시
정수	100
부동소수점	10.5
2진수	0b01000001
8진수	0o101
16진수	0x41
문자열	'hello' "world"
불리언	true false
null	null
undefined	undefined
객체	{ name: 'Choi', address: 'Seoul' }
배열	[ 1, 2, 3 ]
함수	function() { }
정규 표현식	/[A-Z]+/g

5.3 표현식

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

 

바로 위에서 살펴본 리터럴 역시 값으로 평가된다고 하였으므로 표현식에 포함된다고 할 수 있습니다.

 

var score = 100;

위 예제에서의 100은 리터럴이며 값으로 평가되기 때문에 리터럴 100은 그 자체로 표현식입니다.

 

var score = 50 + 50;

50 + 50은 리터럴과 연산자로 이루어져 있습니다. 50 + 50 도 평가되어 100이라는 값을 생성하므로 표현식이라고 할 수 있습니다.

 

score;

변수 식별자를 참조하면 변수 값으로 평가됩니다. 식별자 참조의 경우 값을 생성하지 않지만 값으로 평가되기 때문에 표현식이라고 할 수 있습니다.

 

위 예시처럼 표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이루어질 수 있습니다.

 

우리는 표현식은 값으로 평가된다는 사실을 통하여 표현식, 그리고 표현식으로 평가된 값은 동치라는 것을 알 수 있습니다.

예를 들어 100 = 50 + 50에서 100과 50 + 50은 동치입니다. 이는 50 + 50 과 같은 표현식을 100이라는 값과 동일하게 사용할 수 있으며 JS 문법에서 값이 위치할 수 있는 자리에는 표현식이 위치할 수 있음을 반증한다고 볼 수 있습니다.

 

5.4 문

 문은 프로그램을 구성하는 기본 단위이자 실행 단위를 의미합니다. 문의 집합으로 이루어진 것이 곧 프로그램이며 문을 작성하고 순서대로 나열하는 것이 프로그래밍이라고 볼 수 있습니다.

 

 이러한 문은 여러 토큰으로 구성됩니다. 토큰은 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 atomic한 코드의 기본 요소, 최소 단위입니다.

 

 토큰의 예시로는 키워드, 식별자, 연산자, 리터럴, 세미콜론이나 마침표 등의 문법적 의미를 갖는 특수 기호가 있습니다.

 

문은 명령문이라고도 불립니다. 문은 컴퓨터에게 내리는 명령으로 문이 실행되면 명령이 실행되고 어떠한 일이 발생하게 됩니다. 문은 크게 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있습니다.

 

// 변수 선언문
var x = 3;

// 할당문
x = 5;

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

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

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

 

 

5.5 세미콜론과 세미콜론 자동 삽입 기능

 세미콜론(;)은 문의 종료를 나타냅니다. 즉, JS 엔진은 세미콜론을 통하여 문이 종료된 위치를 파악하고 순차적으로 하나씩 문을 실행합니다. 단, 0개 이상의 문을 중괄호로 묶은 코드 블록 뒤에는 따로 세미콜론을 붙이지 않습니다(if문, for문, 함수 등의 코드 블록 뒤에는 붙이지 않는다는 말과 같습니다). 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖고 있기 때문에 세미콜론을 붙이지 않습니다.

 

 그렇다면 세미콜론은 필수로 작성해야 할까요? 그렇지 않습니다. 자바스크립트 엔진에는 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에서 세미콜론을 자동으로 붙여주는 ASI(세미콜론 자동 삽입) 기능이 암묵적으로 수행되기 때문입니다.

 

 하지만 ASI의 동작이 개발자의 예측과 일치하지 않는 경우가 종종 있어 여러 문제가 발생하기 때문에 세미콜론 사용이 권장되고 있습니다.

 

5.6 표현식인 문과 표현식이 아닌 문

// 변수 선언문은 값으로 평가될 수 없기 때문에 표현식이 아니다.
var x;

// 1, 2, 1 + 2, x = 1 + 2는 모두 값으로 평가될 수 있는 표현식이다
// x = 1 + 2는 표현식이면서 완전한 문이기도 하다.
x = 1 + 2;

 

표현식은 문과 비슷하기 때문에 구별하기 어렵게 느껴질 수 있습니다. 하지만 표현식과 문을 구별하는 방법은 의외로 간단합니다.

 

문에는 표현식인 문과 표현식이 아닌 문이 있습니다. 표현식인 문은 값으로 평가될 수 있으며 표현식이 아닌 문은 값으로 평가될 수 없습니다. 예를 들어 변수 선언문은 값으로 평가될 수 없으므로 표현식인 아닌 문, 할당문은 값으로 표현될 수 있기 때문에 표현식인 문에 해당합니다.

 

 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단한 방법은 변수에 할당해 보는 것입니다. 변수에는 '값'을 할당할 수 있기 때문에 변수에 할당이 되는 문은 표현식인 문으로 볼 수 있으며 에러가 발생하는 경우는 표현식이 아닌 문으로 볼 수 있습니다.