[Deep Dive] 표현식과 문

---

5-1. 값

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

표현식이 평가된다? 표현이 생소하다. 우선 평가가 된다는 표현으로 보아 누군가에 의해 행해짐을 알 수 있고, 그로 인한 결과물을 값이라 표현하는 것으로 해석할 수 있겠다. 표현식은 무엇인가? 식이라 하면 수학시간에 배웠단 연산식이 예시로 떠오른다. 그렇다면 연산식이 누군가에 의해 평가 되어 해석된 결과를 값이라고 판단한다면, 이를 자바스크립트에 적용해보면 될듯 싶다.

10 + 20; // 30

 10 + 20 이라는 표현식(소스코드) 를 자바스크립트가 평가 하여 그 결과인 30을 생성한다. 이때 30이 값이다.

 

모든 값은 데이터 타입을 가지며, 메모리에 2진수 비트의 나열로 저장된다. 뭐 01000001 이런 식이다. (8비트니 8자리).

이는 데이터 타입에 따라 다르게 해석된다. 숫자는 65, 문자는 A 다. 

 

변수는 하나의 값을 저장하기 위해 확보된 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이니, 변수에는 값이 할당이 된다. 즉, 값 30이 메모리 공간에 할당이 된다. 

---

5-2. 리터럴

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

예제를 보면

// 숫자 리터럴 3
3

사람이 이해할 수 있는 아라비아 숫자를 사용해 숫자 리터럴 3을 코드에 기술하면 자바스크립트 엔진은 이를 평가해 숫자 3을 생성한다. 앞서 계산식 역시 아라비아 숫자와 및 미리 약속된 기호 '+' 를(표현식) 평가하여 그 결과물을 값으로 엔진이 할당한 것이다. 

자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 다시 정리하자면,

리터럴은 값을 생성하기 위해 미리 약속된 표기법이다. 이러한 표기법에 따라 다양한 종류의 값을 생성할 수 있다.

리터럴에는 기본적으로 아라비아 숫자가 있을 수 있고, 계산기호, 문자열, 불리언, 객체, 배열, 함수 등등이 있다. 사람역시 알아볼 수 있는 이러한 기입형태를 자바스크립트가 평가하여 그에 맞는 결과값을 생성하게 된다.

---

5-3. 표현식

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

앞서서 표현식을 평가하여 값을 생성한다고 하였으니, 리터럴 역시 표현식이라 할 수 있다. 그런데 리터럴만 표현식인가? 표현식의 정의로서 보자면 평가되어 값을 생성한다고 정의한다. 그러니깐 자바스크립트에 의해 평가되어 값을 생성한다면 모두 표현식이다. 달리 말하자면 값으로 평가될 수 있는 문은 모두 표현식이다.

// 리터럴 표현식
10
'hello'

//식별자 표현식(선언이 되었다 가정)
sum
person.name
arr[1]

//연산자 표현식
10 + 20
sum = 10
sum !== 10

//함수/메서드 호출 표현식(선언이 되었다 가정)
square()
person.getName()

리터럴, 식별자, 연산자, 함수 등 모두 값으로 평가되는 문이기에 표현식이다. 여기서 특이점은 표현식과 표현식으로 평가된 값은 동치다.

즉, 1 + 2 = 3 에서 1 +2 와 3은 동치다. 이렇다면 표현식 1 + 2 역시 값처럼 사용이 될 수 있다는 점이고, 값이 위치할 자리에 표현식이 와도 관계가 없다는 의미가 된다.

var x = 1 + 2;

// 식별자 표현식 x 는 3으로 평가된다.
x + 3; // 6

우리가 아무렇지 않게 당연하게 받아들였던 계산방법에도 표현식이라는 의미가 숨어있었다.

---

5-4. 문

문(Statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.

문은 여러 토큰으로 이루어진다. 

여기서 토큰(Token) 이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. 예를 들어 식별자, 연산자, 리터럴, 세미클론이나 마침표 등의 특수 기호는 문법적인 의미를 가지며, 더이상 나눌 수 없는 코드의 기본 요소이기에 모두 토큰이다. 

 

문의 구성에 대해서는 알겠지만, 문이 하는 역할에 대해서 좀 햇갈릴텐데 정의대로라면 프로그램의 최소 실행 단위라고 표현을 하고 있다. 무엇인가를 실행한다는 의미일텐데, 어찌보면 명령을 내린다고 봐도 될 듯 싶다. 명령문이라 생각하니... 코드를 작성하다 많이 들은 단어들이 떠오르지 않는가

 

선언문, 할당문, 조건문, 반복문 등 이러한 표현에는 모두 문이 들어가있다. 모두 명령을 내리고 그에 따라 어떠한 일이 발생한다.

// 변수 선언문
var x;

//할당문
x = 5;

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

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

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

컴퓨터에게 명령을 내린다는것은 결국 사전에 약속이 되어있는 부분이라 할 수 있겠다. 이라한 양식의 문을 사용해서 명령을 내리면 우리가 기대하는 행동을 컴퓨터가 하게 되니 말이다. 

---

5-5. 세미클론

세미클론(;) 은 문의 종료를 나타낸다. 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다. 그래서 뒤에는 세미클론을 붙어야하는데, 코드 블록들은 자체 종결성을 가지기 때문에 붙이지 않아도 된다. 

---

5-6. 표현식인 문과 표현식이 아닌 문

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

// 1, 2, 1 + 2, x = 1 + 2 모두 표현식이다.
// x = 1 + 2 는 표현식이면서도 완전한 문이기도 하다.

구별을 하기 어려워 보이지만, 의외로 구별하는 방법은 간단하다. 앞서 표현식은 값을 평가한다고 하였다. 예를 들어 변수 선언문은(위 var x;) 값으로 평가되지 않기에 표현식이 아니다. 하지만 할당문은 값으로 평가될 수 있기에 표현식인 문이다.

 

좀 더 쉽게 판단하는 방법으로는 아리까리한 문을 변수에 할당을 해보는 것이다.

var foo = var x;
// 당연히 에러가 발생한다. Unexpected token var

x = 100;
// 이것은 값으로 평가되기에 표현식이다. 그러니깐

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

위처럼 변수자리에 넣어보면 쉽게 판단할 수 있다. 참고로 완료값이라는 개념이 있는데, 개발자도구에서 표현식이 아닌 문을 실행을 하면 언제나 undefined 를 출력한다. 이를 완료값이라고 한다. 변수에 할당할수도 참조할 수도 없다. 반면 표현식인 문을 실행하면 언제나 평가된 값을 반환한다.