표현식과 문

# 값

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

 

# 평가

- 식을 해석해서 값을 생성하거나 참조하는 것

 

ex: 아래 예제의 '식'은 '평가'되어 숫자 '값' 30을 생성한다.

//10 + 20이라는 식은 평가되어 숫자 값 30을 생성.
10 + 20; // 30

 

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

메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.

예를 들어, 메모리에 저장된 값 0100 0001을 '숫자'로 해석하면 65, '문자'로 해석하면 'A'.

 

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

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

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

위 예제의 sum 변수에 할당되는 것은 10 + 20이 아니라, 10 + 20이 '평가된 결과인 숫자 값 30'이다.

즉, 변수 이름 sum이 기억하는 메모리 공간에 저장된 것은 10 + 20이 아니라 값 30 이다.

따라서 10 + 20은 할당 이전에 평가되어 값을 생성해야한다.

 

값을 다양한 방법으로 생성할 수 있다.

위 예제처럼 '식'으로 생성할 수도 있지만, 가장 기본적인 방법은 '리터럴'을 사용하는 것.

 

# 리터럴

- 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

//숫자 리터럴 3
3

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

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

 

이처럼 리터럴은 사람이 이해할 수 있는 문자(아라비아숫자, 알파벳, 한글 등) 또는 미리 약속된 기호('', "", ., [] 등)로 표기한 코드.

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

즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법.

리터럴을 사용하면 다음과 같이 다양항 종류(data type)의 값을 생성할 수 있다.

리터럴	예시
정수 리터럴	100
부동소수점 리터럴	1.5
2진수 리터럴	0b01000001
문자열 리터럴	'Hello'
불리언 리터럴	true false
null 리터럴	null
객체 리터럴	{ name: 'Lee', address: 'Seoul' }
배열 리터럴	[1, 2, 3]
함수 리터럴	function() {}

 

 

# 표현식(expression)

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

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

위 리터럴은 '값'으로 평가된다. 따라서 리터럴도 표현식이다. (표현식 ⊃ 리터럴)

var score = 100;

100은 '정수리터럴'이다. 리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 리터럴은 그 자체로 표현식이다.

따라서 100 도 '표현식'이다.

 

var score = 50 + 50;

50 + 50은 리터럴과 연산자로 이루어져있다. 하지만 50 + 50도 평가되어 숫자 값 100을 생성하므로 표현식이다.

 

 

이번에는 score 변수를 참조해보자.

score; // 100

변수 식별자를 참조하면 변수 값으로 평가된다. 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 '표현식'이다.

 

 

이처럼 표현식은 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다.

아래의 예제와 같이 다양한 표현식이 있지만, 값으로 평가된다는 점에서 모두 동일하다.

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

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

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

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

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

 

 

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

예를 들어 수학 수식 1 + 2 = 3에서 1 + 2 와 3은 동치다. 즉, 1 + 2 와 3은 같다고 할 수 있다.

자바스크립트의 표현식 1 + 2는 평가되어 값 3을 생성하므로 표현식 1 + 2와 값 3은 동치다.

따라서 표현식은 값처럼 사용할 수 있다.

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

 

 

# 문(statement)

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

- 문의 집합으로 이뤄진 것이 바로 프로그램.

- 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍.

- 문을 명령문이라고도 부른다. 즉, 문은 컴퓨터에 내리는 명령.

- 문이 실행되면 명령이 실행되고 무슨일인가가 일어나게 된다.

- 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다. 변수선언문을 실행하면 변수가 선언되고, 할당문을 실행하면 값이 할당된다. 조건문을 실행하면 지정한 조건에 따라 실행할 코드 블록이 결정되어 실행, 반복문을 실행하면 특정 코드블록이 반복 실행된다.

 

 

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

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

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

 

표현식과 (표현식이 아닌)문은 비슷해서 구별하기 어렵다고 느낄 수 있다.

하지만 표현식과 문을 구별하는 방법은 의외로 간단하다. 표현식과 문을 구별하는 방법에 대해 살펴보자.

 

 

## 표현식인 문 vs 표현식이 아닌 문 구별방법

문에는 표현식인 문과 표현식이 아닌 문이 있다.

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

예를 들어, 변수 선언문은 값으로 평가될 수 없다. 따라서 '표현식이 아닌 문'이다.

하지만 할당문은 값으로 평가될 수 있다.

 

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

표현식인 문은 값으로 평가되므로 변수에 할당할 수 있다.

하지만 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다.

 

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


var x;

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

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

표현식인 문인 '할당문'은 할당한 값으로 평가된다.

즉 x = 100은 x 변수에 할당한 값 100으로 평가된다. 따라서 foo 변수에 100이 할당된다.

 

 

## 완료 값-undefined

1/ 개발자도구에 '표현식이 아닌 문' 실행 시

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

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

위는 변수선언문, 아래는 조건문. 둘다 '표현식이 아닌 문'이다.

 

 

1/ 개발자도구에 '표현식인 문' 실행 시

표현식인 문을 실행하면 언제나 평가된 값을 반환한다.

 

 

** 출처: 모든 내용은 책 '모던자바스크립트 Deep Dive'를 기반으로 작성하였습니다.