자바스크립트 딥 다이브 스터디 5장 - 표현식과 문

개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다.

이번 장에서는 앞으로 자주 사용할 용어의 의미를 주의 깊게 살펴보자.

---

처음 살펴볼 내용은 값 value 이다. 

 

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

평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.

10 + 20 //30

위의 식은 평가되어 30이라는 결과값을 생성한다. 

 

모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있는데 이는 6장에서 살펴보자.

 

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체 또는 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 변수에 할당되는 것은 값이다.

var sum = 10 + 20

sum이라는 변수에는 10 + 20이 아니라 10 + 20이 평가된 결과인 숫자 30이 할당된다. 변수 sum이 기억하는 메모리 공간에 저장된 것은 값 30이다. 따라서 10 + 20은 할당 이전에 평가되어 값을 생성해야 한다. 

 

값은 다양한 방법으로 생성될 수 있다. 그 중 가장 기본적인 방법은 리터럴을 사용하는 것이다.

---

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

 

3

3은 단순한 아라비아 숫자가 아니라 숫자 리터럴이다.

숫자 리터럴 3을 코드에 기술하면 자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성한다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다. 

 

리터럴을 사용하면 정수, 2진수, 문자열, 불리언, 객체, 배열 등등 다양한 종류 data type의 값을 생성할 수 있다.

---

다음은 표현식이다. 

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

앞에서 살펴본 리터럴은 값으로 평가되므로 리터럴은 표현식이다.

var score = 100

var score = 50 + 50

score

첫번째 줄에서 100은 숫자 리터럴이고 자바스크립트 엔진에 의해 100이라는 값으로 평가되므로 표현식이다.

두번째 줄에서 50 + 50은 리터럴과 연산자로 이루어져있으나 자바스크립트 엔진이 평가하면 숫자 값 100을 생성하므로 표현식이다.

세번째 줄에서 score 변수를 참조하면 100이라는 값으로 평가된다. 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

 

값으로 평가될 수 있는 문은 모두 표현식이다.

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

sum, person.name, arr[1] // (선언되있다는 가정하에) 식별자 표현식

10 + 20 // 산술 연산자
sum = 20 // 할당 연산자
sum!== 10 // 비교 연산자
// 연산자 표현식 

square()
person.getName() 
// (선언되있다는 가정하에) 함수/메서드 호출 표현식

---

다음은 문 statement 에 대해 알아보자. 

"문"과 "표현식"이라는 용어가 자주 등장할 텐데 문과 표현식을 구별하고 해석할 수 있다면 자바스크립트 엔진의 입장에서 코드를 읽을 수 있고 실행 결과를 예측하는 데 도움이 된다. 이는 버그를 줄이고 코드의 품질을 높이는 데도 기여하니 문과 표현식은 확실히 이해할 필요가 있다. 

 

문 statement 는 프로그램을 구성하는 기본 단위, 최소 실행 단위이다. 문의 집합으로 이뤄진것이 프로그램이다. 문은 여러 토큰으로 구성된다. 토큰 token이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본요소를 의미한다. 국어 공부할 때 형태소의 개념과 똑같다고 볼 수 있다. 

var sum = 1 + 2;

var은 변수를 선언하는 키워드, sum은 변수명, =은 할당 연산자, 1과 2은 피연산자, +는 산술 연산자, 세미콜론은 문장의 끝을 알려주므로 위의 코드는 총 7개의 토큰으로 구성되어있는 것이다.

 

문은 명령문이라고 부르기도 하는데 문이 컴퓨터에 내리는 명령이기 대문이다. 문이 실행되면 어떤 명령이 실행되고 무슨 일이 일어나게 된다. 

문에는 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있으나 자세한 예시와 사용법은 뒤에 나오는 챕터에서 배워보자.

---

자바스크립트에서 세미콜론은 문의 종료를 나타낸다.

하지만 세미콜론은 옵션이다. 생략 가능하다.

자바스크르비트 엔진이 소스 코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능 (ASI automatic semicolon insertion)이 암묵적으로 수행된다. 하지만 이 기능의 동작이 개발자의 예측과 일치하지 않는 경우가 있다.

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

console.log(foo()) // undefined

세미콜론을 붙여야하나 안붙여야하나 갑론을박이 있으나 그냥 디폴트로 붙히는 걸로 하자.

---

다음은 표현식인 문과 표현식이 아닌 문을 살펴보자.

 

표현식의 정의는 값으로 평가될 수 있는 문이다. 그러면 문 중에서 값으로 평가되지 않는 문도 있을까?

 

var x

x = 1 + 2

첫번째 줄은 변수 선언문이다. 변수 선언문은 값으로 평가될 수 있을까? 아니다. 그러므로 표현식이 아니다.

두번째 줄은 어떨까. 1 + 2라는 계산을 통해 3이라는 값이 할당된다. 즉 값으로 평가가 가능하므로 이는 표현식이다.

 

표현식인지 아닌지는 값으로 평가가 되는지 안되는지만 구별하면 된다. 

 

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

할당문을 값처럼 변수에 할당을 했다. x=100으몰 x는 100이라는 값으로 평가되고 이는 foo 변수에 할당된다. 

 

추상적으로 봤을 때 여전히 헷갈릴 수 있다.

가장 확실한 방법으로는 변수에 할당해보면 된다.

첫번째 줄에서 100이라는 값은 표현식이다. 너무 당연하다.

두번째 줄에서 if를 활용한 조건문이 있다. 이 문을 변수에 할당하니 Unexpected token이라고 출력되었다. 값으로 평가될 수 없으므로 조건문은 표현식이 아닌 문이다.

세번째 줄에서 할당문을 값처럼 할당했는데 y값을 참조하여 100이라는 값을 x에 할당하기 때문에 값을 평가할 수 있다. 그래서 표현식이다.

네번째 줄에서 while 반복문이 있다. 이 문을 값에 할당하니 두번째 줄과 마찬가지로 Unexpected token이라고 출력되었다. 반복문 역시 값으로 평가될 수 없으므로 변수에 할당되지 못하고 자바스크립트 엔진이 에러를 내뱉는 것이다.