[JS] 모던 자바스크립트 Deep Dive - 05. 표현식과 문

값 (Value)

표현식(expression)이 평가(evaluate)되어 생성된 결과

• 평가: 식을 해석해서 값을 생성하거나 참조하는 것
• 모든 값은 데이터 타입을 가지며 메모리에 비트의 나열(2진수)로 저장된다.
  
  • 데이터 타입에 관련된 설명은 다음 글에서 살펴볼 수 있다.
  • https://billyboo.tistory.com/15

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

• 값은 위의 코드처럼 식으로 생성할 수도 있지만 가장 기본적인 방법은 리터럴을 사용하는 것이다.

 

리터럴 (Literal)

사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)

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

✨ 사람이 이해할 수 있는 문자 - 아라비아 숫자, 알파벳, 한글 등
✨ 미리 약속된 기호 - ' ', " ", ., [ ], { }, // 등
✨ 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 

 

표현식 (Expression)

값으로 평가될 수 있는 문(statement)

• 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 
• 리터럴, 식별자, 연산자. 함수 호출 등의 조합으로 이루어질 수 있다. 
• 값으로 평가될 수 있는 문은 모두 표현식이다. 
• 위의 리터럴은 값으로 평가되기 때문에 리터럴은 그 자체로 표현식이다. 

// 리터럴 표현식
42
'Billy'

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

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

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

// 식별자 표현식 X는 할당되어 있는 숫자 값 3으로 평가된다. 
var x = 1 + 2;
x + 3; // 6

✨ 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다. 

 

문 (Statement)

프로그램을 구성하는 기본 단위이자 최소 실행 단위

• 프로그램 : 문의 집합으로 이루어진 것
• 프로그래밍 : 문을 작성하고 순서에 맞게 나열하는 것
• 여러 토큰으로 구성된다. 

✨ 토큰 : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
✨ 키워드, 식별자, 연산자, 리터럴, 세미콜론(;), 마침표(.) 등의 특수 기호는 문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이므로 모두 토큰이다. 

• 컴퓨터에 내리는 명령으로 명령문이라고 지칭하기도 한다.
• 아래는 여러가지 문의 예시이다. 

// 변수 선언문
var x;

// 할당문
x = 5;

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

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

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

 

세미콜론과 세미콜론 자동 삽입 기능 (ASI)

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

• 세미콜론(;)은 문의 종료를 나타낸다.
• 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다. 
• 일반적으로 문을 끝낼 때는 세미콜론을 붙이지만...
  • 0개 이상의 문을 중괄호로 묶은 코드 블록 ({ ... }) 뒤에는 세미콜론을 붙이지 않는다.   
  • 이러한 코드 블록은 항상 문의 종료를 의미하는 자체 종결성(self closing)을 갖기 때문이다. 

문의 끝에 붙이는 세미콜론은 옵션이다 (== 세미콜론은 생략 가능하다!)

• 세미콜론 자동 삽입 기능(Automatic Semicolon Insertion)이 암묵적으로 수행되기 떄문이다. 
• 그러나 개발자가 세미콜론 자동 삽입 기능의 동작을 제대로 예측하지 못해 제대로 활용하지 못하는 경우가 있다. 
• 세미콜론 사용은 기본이고, TC39 등에서도 세미콜론 사용을 권장하는 분위기이므로 붙이는 것이 좋다.

 

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

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

// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다.
var x;
// 1, 2, 1 + 2, x = 1 + 2는 모두 표현식이다.
// x = 1 + 2는 표현식이면서 완전한 문이기도 하다.
x = 1 + 2;

 

🔥표현식인 문과 표현식이 아닌 문을 구분하는 방법

✨ 표현식인 문 : 값으로 평가될 수 있는 문
✨ 표현식이 아닌 문 : 값으로 평가될 수 없는 문
✨ 이를 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다. 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다. 

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

// 변수 선언문은 표현식이 아닌 문이다.
var x;

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

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

완료 값 (Completion value)

크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력하는데, 이를 완료 값이라고 한다. 

• 완료 값은 표현식의 평가 결과가 아니다.
• 따라서 다른 값과 같이 변수에 할당할 수 없고, 참조할 수도 없다. 
• 크롬 개발자 도구에서 표현식인 문을 실행하면 언제나 평가된 값을 반환한다.