해당 게시물은 "모던자바스크립트 Deep Dive(위키북스)" 저서를 참고 및 인용 하였음을 알려드립니다.

🔎  표현식과 문

🔖  1.  값

• 값(value)은 표현식이 평가되어 생성된 결과
• 평가(evaluate)란 표현식을 해석하여 값을 생성하거나 참조하는 것을 의미

// 10 + 20은 평가되어 숫자 값 30을 생성한다.
10 + 20; // 30

// 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.
var sum = 10 + 20;

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

🔖  2.  리터럴

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

• 자바스크립트 엔진은 코드가 런타임에 리터럴을 평가해 값을 생성한다.

🔖  3.  표현식과 문

📌  표현식과 문의 정의

• 표현식(expression)은 값으로 평가될 수 있는 문이다.

• 문(statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위
  ex) 변수 선언문, 할당문, 함수 선언문, 조건문, 반복문...

• 문은 여러개의 토큰으로 구성된다

• 토큰이란 문법적으로 더 이상 나눌 수 없는 코드의 기본요소

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

• 표현식인 문은 값으로 평가될 수 있는 문이며, 표현식이 아닌 문은 값으로 평가될 수 없는 문이다.

• 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

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

// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // SyntaxError: Unexpected token var

// 할당문은 그 자체가 표현식이지만 완전한 문이기도 하다. 즉, 할당문은 표현식인 문이다.
x = 100;

//표현식인 문은 값처럼 사용할 수 있다.
var foo = x = 100;
console.log(foo); // 100

🔖  4.  세미콜론 자동 삽인 기능

• 세미콜론(;)은 문의 종료를 나타낸다.

• 자스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.

• 단, 0개 이상의 문을 중괄호로 묶은 코드 블럭({...}) 뒤에는 세미콜론을 붙이지 않는다. 이러한 코드 블록은 언제나 문의 종류를 의미하는 "자체 종결성"을 갖기 때문인다.

• 문의 끝에 붙이는 세미콜론은 옵션이다. 즉, 세미콜론은 "생략 가능"한다.

• 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽인 기능(ASI)이 작동한다.

• ASI의 동작과 개발자의 예측이 일치하지 않는 경우도 간혹 있다.😱

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

console. log(foo()); // undefined

var bar = function () {}
(function() {})();
// ASI의 동작 결과 => var bar = frunction () {}(function() {})();
// 개발자의 예측   => var bar = frunction () {}; (function() {})();
// TypeError: (intermediate value)(...) is not a funtion