컴퓨터의 동작 방식으로 보는 자바스크립트 코드 실행 과정

컴퓨터의 동작 방식으로 보는 자바스크립트 코드 실행 과정

컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

컴퓨터는 메모리에서 메모리 셀, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다.

각 셀은 고유의 메모리 주소를 가지며, 메모리에 저장되는 데이터는 모두 2진수로 저장된다. (컴퓨터는 데이터 타입에 상관없이 모두 2진수로 처리한다)

 

10+20 코드가 있으면, 10과 20은 메모리 주소에 저장되고 CPU가 이 값을 읽어들여 연산한다.

연산 결과 또한 메모리 주소에 저장된다.

 

값을 재사용하고 싶어도 메모리 공간에 직접 접근할 수 없다. 이때 변수라는 메커니즘을 사용한다.

변수는 메모리 공간을 식별하기 위해 붙인 이름이다. 값의 위치를 가리킨다.

 

식별자는 변수가 될 수도 있고 함수, 클래스 등 다양하다.

식별자는 값이 아니라 메모리 주소를 기억한다.

식별자는 메모리 상 존재하는 어떤 값을 식별할 수 있는 이름이다. 예를 들어,

변수 식별자는 메모리 상 존재하는 변수 값을 식별하고, 함수 식별자는 메모리 상 존재하는 함수를 식별한다.

 

변수를 사용하려면 선언해야 한다. (메모리 공간을 확보하고 변수 이름과 메모리 공간의 주소를 연결, 즉 값 저장을 위한 준비)

자바스크립트는 var, let, const 키워드 사용한다.

 

확보된 메모리 공간은 초기화(자바스크립트 엔진에 의해 undefined 값이 할당)된다. 이렇게 단계를 나눈다.

1. (선언 단계): 변수 이름 등록, 자바스크립트 엔진이 변수의 존재 파악

2. (초기화 단계): 메모리 공간 확보, undefined 할당(암묵적인 초기화)

 

var 키워드는 선언후 사용되지 않는 값들(메모리 공간 확보했으나 값을 할당하지 않은 값, garbage value)에 대해 암묵적으로 초기화한다.

const 키워드로 선언한 변수는 상수이므로 재할당 할 수 없다.

 

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하지만 변수 선언을 다른 코드보다 먼저 실행한다.

변수 선언이 어디에 있든 어디서든지 변수를 참조할 수 있는 이유다.

변수 선언문이 코드의 선두로 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.

즉, 런타임(소스코드가 순차적으로 실행되는) 시점을 기준으로 이전에 변수가 선언되고 해당 시점에 값이 할당된다.

 

할당 시에는 undefined가 저장되어 있는 메모리 공간을 지워 새롭게 저장하는 것이 아닌, 새로운 메모리 공간을 확보하여 할당한다.

마찬가지로 값을 재할당 할 때도 재할당 값을 새롭게 저장하지 않고 새로운 공간 확보 및 값을 할당(저장)한다.

 

값은 식이 평가되어 생성된 결과를, 리터럴은 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

3은 아라비아 숫자가 아닌 사람이 이해할 수 있는 기호(아라비아 숫자)로 표현된 숫자 리터럴이다.

 

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

평가된 값은 동치, 즉 동등한 관계다.

문은 표현식일 수도, 표현식이 아닐 수도 있는데, 이를 구별하는 방법은 문을 변수에 할당해 보는 것이다.

표현식이 아닌 문(var x;)은 값처럼 사용할 수 없다. 즉 표현식의 전제 조건(값으로 평가될 수 있는 문)에 어긋난다.

(변수 선언문은 표현식X, 할당문은 표현식O)

크롬 개발자 도구에서 표현식X 문을 실행하면 완료 값 undefined를 출력하고, 표현식O 문은 평가된 값을 반환한다.