OTTER-LOG

---

자바스크립트의 메모리

10 + 20

• 컴퓨터는 위의 연산과정을 할 때, CPU를 사용해 연산하고 메모리를 사용해 데이터를 기억한다.
• 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이고 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다.
• 이 때, 각 셀은 고유한 메모리 주소를 가지며 위의 연산과정이 끝나면 값 30은 메모리에 저장된다.

💡 자바스크립트는 저장된 메모리 공간에 직접 접근하는 것을 허용하지 않는다.

• 우리는 저장된 값 30을 재사용하고 싶지만, 메모리 공간에 직접 접근하는 것은 위험하며 허용되지도 않는다.
• 이러한 접근을 위하여 프로그래밍 언어는 변수 를 제공한다.

---

변수란 무엇인가? 왜 필요한가?

• 변수는, _하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름_을 말한다.
• 다시 말해보면, 변수는 메모리 공간이자, 값의 위치 를 가리키는 상징적인 이름이다.

• 즉, 변수는 식별자 처럼 사용되며 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
• 이때, 식별자는 값을 기억하고 있는 것이 아니라, 값의 위치 즉 메모리 주소를 기억하고 있다.

변수 선언과 재할당

💡 변수는 값이 저장된 메모리 공간을 식별하기 위한 식별자이다.
값은 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과이다.

이 이미지를 보면서 생각해 보자. 여기서 행해진 코드는 다음과 같다.

var num;
// 변수를 선언한다.
num = 10;
// 변수에 값을 할당한다.
num = 100;
// 변수에 값을 재할당한다.

1. var num

이 선언을 통해 num 이라는 변수를 선언했다. 변수를 선언하려면 그 값을 어떠한 공간에 저장할지 알 수 있어야 한다. 이때 엔진이 0000001F 라는 주소를 할당해준다. 이제, 메모리에 존재하는 00000001F 라는 주소를 가진 메모리 공간은 num 이라는 식별자를 통해 접근할 수 있다. (이렇기 때문에 변수를 식별자라고 하는거구나?)

또한 이때에 자바스크립트 엔진은 num 이라는 식별자로 정해진 00000001F 의 값을 암묵적으로 undefined 로 초기화한다.

1. num = 10

이 선언을 통해 num 에 10 이라는 값을 할당했다. var num 에서 num 은 메모리의 00000001F 주소를 가리키는 식별자이다. 이 메모리에 새로운 값 10 을 할당하려고 한다. 그런데 이미 이 메모리 주소에는 undefined 라는 값이 들어가 있다.

이로 인해, 엔진은 10 이라는 값을 넣을 수 있는 새로운 메모리 주소인 0003A610 에 num 을 식별자로 교체한다. 그리고 0003A610 은 선언대로 10 이라는 값으로 채워지게 된다.

1. num = 100

그렇다면 값을 재할당하면 어떤일이 일어날까?

지금 선언 이전에, num 이 가리키고 있는 공간은 0003A610 은 10 이라는 값으로 채워져 있다. 따라서 그 공간에 새로운 값을 넣을 수 없다. 그렇기 때문에 이 선언이 실행되면 엔진은 B92FA017 이라는 메모리 주소를 num 이 가리키도록 교체한다. 또, B92FA017 이라는 공간은 아무런 값도 없기 때문에 100 이라는 값을 저장할 수 있다.

위에, 변수와 값을 저장하고 메모리 주소를 가리키는 부분을 설명할때 변수 와 값 이라는 단어를 최대한 적절히 사용하고자 했다. 결국, 변수=메모리 공간을 가리키는 식별자는 계속해서 바뀌고 있다.

원래 처음에 변수 num 은 0000001F 였지만, 선언에 따라서 B92FA017 이라는 메모리 공간을 가리키는 식별자로 교체되었다.

반면 값 이 직접적으로 바뀐 부분은 한부분도 없다. 위에 있었던 3개의 메모리 공간에서 undefined, 10 , 100 이라는 값은 바뀌지 않았다.

---

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

소스코드 평가단계

• 자바스크립트 엔진은, 소스코드를 한 줄씩 실행하기 이전에 소스코드 평가 과정을 거친다.
• 이때에 모든 선언문(변수선언문, 함수선언문)을 소스코드에서 찾아내 먼저 실행한다.

선언단계와 초기화단계

• 변수의 선언은 소스코드 평가과정에서 끝나고, 스코프와 실행컨텍스트에 등록된 상황이다.
• 이후, 초기화 단계에서 Var 키워드의 경우 undefined로 동시에 초기화된다.

값의 할당

• 초기화 단계가 끝나면, 자바스크립트는 순서대로 코드를 읽어 내려간다.
• 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

---

호이스팅

• 이처럼, 자바스크립트는 소스코드 평가단계에서 모든 선언을 끝마치기 때문에

💡 모든 선언문은 맨 위로 끌려 올려진 것처럼 동작한다.

// 호이스팅 예시코드

console.log(score) // 3) undefined
var score;         // 1) 변수 선언
score = 80;        // 2) 값의 할당

console.log(score) // 4) 80

---

더 공부해볼 점

• 호이스팅을 어떻게 활용할 수 있을까?
• 호이스팅의 장점과 단점을 따지자면?
• var 키워드 이외 let과 const의 호이스팅?