[ModernJS_DeepDive] 5장 표현식과 문

책 제목: 모던 자바스크립트 Deep Dive
저자: 이웅모 저
출판사: 위키북스

개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다.
이번 장에서는 앞으로 자주 사용할 용어들에 대해서만 정리한다. 
이번 장을 통해 처음으로 표현식인 문과 표현식이 아닌 문을 구분하는 법을 알았다. 값을 쓰기만 했지 구분할 줄은 몰랐던 것 같다. 근데 이게 그렇게 중요한지는 잘 모르겠다. 모르고 살았어도 죽진 않았겠지..?

 

값 : 표현식이 평가되어 생성된 결과

평가 : 식을 해석해서 값을 생성하거나 참조하는 것

 

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

// 숫자 리터럴 3
// 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값(3)을 생성한다. 
3

 

표현식 : 값으로 평가될 수 있는 문, 표현식이 평가되면 새로운 값을 생성 or 기존값을 참조한다. 

// 표현식 : 리터럴, 식별자, 연산자, 함수 호출

// 숫자 리터럴 3
3
// 리터럴 표현식
10;
('Hello');

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

// 연산자 표현식
1 + 2;
sum = 3;
sum !== 3;

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

 

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

토큰 : 문법적인 의미, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 

// [var sum = 1 + 2;] >> 문
// var / sum / = / 1 / + / 2 / ; >> 토큰

//변수 선언문
var x;

// 할당문
x = 5;

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

// 반복문
for (let i; i < 3; i++) {
  console.log(i);
}

 

세미콜론 (;) : 문의 종료를 의미

• 단 괄호를 묶은 코드 블록 뒤에는 붙이지 않는다.
  • if문, for문, 함수 등
  • 문의 종료를 의미하는 자체 종결성을 갖기 때문이다. 
• 세미콜론 자동 삽입 기능이 있기에, 붙이지 말아야한다는 주장도 있다.
  • 하지만 ASI 의 동작을 제대로 예측하지 못해 프로그램에 문제가 발생할 수도 있으니 그냥 무조건 붙이자. 

 

표현식인 문과 표현식이 아닌 문 구분하기!

표현식인 문 = 값으로 평가되는 문

표현식이 아닌 문 = 값으로 평가될 수 없는 문

var x; // 변수 선언문 = 값으로 평가 X -> 표현식 X

// 1, 2, 1+2, x=1+2 => 표현식 O, 완전한 문
x = 1 + 2;

//표현식 X => 값 X
var foo = var x;    // SyntaxError : Unexpected token var

// 할당문은 그 자체가 표현식이지만, 완전한 문이다.
// 할당문 = 표현식
x = 1;

// 표현식인 문은 값처럼 사용 가능
var foo = (x = 1);
console.log(foo); // 1

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

표현식인 문은 값으로 평가되고 변수에 할당이 가능하다. 

그러나 표현식이 아닌 문은 값으로 평가되지 않고 변수에 할당하면 에러가 발생한다. 

 

+ 완료값 

: 개발자 도구에서 표현식이 아닌 문을 실행하면 undefined 를 출력한다. 이를 완료값이라고 한다. 완료 값은 표현식의 평가 결과가 아니기에 변수에 할당할수도 참조할 수도 없다.