[JS Deep하게 공부하기] - 식과 문

식과 문이란?

자바스크립트에서는 "식"과 "문"이라는 개념이 존재합니다.

 

해당 개념이 왜 중요한지 모르는 경우가 대부분입니다, 하지만 식과 문은 자바스크립트를 이해하는데 아주 중요한 요소 중 하나입니다.

 

자바스크립트 엔진은 코드를 실행할때 식과 문을 구별해서 연산을 처리합니다.

 

즉, 식과 문만 정확하게 이해한다면 자바스크립트 엔진이 식과 문을 어떻게 구별하는지, 어떻게 처리하는지 대략적으로라도 이해할 수 있습니다.

값

값이란 표현식이 평가되어 생성된 결과를 말합니다, 평가란 쉽게 말해서 식을 해석해서 값을 참조 또는 생성하는 것을 말합니다.

10 + 20 // 30

위의 코드에서는 10 + 20 이라는 식을 평가해서 30이라는 "값"을 생성합니다.

 

아래의 코드를 확인해보겠습니다.

var result = 10 + 20; // 30

위 result 변수에 할당되는 것(직접적으로 메모리에 저장되는것)은 "10 + 20"일까요, 아니면 식이 평가되어 생성된 "30"이라는 값일까요?

 

정답은 result 변수에는 30이라는 값이 할당됩니다, 변수를 설명하였을때 얘기를 하였지만 변수란 하나의 값을 저장하기 위해 붙여진 별명과 같은 것 입니다.

 

즉, 변수에는 항상 식이 아닌 값이 할당됩니다.

 

정확하게 말하자면 식이 평가되어 생성된 값이 할당되는 것입니다.

var result2 = 10 + 10; // 20

그렇다면 이제 result2에 할당되는 것이 10 + 10인지 20이라는 값인지 알 수 있습니다.

 

위에서 언급한 것을 바탕으로 result2 변수에 할당되는 것은 20이라는 값입니다.

리터럴

리터럴이라는 말은 자바스크립트를 처음 배우는 초보자분들에게는 생소한 단어입니다.

 

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

 

많은 자바스크립트를 설명하는 블로그 또는 공식 문서에서 "숫자 리터럴", "문자 리터럴", "객체 리터럴" 등의 말을 많이 들어보셨을건데, 위의 정의대로 이해하면 숫자 표기법, 문자 표기법, 객체 표기법 과 같이 사용법을 이야기 할때 리터럴이란 말을 사용합니다.

 

1

위의 1이라는 숫자는 아라비아 숫자 1입니다, 자바스크립트 엔진은 아라비아 숫자 1을 숫자(정수) 리터럴로 인식하여 런타임 시점에 숫자 값 1을 생성합니다.

 

이와 같이 리터럴이란 사람이 이해할 수 있는 문자나 기호들을 뜻합니다.

 

이런 리터럴들은 자바스크립트 엔진이 "런타임" 시점에 리터럴들을 평가하여 값을 생성합니다.

자바스크립트에는 수많은 리터럴이 존재합니다, ([], {}, 100, 1.1,  "", '', (), /, *, 등등 모두 리터럴입니다.)

 

100 // 정수 리터럴

1.1 // 부동소수점 리터럴

[] // 배열 리터럴

{} // 객체 리터럴

"" // 문자열 리터럴

function() {} // 함수 

true // 불리언 리터럴

... etc

위에 언급한 리터럴 외에도 자바스크립트 상에는 수많은 리터럴이 존재합니다.

 

자바스크립트 엔진은 이와 같은 리터럴들을 평가해 런타임 시점에 값을 생성합니다.

표현식

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

 

var a = 100;

위에서 100이라는 숫자은 평가되어 100이라는 값을 생성합니다, 즉, 위의 숫자 100은 표현식입니다.

 

이와 같이 새로운 값을 생성하거나 기존 값들을 참조하는 역할을 하는 것들은 모두 표현식입니다, 즉 리터럴도 값을 생성하는 것이기 때문에 모든 리터럴은 표현식에 해당됩니다.

 

var result = 10 + 20;

위의 코드도 10 + 20은 평가되어 30이라는 값을 생성하기 때문에 10 + 20은 표현식입니다.

 

result; // 30

위와 같이 기존에 선언되어 있는 변수 값을 참조하는 것도 결국 기존의 값을 참조하는 것이기 때문에 표현식에 해당됩니다.

 

즉, 정리해보면 새로운 값을 생성하거나 기존의 값을 참조하는 것들은 모두 표현식에 해당됩니다.

 

10

1.1

object
object.name

[1, 2, 3, 5, 6]

{"name": "test"}

위와 같은 코드는 새로운 값을 생성하거나 기존 값을 참조하는 역할이기 때문에 표현식이며, 이들은 자바스크립트 엔진이 실행될때 값으로 생성합니다, (표현식은 값으로 평가됩니다.)

 

이때 표현식과 표현식이 평가된 값은 모두 동일한(동등한) 값인 동치입니다.

 

문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있습니다.

console.log(100);

console.log(10 + 20);

console.log 함수 인수로는 값이 위치 할 수 있기 때문에 표현식도 위치할 수 있습니다.

 

var x = 10;

console.log(x + 10); // 20

위의 코드에서 변수 x는 기존의 값을 참조하는 것이기 때문에 표현식이고 여기서 10을 새롭게 더하는 것이기 때문에 이것 역시 표현식입니다.

 

