변수 선언과 할당

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
  1. 변수 영역 @1002를 확보하고 이름을 obj라고 지정해요.
  1. 주소 @5002를 할당해요.
  1. object 데이터 이므로 이 주소에 영역 값을 저장해요. (@7103부터 ~~ 추가되는 방식)
  1. 확보된 주소(@7103 ~)에 이름 a와 b 를 지정해요.
  1. 메모리 데이터 영역에서 number 타입 1을 검색합니다. 없다면 @5003에 할당해요.
  1. 메모리 데이터 영역에서 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만 언급하려고 해요.
  1. 메모리를 @7104에 확보하고 이름을 arr로 설정해요.
  1. arr에 저장할 데이터가 array이니 데이터 영역을 확보(@8103 ~ ?)하고 그 주소(@5003)를 저장해요.
  1. array에 데이터가 3개가 들어가니 총 3개의 공간을 확보하고 이름을 할당해줘요.이름은 0부터 차근차근 증가해요.
  1. 메모리 데이터 영역에서 ‘a’를 검색해봐요.없다면 @5004에 데이터를 저장하고 @8103에 그 주소를 저장해요.
  1. 메모리 데이터 영역에서 ‘b’를 검색해봐요.없다면 @5005에 데이터를 저장하고 @8104에 그 주소를 저장해요.
  1. 메모리 데이터 영역에서 ‘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인 메모리 주소를 가비지 컬렉터의 대상이 되는데요.
가비지 컬렉터는 특정 시점이나 메모리사용량이 포화상태에 이르면 자동으로 대상을 수거하는데요.
수거 후에는 다시 새로운 값을 할당할 수 있는 공간에 돼요.