[JavaScript] 표현식과 문

값이란

값이란 식이 평가되어 생성된 결과를 말한다. 이때, 평가는 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 이렇게 평가된 모든 값은 데이터 타입을 가지며, 메모리에 2진수인 비트(bit)의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 메모리에 저장된 0100 0001은 숫자 타입일 경우 65지만, 문자 타입일 경우 'A'가 된다.

 

리터럴

이러한 값을 만들어 내는 방법 중 하나로 리터럴(literal)이 있다. 리터럴은 사람이 이해할 수 있는 문자 혹은 약속된 기호를 사용해 값을 생성하는 표기법(notation)을 말한다. 사람이 이해할 수 있는 문자에는 아라비아 숫자, 알파벳, 한글 등이 있고, 미리 약속된 기호에는 ' ', " ", [ ], { }, // 등이 있다. 

 

리터럴	예시	비고
정수, 부동소수점 리터럴	100(정수), 10.5(부동소수점)
2진수, 8진수, 16진수 리터럴	0b01000001(2진수), 0o101(8진수), 0x41(16진수)	8진수, 16진수는 ES6에서 도입
문자열 리터럴	'Hello', "World"
불리언 리터럴	true, false
null, undefined 리터럴	null, undefined
객체 리터럴	{ name: 'Lee', address: 'Seoul' }
배열 리터럴	[ 1, 2, 3 ]
함수 리터럴	function() {}
정규 표현식 리터럴	/[A-Z]+/g

 

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

 

표현식

표현식(expression)은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다.

리터럴은 평가되어 값을 생성하기 때문에, 리터럴 역시 표현식으로 볼 수 있다.

 

100, 50+50은 각각 숫자리터럴, 숫자리터럴과 연산자로 이루어져있고 값으로 평가되므로 표현식이다. 

var score = 100;
score; // → 100

 

위와 같이 변수 식별자를 참조하면 변수 값으로 평가되므로 마찬가지로 표현식이다.

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

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

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

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

 

Q. 아무것도 반환하지 않는 함수를 호출한 함수 호출문도 표현식인가?
아무것도 반환하지 않는 함수는 기본적으로 undefined를 반환한다. 따라서, 그러한 함수를 호출하는 함수 호출문은 결과적으로 undefined라는 값을 평가하게 된다. 따라서 해당 함수 호출문도 표현식이다.

 

문

문(statement)은 프로그램을 구성하는 기본 단위이자, 최소 실행 단위다. 문의 집합으로 이루어진 것이 바로 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.

 

문은 여러 개의 토큰(token)으로 구성된다. 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. 키워드, 식별자, 연산자, 리터럴, 세미콜론(;)이나 마침표(.) 등의 특수 기호 모두 각각 문법적인 의미를 가지고 있고, 문법적으로 더 이상 나눌 수 없는 요소이므로 모두 토큰이다. 

문은 컴퓨터에 내리는 명령으로, 명령문이라고도 부른다. 문이 실행되면 명령이 실행된다. 이러한 문을 선언문, 할당문, 반복문 등으로 구분할 수 있다.

 

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

 

문에는 표현식인 문과 표현식이 아닌 문이 있다. 즉, 모든 표현식은 문이 될 수 있지만, 모든 문이 표현식이 되는 것은 아니다. 둘을 구별하는 가장 간단하고 명료한 방법은 문을 변수에 할당해 보는 것이다. 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있지만, 표현식이 아닌 문은 값으로 평가할 수 없으므로 에러가 발생한다.

var foo = var x; // SyntaxError: Unexpected token var
var foo = var x = 100; // SyntaxError: Unexpected token var

 

변수 선언문은 값으로 평가될 수 없으므로 위와 같이 변수 선언문 자체를 변수에 할당하려고 하면 문법 에러가 발생한다. 위 예제의 2번째 줄의 var x = 100;은 변수 선언과 값 할당이 결합된 형태로 값으로 평가할 수 없으므로 마찬가지로 문법 에러가 발생한다.

 

var foo = x = 100;
console.log(foo); // 100

 

반대로 변수에 값을 할당만 하는 할당문은 할당한 값으로 평가되기 때문에 x = 100;은 100으로 평가되고, foo 변수에 100이 할당된다.

 

완료값(completion value)

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

 

만약 표현식인 문을 크롬 개발자 도구에서 실행하면, 항상 평가된 값을 출력한다.

 

크롬 개발자 도구에 문을 실행해서 undefined가 나왔다고해서 항상 그게 완료값이고, 표현식이 아닌 문을 실행한 것은 아니라는 점에 주의하자. 표현식이 평가된 값이 undefined일 수 있기 때문이다.

 

---

참고

 

모던 자바스크립트 Deep Dive

범용 애플리케이션 개발 언어로 성장했습니다. 따라서 자바스크립트를 학습하는 방식도 이에 걸맞게 변화해야 하며, 이 책은 자바스크립트의 기본 개념과 동작 원리를 깊이 있게 학습하고자 하는 독자를 위해 기획되었습니다. 《모던 자바스크립트 Deep Dive》에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤칩니다. 따라서 여러분이 작성한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측하고

저자

이웅모

출판

위키북스

출판일

2020.09.25