위의 코드들이 모두 당연하다고 생각될 수 있지만 자바스크립트 엔진의 입장으로 생각해보면 어떻게 표현식을 처리하고 어떨때에 값을 생성하는지 알 수 있기 때문에 대략적으로 자바스트립트의 동작 원리를 알아 볼 수 있습니다.

문

문은 2가지 종류로 나뉘어집니다. 값으로 평가될 수 있는 문과 값으로 평가될 수 없는 문으로 나뉩니다.

 

여기서 문이란 프로그램을 구성하는 기본 단위이자 최소 실행단위입니다.

 

문이 집합하여 있으면 프로그램이고 이를 설계하고 순서에 맞도록 배치하는 것이 프로그래밍이라고 할 수 있습니다.

 

하나의 문은 여러 token 이라는 것으로 구성되는데, token이란 문법적인 의미를 가지고 문법적으로 더 이상 나누어 지지 않는 기본 요소를 의미하는 것입니다.

 

예를 들어 1이라는 숫자는 문법적으로 더이상 나누어질 수 없는 기본 요소이기 때문에 이 역시 토큰입니다.

 

키워드, 식별자, 연산자, 리터럴, 세미콜론 등은 문법적으로 더이상 나눌 수 없는 기본 요소이기 때문에 모두 토큰이라고 할 수 있습니다.

 

또한 문은 프로그램한테 내리는 명령어와 같은 역할입니다, 그래서 조건문, 선언문, 반복문, 함수선언문 등 문은 프로그램에 내리는 명령문이라고 알 수 있습니다.

 

var a = 10; // 변수 선언문

if (a < 3) {
 console.log(a)
} // 조건문

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

function test() {
 console.log("hello world");
} // 함수 선언문

 

즉, 위와 같은 문을 사용하게 되면 컴퓨터에 명령을 내려서 무언가가 동작되게 됩니다.

 

맨위에서 언급하였듯이 문은 표현식인 문과 표현식이 아닌 문이 존재합니다.

 

표현식인 문은 값으로 평가될 수 있는 문이고 표현식이 아닌 문은 값으로 평가될 수 없는 문입니다.

var a = 10;

a + 40;

 위에서 맨 위의 변수 선언문은 표현식이 아닌 문입니다.

 

맨 위의 변수 선언문은 10이라는 값을 a 변수에 새롭게 할당합니다, 여기서 10이라는 값을 새롭게 생성했으니 변수 선언문은 표현식인 문이라고 생각할 수도 있지만 변수 선언문은 새롭게 변수를 정의하고 값을 할당하는 "명령"이기 때문에 표현식인 문이 아닙니다.

 

하지만 아래의 문은 표현식인 문입니다, 기존의 a 변수의 값을 참조하는 것이기 때문에 a 변수는 값입니다, 여기서 더하기 40을 하여 50이라는 새로운 값을 생성하기 때문에 표현식인 문입니다. (새로운 값을 생성하거나 기존의 값을 참조하는 역할의 문이라면 표현식인 문입니다)

 

아래의 문이 표현식이긴 하지만 문이라고는 생각이 안될 수 있습니다, a + 40을 함으로 컴퓨터에 a 라는 변수의 값과 + 40 을하라는 "명령"을 내리기 때문에 문이 맞습니다, 또한 " a , + , 40 , ; " 라는 4개의 토큰으로 구성되어 있기 때문에 문이라고 할 수 있습니다.

 

표현식인 문과 표현식이 아닌 문을 구별하기는 위의 코드처럼 쉽지 않습니다.

 

이를 구별하기 위한 가장 좋은 방법은 값이 위치할 수 있는 자리에 문을 넣어 보는 것 입니다.

var a = 10;

console.log(var b = 10); // Error

console.log(a = 10); // 10

console.log(a + 40); // 50

console.log 함수의 인수로는 값만 위치할 수 있습니다, 여기에 위와 같이 변수 선언 문을 넣어보게 되면 문법에러가 발생하면서 동작하지 않습니다, 즉 변수 선언문은 표현식이 아닌 문이라고 할 수 있습니다.

 

하지만 나머지 a = 10, a + 40과 같은 문을 넣어봤을때는 오류가 발생하지 않고 정상적으로 코드가 동작하고 값이 출력됩니다, 이를 통해서 변수를 재할당하거나 기존의 변수에 새로운 값을 더하는 것은 모두 표현식인 문이라고 알 수 있습니다.

 

즉, 이렇게 오류를 이용해서 표현식인 문과 표현식이 아닌 문을 구별할 수 있습니다.

식과 문을 알아야 하는 이유

위의 코드가 당연하다고 생각되는 경우가 대다수 일거라고 생각됩니다.

 

하지만 식과 문을 제대로 알고 가지 못한다면 자바스크립트의 정확한 동작 원리를 절대로 이해할 수 없습니다.

 

자바스크립트는 모든 코드를 위와 같이 식과 문으로 나누어서 해석하고 연산을 수행하기 때문입니다.

 

즉, 이와 같이 식과 문을 제대로 알아놓게 되면 자바스크립트에서 생성하는 값을 예측할 수 있고 해당 코드가 오류를 범하는 코드인지 정상적인 코드인지 역시 쉽게 구별할 수 있습니다.

 

또한 이런 개념들을 알고 있으면 나중에 자바스크립트 상에서 발생할 수 있는 버그들도 찾을 수 있을 확률이 높아집니다. (자바스크립트의 동작 원리를 이해하고 있기 때문에 어디 부분에서 허점이 발생하는지, 왜 발생하는지를 수월하게 찾고 자바스크립트 엔진의 입장에서 코드를 해석할 수 있게 됩니다.)