[JavaScript] 변수 메커니즘

1. 개요

JavaScript라고 하였으나 개념의 일부는 컴퓨팅 공학에서 통용되는 개념이기에 아무나 보셔도 상관없습니다.

 

2. 메모리 저장

JavaScript에서 선언된 모든 값들은 메모리에 데이터를 저장하여 사용합니다.

즉 10+20=30을 실행할 경우 메모리에는 10,20,30 전부 2진수화 되어 메모리에 저장되는 것입니다.

위 그림에서처럼 30은 0x12300004의 주소 값에 저장되고 우리가 30을 쓰기 위해서는 0x12300004에 접근하는 방법 외에는 없는 것입니다, 또한 변수는 한번 선언되면 메모리가 해제되기 전까지 아무도 그 공간을 사용할 수 없도록 안전하게 보호합니다. 하지만 이런 내용은 JS가 알아서 처리하기에 우리는 이런 게 있다고만 알면 됩니다.

 

우리가 사용하는 변수는 실제 값이 아닌 값을 저장한 메모리를 가리키는 주소 가리키는 식별자라는 것과

우리가 10을 선언하면 메모리에는 10이 저장이 되며 let a, let b가 10을 가리킨다고 하면 이 둘은 같은 주소를 가리키고 있는 것이고 a = 20으로 할당한다면 a는 20의 주소를 가리키게 되는 것이며 a=10+20을 한다면 a는 30의 주소 0x12300004를 가리킵니다

 

 

3. 변수 선언

Js에서 변수를 식별자만 선언하고 값을 넣지 않으면 아래와 같이 나오는 것을 알 수 있습니다.

이는 아직 이 test라는 변수가 가리킬 주소를 정해주지 않았기 때문에 undefined가 뜨는 것입니다.

아직 값을 할당받지 않은 변수는 모두 undefined로 초기화되는 것입니다.

(변수의 가리키는 메모리의 값이 undefined의 주소입니다.) 

※ undefined는 타입이 아니라고 생각하기 쉬우나 염연히 int, string과 같은 원시 타입에 속합니다 ※ 

그러면 왼쪽과 같이 선언과 동시에 값을 넣어주면 되지 않냐고 생각할 수 있지만 모든 변수 선언은 undefined를 거치게 됩니다, 이유는 Js 엔진이 변수에 특정 주소를 위임하면서 값을 undefined로 초기화해주기 때문입니다.

더 정확히는 아래와 같은 순서로 진행됩니다.

• 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에다가 변수의 존재를 알립니다.
• 초기화 단계 : 변수에 메모리 공간을 확보한 후 이들의 값을 암묵적으로 undefined로 초기화합니다.

 

4. 호이스팅

 

Js에서는 variable hoisting이라고 하는 특징이 있습니다.

이 기능은 조금 재밌는 게 hoisting이라는 이름처럼 변수의 선언을 알아서 선두로 끌어올려 올려서 변수를 undefined로 선언해주는 것입니다.

 

 

타 언어였으면 변수가 선언되지 않았다고 에러가 뜰 이 코드도 JS에서는 이미 선언 단계에서 undefined로 초기화하였기에 괜찮습니다.

즉 위에 변수 선언과 같은 내용입니다.

 

 

 

5. 가비지 콜랙터

JS에서 메모리에 이전에 저장된 값은 다음 소스에서 사용하지 못하게 초기화를 해야 합니다.

이를 하는 것이 가비지 콜랙터(gabage collecter)이며 주로 하는 일은  할당된 메모리 중 어떤 변수도 가리키지 않는 가비지 값을 메모리에서 해제하는 일을 합니다.

위 이미지에서 undefined와 90처럼 어느 변수도 가리키지 않는 값이 가비지입니다.

이들을 메모리에서 해제하는 게 바로 가비지 콜랙터이다, 이 작업또한 js에서 알아서합니다.