표현식과 문

값

10+20; // 30

10 + 20은 평가(evaluate)되어 숫자 값 30을 생성한다. 변수에는 10 + 20이 아닌 생성된 결과 값인 30이 들어간다.
값이란 식이 평가되어 생성된 결과

리터럴

3

숫자 리터럴 3이며 JS Engine은 이를 평가해 숫자 값 3을 생성
리터럴 또한 값이다.

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

표현식

표현식은 값으로 평가될 수 있는 문
표현식이 평가되려면 새로운 값을 참조하거나 기존 값을 참조해야한다.

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

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

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

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다.

문 (statement)

프로그램을 구성하는 기본 단위이자 최소 실행 단위
문의 집합 -> 프로그램
문을 작성하고 순서에 맞게 나열 -> 프로그래밍

문(명령문)의 종류

1. 선언문
2. 할당문
3. 조건문
4. 반복문

// 변수 선언문
var x;

// 할당문
x = 5;

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

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

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

세미 콜론과 세미콜론 자동 삽입 기능

세미 콜론

문의 종료
JS Engine은 세미 콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.
단, 중괄호로 된 코드 블록 {...} 뒤에는 세미콜론을 붙이지 않는다.(코드 블록의 자체 종결성)

ASI

Automatic semicolon insertion
세미콜론은 옵션이다. 생략 가능하다.
JS Engine이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 부텽주는 ASI이 암묵적으로 수행된다.
하지만 이 수행이 잘못되는 경우가 있다!

function foo() {
  return
  {
  }
}

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

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

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

// TypeError: (intermediate value)(...) is not a function

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

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

x = 1 + 2; // 표현식이면서 완전한 문 (표현식인 문)

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

var foo = var x; // SyntaxError 표현식이 아닌 문

var foo = x = 100; //표현식

참고 - https://velog.io/@jiseung/%ED%91%9C%ED%98%84%EC%8B%9D%EA%B3%BC-%EB%AC%B8