자바스크립트 변수 Part 1

안녕하세요.

일이 너무 바쁘고 해외에서 살고 있다가 귀국하느라 (귀찮음의 변명)
수개월만에 새로운 글을 씁니다.

 

자바스크립트 변수 part 1 에서는

자바스크립트 엔진 속에서 메모리에는 어떻게 해서 변수가 생성되고 변경되는가에 대한 기본적인 개념들을 설명하고자 합니다.

 

1. 변수 생성 과정

2. 해당 변수가 가지고 있는 값을 찾아가는 과정

3. 변수의 값을 변경하는 과정

 

 

1. 변수 생성 과정

그럼 먼저 자바스크립트의 변수 생성 과정을 알아봅시다.

const a = 10;

<1-1 코드>'a' 변수 선언과 동시 할당

 

 

a라는 식별자로 변수를 생성합니다.

 

변수(Variable)라는 것은 식별자(Identifier)와 값(Value)으로 이루어져있습니다.

 

식별자는 변수를 지칭하는 이름표라고 생각하시면 됩니다. <1-1 코드>에서는 식별자가 'a'로 해당됩니다.

 

값은 할당하는 값으로 생각하시면 됩니다. <1-1 코드>에서는 값이 10으로 해당됩니다.

 

이 식별자 'a'와 값 10을 합쳐서 우리는 보통 변수 'a' 라고 말합니다.

 

그래서 식별자와 변수를 혼용해서 쓰이는지만 정확히는 조금 다른 개념인 것입니다.

 

 

다시 본론으로 돌아와서 변수 a 를 메모리에 생성하는 과정을 상세히 설명하겠습니다.

자바스크립트는 먼저 변수를 저장할 곳을 만듭니다.

(※ 여기서 이후의 변수 메모리 공간과 값 메모리 공간은 이해를 시키기 위해 임의로 명명하여 분리 시킨겁니다. 실제로 메모리에 변수 메모리 공간과 값 메모리 공간이 따로 명확히 구분되어져서 존재하는 것이 아닙니다.)

주소	1002	1003
이름	a
값

<1-1 표> 변수 메모리 공간

 

<1-1 표>와 같이 변수를 저장할 공간을 만들어놓고 거기에 이름(=식별자)에다가 <1-1 코드>의 const a에서 a를 저장합니다. 저도 공부하기 전까지는 그냥 여기 값에다가 10을 저장하는 줄 알았습니다. 그러나 값의 자리는 일단 비워놓습니다.

 

주소	5201	5202
값	10

<1-2 표> 값 메모리 공간

 

신기하게도 자바스크립트는 변수를 만드는 메모리 공간과 할당하려는 값의 메모리 공간을 따로 만듭니다. 이것은 지금은 왜 그러신지 이해가 안 가시지겠지만 자바스크립트를 설계하면서 효율적으로 관리하기 위해서 이렇게 되도록 만들었다고 합니다.

 

정리하자면, 이렇게 해서 변수의 공간을 <1-1 표>처럼 만들고 값의 공간을 <1-2 표>처럼 만들었습니다.

이제 마지막으로 해야할 일은 이어줘야하는 일이죠. 이게 바로 할당이 됩니다.

 

주소	1002	1003
이름	a
값	@5201

변수 메모리 공간

주소	5201	5202
값	10

값 메모리 공간

<1-3 표> 할당된 모습

 

할당을 하게 되면 <1-3 표>와 같이 「값 메모리 공간」에서 10의 값을 가진 공간의 주소값(여기선 주소값 5201)을 「변수 메모리 공간」의 값에 값에 할당을 합니다.

 

2. 해당 변수가 가지고 있는 값을 찾아가는 과정

그럼 이제 역으로 어떻게 자바스크립트는 변수의 값을 찾아내는 지 거꾸로 찾아가 보겠습니다.

console.log(a);

<2-1 코드> 선언했던 변수 'a'를 콘솔창에 출력

 

주소	1002	1003
이름	a
값	@5201

 

 

주소	5201	5202
값	10

<2-1 표> 1-3 표 복사

1. 식별자 a 에 해당하는 변수의 공간을 찾습니다.
2. 주소 1002의 공간을 찾았습니다.
3. 주소 1002의 값을 찾습니다.
4. 주소 1002의 값이 @5201인 것을 알아냈습니다.
5. 주소값이 5201인 공간으로 갑니다.
6. 주소값이 5201인 공간의 값을 알아냅니다.

7. 주소값이 5201인 공간의 값은 10입니다.

8. 10을 출력합니다.

 

이렇게 주소값을 따라서 찾아가서 종착역인 값의 공간의 값을 찾아내면 끝인 것입니다.

 

 

3. 변수의 값을 변경하는 과정

여기서는 변수의 값을 변경할 때 어떠한 과정으로 변경이 되는 지를 알아보겠습니다.

새롭게 변수를 선언해 보겠습니다.

let b = 20;

<3-1 코드> 새로운 변수 'b'를 선언함과 동시에 할당

 

주소	2010	2011
이름	b
값	@7522

 

 

주소	7522	7523
값	20

<3-1 표> 변수 'b'에 대한 메모리 공간

 

b = 10;

<3-2 코드> 변수 'b'의 값을 변경

 

 

