[ JS ] 원시값, 참조값, 얕은 복사, 깊은 복사

원시값 과 참조값

	원시값 (Primitive value)	참조값 (Reference value)
데이터 타입	문자, 숫자, boolean, null, undefined, symbol	배열, 객체, 클래스, 함수
값의 변경	변경 불가능한 값	변경 가능한 값
저장 형태	변수에 지정된 값을 직접 저장	변수에 값이 저장된 메모리의 주소를 저장

 

여기서 변경 불가능 하다는 것은 원시값 자체를 변경하지 못 한다는 것 변수의 값은 변경가능

 

원시값을 할당 받은 변수의 값 변경 예시

let test = 1;
let changeValue = test;
test = 4
console.log(test) // 4
console.log(changeValue) // 1

  → 변수의 메모리에 저장된 값을 변경

 

참조값을 할당 받은 변수의 값 변경 예시

let arr = [1,2,3,4];
let result = arr
arr.push(5)

console.log(arr)    // [1,2,3,4,5]
console.log(result) // [1,2,3,4,5]

→ 배열이 저장된 메모리주소를  변수 arr 에 저장

→ result 에도 메모리 주소를 저장

→ arr.push(5) 는 arr 이 가르키는 메모리주소에 있는 값을 변경

→ result 와 arr 이 가르키는 메모리주소가 같으므로 같은 값을 출력

 

얕은 복사 (shallow copy) 와 깊은 복사 (deep copy) 

객체의 얕은 복사  = 복사본이 원본 객체와 같은 메모리 주소를 참조하는 복사

얕은 복사예시

// 배열
const a = [1, {name: "test"}]
const b = Array.from(a)

console.log(a === b) // false
console.log(a[0] === b[0]) // true
console.log(a[1].name === b[1].name) // true

// 값을 변경
a[1].name = "change"
a[0] = 4

/* 
a 의 첫 번째 값이 원시값이므로 b에는 반영이 안되었지만
a 의 두 번째 값은 참조값이여서 b에도 반영됨
*/
console.log(a) // [4, {name: "change"}]
console.log(b) // [1, {name: "change"}]

  얕은 복사는 객체와 같은 타입의 값은 메모리의 주소를 복사하므로 위와 같이 변경사항이 반영됨

 

깊은 복사 = 복사본이 원본과 같은 메모리주소를 참조(공유)하지 않는 복사

깊은 복사 예시

const aList = ["noodles", { list: ["eggs", "flour", "water"] }];
const aListDeepCopy = JSON.parse(JSON.stringify(aList));

aList[1].list = ["rice flour", "water"];

/*
aList 의 두 번째 요소와 aListDeepCopy 의 두 번째 요소가 
같은 메모리주소를 공유하지 않으므로 변경된 사항이 반영이 안됨
*/
console.log(aList)         // ["noodles", { list: ["rice flour", "water"] }]
console.log(aListDeepCopy) // ["noodles", { list: ["eggs", "flour", "water"] }]

 

 

참고 자료

https://developer.mozilla.org/ko/docs/Glossary/Shallow_copy

https://developer.mozilla.org/ko/docs/Glossary/Deep_copy