[JavaScript] 기본형 데이터, 참조형 데이터

Mark·2022년 8월 9일
1
post-thumbnail

1. 불변값

  • 한 번 만들어진 값은 가비지 컬렉팅 당하지 않는 한 영원히 변하지 않는다.

변수, 상수

변수 영역의 메모리가 변경 가능한지?

불변성

데이터 영역의 메모리 변경이 가능한지? 이미 존재하는 데이터를 바꿀 수 있거나 새로 데이터를 만드는지?

기본형 데이터

한 번 저장된 기본형 데이터는 다른 값으로 변경이 불가능하다. 변경은 새로 만드는 동작을 통해서만 이뤄진다.
절대 한 데이터 주소 내의 값을 바꾸지 않고, 새 데이터 주소에 새 값을 만들어서 재할당한다.

기본형 데이터 = 불변값

  • Number
  • String
  • Boolean
  • Null
  • Undefined
  • Symbol
let a = "abc";
a = a + "def";
  • 변수 a에 문자열 ‘abc’를 할당한 이후 ‘def’를 추가한다.
  • 기존의 ‘abc’가 바뀌는 것이 아닌, 새로운 문자열 ‘abcdef’를 생성하고 변수 a에 저장한다.
let b = 3;
b = 7;
  • 변수 b에 3을 할당
  • 변수 b의 값을 7로 할당하고 싶을 경우 ? 기존에 할당된 3이 바뀌는 것이 아닌 7이 담긴 영역을 새로 만든다.
  • 즉, b는 새로 만든 7을 저장하게 된다.

2. 가변값

가변은 참조형 데이터 자체를 변경할 경우가 아닌, 내부 프로퍼티를 변경할 때만 성립한다.

참조형 데이터는 기본적 성질은 모두 가변값이다.

참조형 데이터와 기본형 데이터의 차이는 ‘객체의 변수(프로퍼티)영역'이 별도로 존재한다는 점이다.

데이터 영역에 저장된 값은 모두 불변값이지만 변수에는 얼마든지 다른 값을 대입할 수 있어서 참조형 데이터는 불변하지 않다고 한다.

let info = {
	name : "mark",
	age : "10"
}

1) 빈 공간을 확보하여 주소를 ‘info’로 정한다.

2) 여러 프로퍼티(key)로 이루어진 데이터 그룹이다. → 프로퍼티(key)들을 위한 변수 영역을 마련한다.

3) 그 영역의 주소들을 한 데이터 영역에 저장한다.

4) 프로퍼티 변수 영역에 key(’name’, ‘age’)값들을 지정한다.

5) 데이터 영역에 빈공간 2개를 확보해서 ‘mark’, ‘10’을 각각 저장한다.

6) 이 데이터 주소값을 프로퍼티 변수 영역의 ‘name’, ‘age’에 할당한다.

👉 참조형 데이터가 가변적인 이유?

데이터 영역에 저장된 값은 기본형과 똑같이 모두 불변값이다. 하지만 객체의 프로퍼티 영역이 있는 구조여서 다른 값들을 재할당할 수 있다. 여기서 info가 참조하고 있는 주소값은 달라지지 않으면서 객체의 프로퍼티는 다른 값을 가지게 된다.

3. 변수 복사 비교

기본형

let d = 10;
let e = d;
console.log(e)

1) 빈 공간에 변수 d를 지정한다.

2) 숫자 10이 데이터에 있는지 확인 후, 없을 경우 빈 공간에 저장한다.

3) 해당 데이터를 변수 d에 저장한다.

4) 복사란? 빈 공간에 변수 e를 지정하고 식별자 d를 검색해 값을 찾아 온 다음 e에 저장한다.

d = 25;
console.log(d) // 25
console.log(e) // 10

1) 숫자 20이 데이터에 있는지 확인 후 없으면 빈 공간에 저장한다.

2) 해당 데이터를 다시 변수 d에 할당한다.

3) d와 e가 다른 데이터를 참고하게 된다 → 이전 10 주소값은 그대로 있고, e에 의해 참조되고 있다 → 복사됨

참조형

let info = {
	name : "mark",
	age : "10"
};

let info2 = info;

1) 빈 공간에 변수 info를 지정

2) 데이터 그룹이기 때문에 프로퍼티들을 지정할 주소를 만든다.

3) 이 주소들을 담고 있는 데이터를 생성한다.

4) 프로퍼티 영역에 ‘name’, ‘age’ 변수를 지정한다.

5) 데이터 영역에 ‘mark’, ‘10’ 저장해서 각각 변수에 할당한다.

6) 복사 : 빈 공간에 변수 info2를 지정하고 식별자인 info가 참조하는 데이터를 저장한다.

info.name = "javascript"
console.log(info) //javascript
console.log(info2) //javascript
  • “javascript” 라는 데이터가 없기 때문에 새로 만든다.

  • 이를 프로퍼티 name에 저장한다.

  • info만 바꿔도 info2도 값이 바뀐 것을 확인할 수 있다.

info2 = {
	name : "mingu",
	age: "20"
}
console.log(info) //{ name: 'javascript', age: '10' }
console.log(info2) //{ name: 'mingu', age: '20' }

새로운 객체를 할당하면 새로운 객체가 생성되고, 새로운 참조값이 생긴다.

즉, 기본형 데이터와 같은 방식으로 재할당이 일어나게 된다.

참고 자료

https://velog.io/@jujusnake/Javascript-변수-선언과-데이터-할당

https://velog.io/@imjkim49/자바스크립트-데이터-타입-정리

profile
개인 공부 정리

0개의 댓글