[Deep Dive] 5. 표현식과 문

1. 값

• 값(value) : 식(표현식)이 평되어 생성된 결과를 말한다.

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

모든 값은 데이터 타입을 가지며, 메모리에 bit의 나열로 저장된다.

 

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름.

따라서, 변수에 할당되는 것은 값이다.

2. 리터럴

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

위 그림의 3은 단순한 아라비아 숫자가 아니라 숫자 리터럴이다.

사람이 이해할 수 있는 아라비아 숫자를 사용해 숫자 리터럴 3을 코드에 기술하면, 자바스크립트 엔진은 이를 평가해 숫자 3을 생성.

 

자바스크립트 엔진은 코드가 실행되는 시점인 Runtime에 리터럴을 평가해 값을 생성한다.

3. 표현식

• 표현식(expression) : 값으로 평가될 수 있는 문(statement)

→ 즉, 표현식이 평가되면 새로운 값을 생성하거나, 기존 값을 참조한다.

var score = 100; // 1
var score = 50 + 50; // 2
score; // 3

1. 리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 리터럴 그자체가 표현식.
2. 리터럴과 연산자로 이뤄져있다. 하지만 평가되어 숫자 값 100을 생성하므로 표현식이다.
3. 변수 식별자를 참조하면, 변수 값으로 평가된다. 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

즉! 값으로 평가될 수 있는 문은 모두 표현식이다.

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

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

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

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

표현식은 값으로 평가되는데, 이때 표현식과 표현식이 평가된 값은 동등한 관계, 즉 동치다.

Ex) 1 + 2 = 3

→ 이것은 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 의미!

4. 문

• 문(statement) : 프로그램을 구성하는 기본 단위이자 최소 실행 단위.
• 토큰(token) : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미

문 = 명령문이라고도 하며, 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

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

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

단, 0개 이상의 문을 중괄호로 묶은 코드 블록( {…} ) 뒤에는 세미콜론을 붙이지 않는다.

Ex) if문, for문, 함수 등의 코드 블록 뒤

why? 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성(self closing)을 갖기 때문.

문의 끝에 붙이는 세미콜론은 옵션인데, 이는 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 **세미콜론 자동 삽입 기능(ASI)**이 암묵적으로 수행되기 때문이다.

하지만, ASI의 동작과 개발자의 예측이 일치하는 경우가 간혹 있음.

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

console.log(foo())

이러한 이유가 있기에, 세미콜론을 붙이는 것을 권장한다.

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

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

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

표현식인 문은 값으로 평가될 수 있는 문 / 표현식이 아닌 문은 값으로 평가될 수 없는 문

→ 변수에 할당해 보는 방법으로 가장 간단하게 구별 가능

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

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

따라서 변수 선언문은 표현식이 아닌 문! / 할당문은 표현식인 문

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

완료 값(completion value)

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

완료값은 표현식의 평가 결과가 아니다. 따라서 다른 값과 같이 변수에 할당할 수 없고, 참조할 수 없다.

크롬 개발자 도구에서 표현식인 문을 실행하면 언제나 평가된 값을 반환한다.

why?? chrome 내부적으로 return문이 있어서 표현식인 문이 평가된 값을 반환하는 것 같다.