자바스크립트 값, 표현식, 구문, 리터럴 의미 설명

자바스크립트를 처음 공부하는 입장에서 가장 난감한 것 중 하나가 용어의 의미를 제대로 이해하기 어렵다는 것이었다. 그 중에서도 한글로 읽으면 어떤 의미인지 알 거 같으나, 정작 프로그래밍 용어로는 정의하기 어려운 용어들이 바로 '값, 표현식, 구문, 리터럴'이었다. 이번 포스팅에서는 해당 용어들을 정리해보려고 한다. (각 용어의 개념 정의는 위키북스 <모던 자바스크립트>를 참고했다.)

값이란?

값은 표현식의 결과이다. 최대한 쉽게 적어보려 했지만, 개인적으로 상당히 난감한 정의라 생각한다. 표현식의 의미를 아직 모르는 데, 표현식의 결과라는 문장을 어떻게 이해해볼 수 있을까? 우선, 여기서는 다음 예제를 보고 의미를 직관적으로 이해해 보는 것이 좋을 것 같다. 다음이 값이다.

1
30 + 10

표현식이란?

이제 표현식에 대해 알아볼 차례다. 표현식을 이해하면 값을 보다 잘 이해할 수 있다. 표현식이란 값을 산출하는 구문이다. 다음은 표현식의 예시다.

1;
30 + 10;
'Hello';
plus(); // 함수가 이미 선언되어 있다고 가정

언뜻보면 값과 다를 게 없어 보인다. 표현식과 값의 차이를 이해하려면 값이 메모리에 할당되는 과정을 이해해야 한다. 값은 표현식을 '실행'한 결과이며, 이러한 실행을 거치고 난 값이 특정 메모리에 할당된다. 즉, 1;은 우리가 보기에는 그냥 숫자 1에 불과할 수 있지만, 자바스크립트에게는 숫자 리터럴을 통해 작성된 표현식을 자바스크립트 엔진에 실행 후 값을 출력하도록 하는 것이다.

리터럴이란?

그렇다면 리터럴이란 무엇일까? 리터럴은 값을 표기하는 약속된 기호, 문자, 방법이다. 프로그래밍이 기계어를 사용해 컴퓨터와 커뮤니케이션이라는 방법이라는 점을 고려할 때, 리터럴은 다음과 같이 커뮤니케이션의 방식을 특정하는 일종의 방법이다. 즉, 사람이 이해할 수 있는 문자 또는 사전 정의된 기호를 사용해 값을 생성하는 방법이 리터럴이다.

1; // 정수 리터럴
'Hello'; // 문자열 리터럴
[ 1, 2, 3 ]; // 배열 리터럴
{ age: 31 }; // 객체 리터럴
function() {} // 함수 리터럴

구문이란?

마지막으로 구문을 알아볼 차례다. 구문은 프로그램을 구성하는 기본 단위를 의미한다. 즉, 구문이란 리터럴을 사용해 표현식을 작성하고 값을 처리하기도 하는 명령문을 의미한다.

var greeting = "Hello"; // 변수 선언문
function foo () {}; // 함수 선언문
if (x = 5) { console.log(x); } // 조건문
for (var i = 0; i < 10; i++) { console.log(i); } // 반복분

마치며

이상을 정리해보자면, 값이란 표현식의 결과이며, 표현식이란 값을 산출하는 구문이다. 리터럴은 값을 표기하는 일종의 규칙이며, 구문은 자바스크립트에 내리는 명령이다.