이렇게 변수 b의 값을 20에서 10으로 변경했을 때는 어떤 과정이 이루어지는가.

저는 이렇게 생각했었습니다.

주소	2010	2011
이름	b
값	@7522

 

 

주소	7522	7523
값	20 -> 10

<3-1 표> 변수 'b'의 값이 변경되었을 때의 글쓴이의 상상

 

당연히 현재 값을 가지고 있는 주소를 찾아가서 해당 값을 20에서 10으로 변경시키는 줄 알았습니다.

하지만 아니였습니다.

값을 변경하는 순서를 차례대로 설명드리겠습니다.

 

주소	2010	2011
이름	b
값	@7522

 

 

주소	7522	7523
값	20

<3-2 표> 변수 'b' 의 공간

1. 값의 메모리 공간에서 10을 찾는다.

주소	・・・	7522	7523	・・・
값		20

<3-3 표> 값의 메모리 공간

 

2. 10이라는 값이 값의 메모리 공간에 없으므로 새롭게 만들어낸다.

주소					・・・	7522	・・・	7681	・・・
값						20		10

<3-4 표> 값의 메모리 공간

 

3. 새롭게 만든 10의 값의 메모리 공간을 변수 b에 할당시킨다.

주소	2010	2011
이름	b
값	@7522 -> @7681

<3-5 표> 변수의 메모리 공간

 

4. 값의 메모리 공간에서 참조되어지지 않는 값은 자동으로 삭제해줍니다.

주소					・・・	7522	・・・	7681	・・・
값								10

<3-6 표> 값의 메모리 공간

 

즉, 결론적으로는 이미 존재해있던 메모리 공간의 값을 변경시키는 것이 아니라

메모리 공간에 내가 변경하고자 하는 값이 이미 존재하는 가를 검색을 한 후,

있다면 바로 변경하고자 하는 값의 주소값을 할당하고 없다면 새로 생성한 후에 새로 생성된 값의 주소값을 할당시킵니다.

 

좀 더 명확하게 하나의 예시를 더 보여드리겠습니다.

let a = 10;
let b = 10;
let c = 15;

<3-3 코드> 조금 더 복잡한 예시

 

주소	・・・	1520	1521	1522	・・・
이름		a	b	c
값		@5749	@5749	@5748

 

 

주소	・・・	5748	5749	・・・
값		15	10

<3-7 표> 새로운 예시의 메모리 공간

a = 20;
b = 15;
const d = 20;

<3-4 코드> 3-3 코드에서 재할당

 

 

과정설명을 보시기 전에 스스로 어떤 순서로 이루어지는 지 생각해보시는 것도 좋을 것 같습니다!

 

1. 변수 a에 재할당하기 위해 메모리 공간에서 20의 값을 갖는 공간을 찾는다.

주소	・・・	5748	5749	・・・	6725	・・・
값		15	10		20

<3-8 표> 값 20에 해당하는 공간이 없으므로 새로 생성

 

2. 재할당할 20의 공간을 새로 만들었으니 재할당을 수행.

주소	・・・	1520	1521	1522	・・・
이름		a	b	c
값		@5749 -> @6725	@5749	@5748

<3-9 표> 변수 a를 재할당한 메모리 공간

 

3. 변수 b에 재할당하기 위해 메모리 공간에서 15의 값을 갖는 공간을 찾는다.

<3-8 표>에서 주소값 5748에 값 15가 할당되어 있으므로 이 주소값 5748을 변수 b에 재할당한다.

주소	・・・	1520	1521	1522	・・・
이름		a	b	c
값		@6725	@5749 -> @5748	@5748

<3-10 표> 변수 b를 재할당한 메모리 공간

 

4. 값의 공간에서 10의 값을 갖는 공간을 참조하는 곳이 전혀 없으므로 메모리 수거

주소	・・・	5748	5749	・・・	6725	・・・
값		15			20

<3-11 표> 참조되는 곳이 없는 메모리 수거

 

5. 새로운 변수 d를 생성

주소	・・・	1520	1521	1522	・・・	2698	・・・
이름		a	b	c		d
값		@6725	@5748	@5748

<3-12 표> 새로운 변수 d를 생성한 변수 메모리 공간

 

6. 변수 d에 값 20을 할당하기 위해 값 메모리 공간에서 값 20을 가지고 있는 공간을 검색 후 할당

<3-11 표>를 보시면 주소값 6725에 값이 20으로 생성되어있으므로 새롭게 생성할 필요없이 변수 d에 주소값 6725를 할당

주소	・・・	1520	1521	1522	・・・	2698	・・・
이름		a	b	c		d
값		@6725	@5748	@5748		@6725

<3-12 표> 새로운 변수 d에 할당한 변수 메모리 공간

 

 

 

이렇게 메모리에 자바스크립트는 변수에 대해 어떻게 작동하는 지
1. 변수는 어떻게 선언되는가
2. 선언된 변수에는 어떻게 값이 할당되는가
3. 변수의 값을 어떻게 변경되는가
4. 참조되는 곳이 없는 메모리는 어떻게 되는가
에 대해서 알아보았습니다.

끝까지 읽어주셔서 감사합니다.
항상 그렇듯 부족한 부분이나 잘못된 부분이 있다면 지적부탁드리겠습니다.