[TIL-172~173] 모던 자바스크립트 4~7장

4장 변수

4-1. 변수의 필요성

변수는 컴퓨터가 프로그래밍 언어의 규칙에 따라 코드를 처리하기 위해 필요한 재료들(데이터)을 기억해두는 수단. 10+20이라는 식을 처리하려면 + 기호에 따라 더할 숫자인 "10"과 "20"을 기억해야 함.

* 사람은 두뇌 하나로 기억과 계산을 한번에 함. 하지만 컴퓨터는 메모리를 사용해 데이터를 기억하고, CPU를 사용해 계산함.

메모리는 데이터를 저장하는 메모리 셀(1바이트)의 집합체. 각 셀은 메모리 공간의 위치, 즉 메모리 주소를 가짐. 컴퓨터는 데이터를 2진수로 저장하므로, 메모리에 저장되는 값은 무조건 2진수로 저장됨.

어떤 식을 계산하고 나면, 결과값이 임의의 메모리 주소에 저장됨. 그런데 이 값을 가져오고 싶으면?(재사용)

1) 개발자의 직접적인 메모리 제어 : 메모리 주소를 통해 직접 해당 메모리 공간에 접근하는 것은 위험함. 허용되지 않음. 또한 해당 값이 저장될 메모리 주소는 임의로 정해지기 때문에 코드를 실행할 때마다 주소가 달라짐.

2) 변수로 저장 : 메모리 주소를 직접 사용하는 게 아니라, 해당 메모리 공간에 이름을 매겨서 그 안에 저장된 값을 불러옴. 안전하게 값에 접근할 수 있음.

변수는 값을 저장하는 메모리 공간 자체이자, 그 위치를 가리키는 상징적인 이름. 메모리 공간에 저장된 값을 식별하는 고유의 이름은 변수 이름, 변수에 저장된 값은 변수 값.

 

4-2. 식별자

변수 이름을, 어떤 값을 구별해서 식별할 수 있는 고유한 이름이라는 의미에서 식별자라고도 함. 식별자는 값이 저장된 메모리 주소를 기억하여 값을 식별함. 반대로 말하면, 식별자는 메모리 주소에 붙인 이름. 따라서 값이 저장된 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어있음.

정확히 말하면 식별자는 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름. 변수뿐 아니라, 함수, 클래스 등의 이름도 모두 식별자. 선언함으로써 자바스크립트 엔진에 식별자의 존재를 알림.

 

4-3. 변수 선언

변수를 생성하는 것. 1) 값을 저장할 메모리 공간 확보, 2) 변수 이름과 확보한 메모리 공간의 주소 연결. 이로써 변수를 선언하면 값을 저장할 준비가 됨.

var, let, const 키워드를 사용하여 선언함. 키워드 뒤에 오는 변수 이름으로 새로운 변수를 선언하라고 지시함. 변수를 선언하면 값을 할당하기 전까지 해당 메모리 공간이 비어있는 게 아니라, undefined라는 값이 암묵적으로 할당됨(초기화).

자바스크립트 엔진의 변수 선언 단계

1. 선언 : 변수 이름을 등록하여 자바스크립트 엔진에 변수의 존재를 알림.
2. 초기화 : 값을 저장할 메모리 공간을 확보하고, undefined를 할당하여 초기화(최초 할당).

var 키워드를 사용해서 변수를 선언하면 이 두 단계가 동시에 진행됨. 초기화하지 않으면, 확보된 메모리 공간에 이전에 사용했던 값인 쓰레기값이 남아있을 수 있음.

* 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리함. 변수의 이름과 값은 실행 컨텍스트 내에 키와 값으로 구성된 객체로 등록되어 관리됨.

참조에러 : 선언되지 않은 식별자에 접근할 때 발생.

 

4-4. 변수 호이스팅

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행됨. 이때를 런타임이라고 함. 그런데 변수 선언은 런타임 이전에 실행됨. 그래서 변수 선언 이전에 변수를 참조해도 에러가 발생하지 않음.

자바스크립트 엔진의 소스코드 실행 단계(아래 단계가 차례로 실행됨)

1. 소스코드 평가 과정 : 이때 모든 선언문을 소스코드에서 찾아 먼저 실행.
2. 소스코드 순차 실행(런타임) : 먼저 실행한 선언문들을 제외한 소스코드를 한 줄씩 순차적으로 실행.

변수 호이스팅 : 이렇게 변수 선언문이 선두로 끌어올려진 것처럼 동작하는 자바스크립트의 특징. 키워드를 사용하여 선언하는 모든 식별자에 해당함.

 

4-5. 값 할당

할당 연산자 = 를 사용하여 좌변의 변수에 우변의 값을 할당(대입, 저장).

변수 = 값;
예1) var 변수명;          // 변수 선언
       변수명 = "값";      // 변수 할당
예2) var 변수명 = "값";