원시타입과 참조타입(feat. 얕은 복사와 깊은 복사)

자바스크립트에는 원시타입과 참조타입이 있다

 

원시타입(Primitive type)

• Number, String, Boolean, Null, Undefined, Symbol
• 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장한다.(메모리 크기 고정)
• 값이 절대 변하지 않는 불변성을 지니고 있어서, 재할당 시 값이 변하는 게 아니라 변수가 새로운 메모리를 가리키게 된다.

let a = 10;
a = 50;

 

기존 메모리에 있던 10이라는 값이 50으로 변경되는 것이 아니라
새로운 50이란 값을 메모리에 생성하고 a는 새로운 메모리(50)을 가리키게 된다.

 

let a = 1;
let b = a;

a = 2;

console.log(a); //2
console.log(b); //1
console.log(a === b); //false

 

새로운 변수 b에 a를 할당하게 되면 변수 b는 a의 값을 복사하여 새로 메모리에 담게 된다.

a 가 2로 재할당되면 2값을 담은 새로운 메모리가 생성되고 b에는 영향을 주지 않는다.

 

let a = 1;     -----------------------------------> a :1

let b = a;     -----------------------------------> b :1

 

 

a = 2;                                                       a:1 (얘는 이제 안가리킴)

                  ----------------------------------->  a:2

 

 

 

 

 

참조타입(Reference Type)

• 원시타입 외 나머지 - Object, 배열, 객체, 함수
• 원시타입과 다르게 변수의 크기가 동적으로 변해서 데이터 자체는 별도의 메모리 공간(heap)에 저장되며
  변수 할당 시에는 데이터에 대한 주소(힙 메모리의 주소값)가 저장된다.
  자바스크립트 엔진(call stack)은 변수가 가지고 있는 메모리 주소를 이용해 변수의 값에 접근한다.

 

복사를 하면 같은 메모리 주소를 가리키고 있기 때문에 같은 값을 가리킴

기존 변수나 복사된 변수에서 값을 재할당 하면 가리키는 값이 바뀜

const obj = { vaule: 1 }
const newObj = obj;

newObj.vaule = 2;

console.log(obj.vaule); // 2
console.log(obj === newObj); // true

 

 

 

 

얕은 복사

객체를 복사할 때 기존값과 같은 참조를 가리키고 있는 것

Object.assign 과 전개연산자 ... 를 이용하여 복사할 수 있다.

속성 a는 원시타입이라서 copy.a를 재할당하면  copy.a만 변경된다.
b는 참조타입 값이 들어가기 때문에 변경하면 obj 와 copy의 b가 가진 주소값이 동일하기 때문에 
둘 다 변경된다.

const obj = {
    a:1,
    b: {c:2},   
    d: [2,3]  
}

const copy = Object.assign({},obj);

copy.a = 7;
copy.b.c = 3;
copy.d = [4,5];

console.log(obj === copy);  //false
console.log(obj.b.c === copy.b.c);  //true
console.log(obj.d === copy.d);   //false


//obj
a: 1
b: {c: 3}
d: [2, 3]


//copy
a: 7
b: {c: 3}
d: [4, 5]

 

 

 

깊은 복사

원본과의 참조가 완전히 끊어진 복사, 객체 내부를 수정해도 같이 변경되지 않는다

재귀함수를 이용하거나  JSON.stringfy 으로 복사할 수 있다.

const obj = {
    a:1,
    b: {c:2},   
    d: [2,3]   
}

const copy = JSON.parse(JSON.stringify(obj));

copy.b.c = 3;
copy.d = [4,5];

console.log(obj === copy);  //false
console.log(obj.b.c === copy.b.c);  //false
console.log(obj.d === copy.d);   //false


//obj
a: 1
b: {c: 2}
d: [2, 3]

//copy
a: 1
b: {c: 3}
d: [4, 5]

 

 

 

 

https://velog.io/@nomadhash/Java-Script-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC

[Java Script] 원시타입과 참조타입 👀

 

https://velog.io/@th0566/Javascript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC

[Javascript] 얕은 복사, 깊은 복사

 

https://velog.io/@2pandi/Object.assign-%EC%82%AC%EC%9A%A9%EB%B2%95

Object.assign() 사용법

 

https://pozafly.github.io/javascript/shallo-copy-and-deep-copy/

JavaScript의 얕은 복사와 깊은 복사

 

이미지 출처

https://www.devbabu.com/primitive-and-reference-data-types-in-javascript/

Primitive and Reference Data types in JavaScript