모던 자바스크립트 Deep Dive 스크랩 (1)

본 문서는 지극히 작성자의 주관적인 기준으로 모던 자바스크립트 Deep Dive 서적의 스크랩 하고 싶은 부분을 모은 게시글 입니다.

 

변수

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

-> 값의 위치를 가리키는 상징적인 이름

 

var의 대표적인 단점

var 키워드의 여러 단점 중에서 가장 대표적인 것이 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 것이다. 이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다.

 

var 키워드는 폐기 (deprecated)되지 않았다.

ES6 이전 사양으로 작성된 코드는 var 키워드를 사용해 구현되어 있을 것이며, ES6 이후 사양을 따른다 하더라도 권장하지는 않지만 var 키워드를 사용할 수 있다.

따라서 ES6 사양을 기준으로 자바스크립트를 학습한다 하더라도 ES5 사양을 잘 알아둘 필요가 있다. ES5를 잘 이해하고 있으면 ES6를 더욱 빠르고 명확하게 이해할 수 있기 때문이다.

 

var의 장점

사실, var는 사용하지 않아야 한다고 강력하게 주장하고 있었던 반면, 장점에 대해서는 생각해 본 적이 없었다. 이 부분이 스스로에게 꽤나 충격적이었다. var에 장점이 있다는 것 자체가.. 꽤나.. ...

 

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다. var 키워드로 선언한 변수는 undefined로 암묵적인 초기화가 자동 수행된다. 따라서 var 키워드로 선언한 변수는 어떠한 값도 할당하지 않아도 undefined라는 값을 갖는다.

 

만약 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있다. 이러한 값을 쓰레기 값(garbage value)이라 한다. 따라서 메모리 공간을 확보한 다음, 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있다. 자바스크립트의 var 키워드는 암묵적으로 초기화를 수행하므로 이러한 위험으로부터 안전하다.

 

변수 선언과 할당의 실행 시점은 다르다.

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

 

var score = 80;

 

이 경우에는 처음에  score가 undefined를 가리킨다.

변수에 값을 할당할 때에는 이전 값 undefined가 저장되더 있던 메모리 공간을 지우고 그 메모리 공간에 할당 값 80을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값 80을 저장한다는 점에 주의하자.

 

왜 이전 값 undefined를 간단히 80으로 '변경'하지 않고 새로운 메모리 공간을 확보하고 80 을 저장해서 다시 score가 새로운 공간을 가리키도록 하는 걸까?

저는 JavaScript의 객체 불변성 때문 이라고 생각합니다.

JavaScript에서 기본 데이터 타입(primitive types)은 불변성(immutable)을 가집니다.
예를 들어, 숫자나 문자열은 한 번 생성되면 그 내용을 변경할 수 없습니다. 새로운 값이 할당되면 새로운 메모리 공간이 생성되고, 변수는 이 새로운 메모리 공간을 가리키게 됩니다.

이를 지키기 위해 이러한 과정을 거친다고 생각합니다.

 

그럼 사용하지 않게된 undefined가 저장된 메모리 공간은 어떻게 되는 걸까? 

JavaScript와 같은 고급 언어에서는 가비지 컬렉터(Garbage Collector)가 메모리 관리를 담당합니다. 가비지 컬렉터는 더 이상 사용되지 않는 메모리 공간을 주기적으로 찾아내어 해제하는 역할을 합니다. 따라서, 변수에 새로운 값을 할당할 때 이전 값이 저장되었던 메모리 공간은 가비지 컬렉터에 의해 자동으로 처리되고, 그 메모리는 재사용 가능한 상태가 됩니다.

따라서 메모리가 낭비되지 않습니다! 

 

표현식(expression)

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

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

 

// 리터럴 표현식

10

'Hello'

// 식별자 표현식 (선언이 이미 존재한다고 가정)

sum
person.name
arr[1]

// 연산자 표현식

10 + 20
sum = 10
sum !== 10

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

문(statement)

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

문은 여러 토큰으로 구성된다.

문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

세미콜론(;)은 문의 종료를 나타낸다. 즉, 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다. 문의 끝에 붙이는 세미콜론은 옵션이다. 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 시점에 세미콜론을 자동으로 붙여주는 세미콜록 자동 삽입 기능이 암묵적으로 수행되기 때문이다. 하지만, 이 자동 삽입 기능의 동작과 개발자의 예측이 일치하지 않는 경우가 간혹 있으므로 세미콜론을 반드시 붙여야 한다는 주장이 다수를 차지하고 있다.