본문 바로가기
바닐라코딩 사전학습/JS

Primitive / Reference

by 꼬마보노 2021. 12. 27.

Primitive 타입 자료형

  • string
  • Boolean
  • Number
  • NUll
  • undefined
  • symbol

Primitive 타입 자료형은 값의 '모양'이 같다면 서로 같은 값이다.

let a = 10;
const b = a;

a = 30;

console.log(b);

위의 결과는 10이 나온다. 
변수(a)로 할당한 값(b)은 이후에 변수값(a)이 바뀌더라도 되돌아가서 할당한 값(b)을 바꾸지 않는다. let b = a;라도 같은 결과이다.
Primitive자료형은 값이 재할당되면(바뀌면) 기존메모리주소에 저장된 값을 변경하는 것이 아니라 새로운 메모리를 확보하여 값을 저장하고 변수에 새로운 값이 입력된 메모리주소를 다시 할당한다.

let a = 10;
let b = 20;
a = 20;

위의 코드는 a=20의 시점에서 새로운 메모리 공간을 확보하지 않고 20이 저장되어 있던 기존의 메모리 주소값을 할당한다. 즉, 위의 코드는 a와 b에 저장된 메모리 주소값이 동일해진다. 

let a = 10;
let b = 20;
a = 20;

 

Reference 타입 자료형

  • Object

참조방식으로 동작하는 자료형은 'Object (객체)' 하나뿐이다. JS에서는 함수와 배열도 객체와같이 작동하므로 포함된다.
참조방식은 동작하는 자료형은 변수에 해당 자료의 값(데이터)을 직접 저장하는것이 아닌 값의 '주소'를 저장한다.

const list1 = [ 1, 2, 3 ];
const list2 = [ 1, 2, 3 ];

const result = list1 === list2;

console.log(result); // ?

[1, 2, 3]이라는 배열을 첫번째 서랍장(메모리)에 저장 후 저장된 메모리의 '주소'를 list1에 저장한다. list2도 반복한다. list2에는 두번째 서랍장(메모리)의 '주소'를 저장한다.

배열은 참조타입이므로 같은 배열이라도 메모리힙에서 '각각 다른 저장공간을 갖고 저장'되고 각각 메모리힙의 주소가 다르고, 따라서 주소를 저장한 변수의 값도 다르게 된다.
list1과 list2는 서로 다른 주소값을 저장하고 있으므로 결과값은 false가 나온다.

 

**힙을 사용하는 이유: 객체는 용량이 갑자기 늘어날 우려가 있으므로 여유롭게 메모리공간을 잡아놓는 힙에 값을 저장한다.

 

const person1 = {
  age: 10
};
const person2 = person1;

person1.age = 20;

console.log(person2); // ?

객체를 생성 후 메모리에 저장하고 해당 메모리의 주소를 person1에 저장한다.
person1의 값(객체가 저장된 메모리 주소)를 person2에 할당한다.
person1.age = 20;을 통해 person1의 메모리위치에 있는 자료의 age속성을 20으로 수정한다.
결과값은 {age:20}이 나오게 된다.
참조방식의 자료형을 담은 변수는 주소가 담기게 되는데 JS에서 해당 주소를 출력하지 않고 해당주소에 있는 값을 출력해준다.