모던 JS Deep dive #05 | 표현식과 문

📌 ¹값

값은 식(²표현식)이 평가되어 생성된 결과이다. 변수는 “하나의 값을 저장하기 위해 확보된 메모리 공간이며 그 메모리 공간을 식별하기 위해 붙인 이름”이라고 했다. 따라서 변수에 할당되는 것은 값이다.

var sum = 10 + 20;

위의 코드에서, 변수에 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.

📌 리터럴

리터럴은 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 ¹값을 생성하는 표기법이다. (ex. 정수 리터럴, 문자열 리터럴, undefined, null, 객체 리터럴, 배열 리터럴, 함수 리터럴, 정규 표현식 리터럴, …)

변수에 쉽게 ¹값을 할당할 수 있고 따라서 리터럴도 ²표현식의 일종이다.

📌 ²표현식

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

var score = 50 + 50;
scroe; //변수 식별자 참조

이렇게 변수 식별자를 참조하면 값으로 평가되는데 이는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

=> 즉 표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이루어질 수 있고, ¹값으로 평가될 수 있는 ²문은 모두 표현식이다.

📌 ³문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. [선언문, 할당문, 조건문, 반복문] 등으로 구분할 수 있다.

var x; //변수 선언문

x = 5; //할당문

function foo () { 코드 작성 } //함수 선언문

if (x > 1) { 코드 실행 } //조건문

for (var i = 0; i < 2; i++) { 코드 실행 } //반복문

+) 문은 여러 토큰으로 구성된다. 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론이나 미침표

📌 표현식인 문 vs 표현식이 아닌 문

표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있다.

하지만 var x;에서 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니고(단 x 자체는 표현식임), x = 1 + 2;는 표현식이면서 완전한 문이기도 하다. (1, 2, 1+2, x=1+2 모두 표현식)

간단한 구분 방법은 변수에 할당해 보는 것이다.

var foo = var x; //SyntaxError: Unexpected token var

위 처럼 표현식이 아닌 문은 값처럼 사용이 안된다.

📌 세미콜론 자동삽입

세미콜론은 문의 종료를 나타내는데, 이 자동 삽입기능(ASI)만 믿고 세미콜론을 안붙이면 개발자의 의도와 다른 결과가 나오기도 한다.

function foo {
  return
  	{}
  // ASI의 동작 결과 => return; {};
  // 개발자의 예측 => return {};
}

var bar = function () {}
(function() {})();
//ASI의 동작 결과 => var bar = function() {}(function() {})();
//개발자의 예측 => var bar = function () {}; (function() {})();