변수 선언과 할당
date
Jun 4, 2022
thumbnail
slug
변수 선언과 할당
author
status
Published
tags
JavaScript
summary
변수 선언, 할당
변수
let a;
변할 수 있는 데이터를 만든다. 그 데이터의 식별자는 a로 한다.
변수 선언
변수는 선언함으로서 메모리 영역에 저장되는데 아래와 같아요.type
Post
updatedAt
Jan 22, 2023 01:19 AM
변수 선언, 할당
변수
let a;
변할 수 있는 데이터를 만든다. 그 데이터의 식별자는 a로 한다.
변수 선언
변수는 선언함으로서 메모리 영역에 저장되는데 아래와 같아요.
주소 | 1002 | 1003 |
데이터 | 이름: a | |
값: |
변수 할당
변수 영역과 데이터 저장 영역이 나뉘어지는데 데이터를 저장한 메모리 주소를 변수의 값에 할당해준다.
간단히 말해 변수의 값에 데이터를 가르키고 있는 주소를 저장한 것이에요.
변수의 재할당
만약 변수 a의 값을 변경한다면 어떻게 동작할까요?
let a;
a = '123';
a = 'abc';
주소 | 1002 | 1003 |
데이터 | 이름: a | |
값: @5004 |
주소 | 5003 | 5004 |
데이터 | ‘123’ | ‘abc’ |
아래와 같이 다른 메모리에 데이터가 할당되며 변수의 값만 변경돼요.
가변값
객체에서의 데이터 할당
let obj = {
a: 1,
b: '123',
}
주소 | 1002 | 1003 |
데이터 | 이름: obj | |
값: @5002 |
주소 | 5002 | 5003 | 5004 |
데이터 | @7103 ~ ? | 1 | ‘123’ |
ㅤ | ㅤ | ㅤ | ㅤ |
주소 | 7103 | 7104 |
데이터 | 이름: a | 이름: b |
값: @5003 | 값: @5004 |
- 변수 영역 @1002를 확보하고 이름을 obj라고 지정해요.
- 주소 @5002를 할당해요.
- object 데이터 이므로 이 주소에 영역 값을 저장해요. (@7103부터 ~~ 추가되는 방식)
- 확보된 주소(@7103 ~)에 이름 a와 b 를 지정해요.
- 메모리 데이터 영역에서 number 타입 1을 검색합니다. 없다면 @5003에 할당해요.
- 메모리 데이터 영역에서 string 타입 ‘123’ 을 검색합니다. 없다면 @5004에 할당해요.
객체에서의 데이터 재할당
let obj = {
a: 1,
b: '123',
}
obj.a = 3;
주소 | 1002 | 1003 |
데이터 | 이름: obj | |
값: @5002 |
주소 | 5002 | 5003 | 5004 | 5005 |
데이터 | @7103 ~ ? | 1 | ‘123’ | 3 |
주소 | 7103 | 7104 |
데이터 | 이름: a | 이름: b |
값: @5005 | 값: @5004 |
할당 이후 데이터를 다른 메모리 주소에 선언하고 @5005
a 가 바라보고 있는 메모리 주소만 변경해줘요
💡 객체가 새로 생성된 것이 아닌 내부 객체 내부의 key가 가르키고 있는 메모리 주소가 변경된 것이다.
→ object를 const로 선언해도 value값을 변경할 수 있는 이유
객체에서의 array 데이터 할당
let obj = {
a: 1,
arr: ['a', 'b', 'c'],
}
주소 | 1002 | 1003 |
데이터 | 이름: obj | |
값: @5002 |
주소 | 5002 | 5003 | 5004 | 5005 | 5006 |
데이터 | @7103 ~ ? | @8103 ~ ? | ‘a’ | ‘b’ | ‘c’ |
주소 | 7103 | 7104 |
데이터 | 이름: a | 이름: arr |
값: @5005 | 값: @5003 |
주소 | 8103 | 8104 | 8105 |
데이터 | 이름: 0 | 이름: 1 | 이름: 2 |
값: @5004 | 값: @5005 | 값: @5006 |
변수에 데이터 하나를 넣는건 위에서 다뤘으니 array만 언급하려고 해요.
- 메모리를 @7104에 확보하고 이름을 arr로 설정해요.
- arr에 저장할 데이터가 array이니 데이터 영역을 확보(@8103 ~ ?)하고 그 주소(@5003)를 저장해요.
- array에 데이터가 3개가 들어가니 총 3개의 공간을 확보하고 이름을 할당해줘요.이름은 0부터 차근차근 증가해요.
- 메모리 데이터 영역에서 ‘a’를 검색해봐요.없다면 @5004에 데이터를 저장하고 @8103에 그 주소를 저장해요.
- 메모리 데이터 영역에서 ‘b’를 검색해봐요.없다면 @5005에 데이터를 저장하고 @8104에 그 주소를 저장해요.
- 메모리 데이터 영역에서 ‘b’를 검색해봐요.없다면 @5006에 데이터를 저장하고 @8105에 그 주소를 저장해요.
객체에서의 array 데이터 재할당
array를 할당해준 arr에
‘new data!’
라는 string 데이터를 재할당해주면 어떻게 될까요?let obj = {
a: 1,
arr: ['a', 'b', 'c'],
}
obj.arr = 'new data!';
주소 | 1002 | 1003 |
데이터 | 이름: obj | |
값: @5002 |
주소 | 5002 | 5003 | 5004 | 5005 | 5006 | 5007 |
데이터 | @7103 ~ ? | @8103 ~ ? | ‘a’ | ‘b’ | ‘c’ | ‘new data!’ |
주소 | 7103 | 7104 |
데이터 | 이름: a | 이름: arr |
값: @5005 | 값: @5007 |
주소 | 8103 | 8104 | 8105 |
데이터 | 이름: 0 | 이름: 1 | 이름: 2 |
값: @5004 | 값: @5005 | 값: @5006 |
주소 @5007에 데이터를 저장하고 그 주소를 @7104의 값에 저장해요.
그럼 @5003은 자신을 참조하는 변수가 하나도 없는데요.
데이터를 참조하는 변수의 개수를 참조카운트 라고 해요. @5003의 참조 카운트는 @7104에 저장되어있을 때 1이었다가 재할당으로 인해 @7014에 @5007이 지정된 순간 0으로 변해요.
참조카운트가 0인 메모리 주소를 가비지 컬렉터의 대상이 되는데요.
가비지 컬렉터는 특정 시점이나 메모리사용량이 포화상태에 이르면 자동으로 대상을 수거하는데요.
수거 후에는 다시 새로운 값을 할당할 수 있는 공간에 돼요.