모던 자바스크립트 Deep Dive 독후감 P. 50 ~ 58(값과 표현식과 문 그리고 평가)

포스팅을 시작하기에 앞서

본 글을 포함하여, 앞으로 포스팅할 [모던 자바스크립트 Deep Dive] 서적 관련 글들은, 철저하게 필자 본인의 학습 내용 정리 및 기록을 위한 용도이며 글에 왜곡되고 잘못된 정보가 존재할 수 있음을 말씀드립니다.

 

 

Javascript 학습이 목적이신 분이라면 본 서적을 구매하여 직접 읽어보시는 것을 권해드립니다.

 

 

값(Value)

 

값(value)은 표현식(expression)이 평가(evaluate)되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.

 

그리고 모든 값은 데이터 타입을 갖는다. 예를 들어, 메모리에 저장된 값이 0100 0001 이라면 이는 숫자로 해석하면 65이고, 문자로 해석하면 'A'가 된다. 메모리에는 0100 0001 과 같이 2진수로만 저장되기 때문에 데이터 타입을 갖는 것이다.

 

아래 코드를 살펴보자

var sum = 10 + 20;

 

위 코드는 변수를 선언하여 메모리 공간을 확보하고 확보된 공간의 주소를 sum이라는 이름으로 연결한 뒤 확보된 공간, 즉, 변수에 10 + 20 의 결과를 할당하고 있다. (정확히는 undefined가 선언될 때 당시 먼저 할당되고 10 + 20 의 결과값이 할당 될 때는 새로운 공간이 확보된다.)

 

중요한 것은 sum이 기억하는 메모리 공간에 저장된 것은 10 + 20(표현식)이 아닌 30(평가된 결과)라는 것이다.

 

따라서 표현식은 할당 이전에 평가되어 값을 생성해야 한다.

 

위 예제는 식으로 값을 생성했지만, 가장 기본적인 방법은 리터럴을 사용하는 것이다.

 

리터럴(literal)

 

아래 코드에 적힌 3은 "값"이 아닌 10 + 20 같은 표현식과 마찬가지로 결과를 생성하기 위한 평가의 대상(표현식)이다.

3

 

즉, 위 예제는 표현식의 방식 중 하나인 리터럴, 그리고 그 리터럴의 정류중 하나인 정수 리터럴로 3이라는 "문자"가 표현되어 있는 것이고, 이 표현식이 평가되어 3이라는 "값"을 생성하게 되는 것이다.

 

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

 

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

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

 

 

표현식(expression)

 

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

 

아래 코드를 살펴보자.

var score = 100;

score = 50 + 50;

score; //100

 

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

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

세번째 score는 변수 식별자를 참조하고 있다. 변수 식별자를 참조하면 변수 값으로 평가 된다. 값을 생성하진 않지만 값으로 평가되므로 표현식이다.

 

간단하게 말해, 표현식인가 아닌가는 값으로 평가되는지 아닌지를 뜻한다.

 

 

문(statement)

문(statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다. 프로그램이란 문의 집합이며,

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

 

그리고 문은 여러 토큰으로 구성된다. 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본요소이다.

 

예를 들어, 아래 코드의 var (키워드), sum (식별자), = (연산자), 1(리터럴), +(연산자), 2(리터럴), ;(세미콜론) 모두 토큰이다.

var sum = 1 + 2;

 

문은 곧, 컴퓨터에게 내리는 명령이고, 문의 종류에는 선언문, 할당문, 조건문, 반복문 등이 있다.

 

 

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

 

표현식이란 표현식 챕터에서 나왔듯이 값으로 평가되는 문이다. 그리고 표현식은 평가되면 값을 생성하기 때문에

표현식과 표현식이 생성한 값은 서로 같은 존재로 취급을 받는다.

 

즉, ' x = 1 + 2 ' 라는 표현문이 있을 때, 메모리에 실제로 저장되는 값은 1 + 2 가 평가된 후 생성된 값인 3이지만,

이 3 과 ' 1 + 2 '라는 표현식은 같은 취급을 받는다는 뜻이다.

 

이를 이용해서 문을 변수에 할당해 보는 것으로 표현식인 문과 표현식이 아닌 문으로 구별할 수 있다.

// 표현식이 아닌 문
var foo = var x; // SyntaxError

// 표현식인 문
var foo = x = 100;
console.log(foo); // 100

 

예전에 코드를 작성하다 실수로 ' var foo = x = 100;' 와 같은 코드를 작성하고 실행한적이 있는데, 이 코드가 정상 작동을 하는것 보고 "100을 먼저 x에 넣고 x의 값을 foo로 넣는건가? 이게 되네" 라며 신기해 했던 경험이 있었다. 그런데 사실 "x = 100;" 이라는 표현식 자체가 "100" 과 동치여서 실행되는 것이었다니, 너무 신기하다.

 

 

한마디로, x = 100 이란 표현식은 x 변수에 할당한 값 100으로 평가된다.

 

단어 정리

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

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

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

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

토큰(token) : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

ASI(Automatic Semicolon insertion) : 세미콜론 자동 삽입 기능

 

감명 깊었던 내용

! : 표현식과 표현식이 생성한 값은 동치이다.

! : 코드상에 적혀있는 3 과 같은 문자(정수, 문자열 등)는 실제 값이 아닌 리터럴이다.

 

정리되지 않은 내용 - 평가란?

이전에 변수 호이스팅 챕터에서 런타임 이전에 "평가" 과정이란 단계가 있다고 봤었는데, 오늘 본 내용에서는 런타임 단계에서 표현식을 "평가"하여 값을 생성한다고 나타나 있다. 평가라는 것은 평가 과정이라는 런타임 이전 단계에서도 이루어지고 런타임 중에도 일어나는 행위일까? "평가"란 구체적으로 특정되지 않은 포괄적인 의미를 갖고있어, 상황과 맥락에 따라 다르게 사용되는 단어인가?

 

이런 궁금증들 때문에, "평가"라는 단어의 의미에 대해서 더 자세히 찾아보고 싶었지만 이후에 평가 과정에 대해 자세히 다루는 챕터가 있다고 하여 우선은 일단락 지었다. 엘리스의 토끼굴에 빠지는 것을 주의하라는 말이 떠올랐기 때문이다.