[JS] 원시 자료형과 참조 자료형(얕은 복사와 깊은 복사)

1. 특징

원시 자료형

• 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장
• 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사
• 변경 불가능한 값(읽기 전용)

 

참조 자료형

• 참조 자료형을 변수에 할당하면 메모리 공간에 주솟값이 저장
• 참조 값을 갖는 변수를 다른 변수에 할당하면 주솟값을 복사
• 변경 가능한 값

 

2. 얕은 복사와 깊은 복사

• 원시 자료형을 할당한 변수를 다른 변수에 복사를 하면 값 자체에 복사가 일어나기 때문에 하나의 값을 변경해도 다른 하나는 영향을 받지 않는다.
• 참조 자료형의 경우는 주솟값이 복사되어 같은 주소를 바라보기 때문에 값을 변경하면 그 주소를 바라보는 변수들의 값이 전부 바뀌게 된다.

 

 

 

 

2-1. 얕은 복사

 

배열 복사하기

slice()

let arr = [0, 1, 2, 3];
let newArr = arr.slice();
console.log(newArr); // [0, 1, 2, 3]
console.log(arr === newArr); // false

• 새롭게 생성된 배열(newArr)은 원본 배열과 같은 값을 가지고 있지만 다른 주소를 바라보게 된다.

newArr.push(4);
console.log(newArr); // [0, 1, 2, 3, 4]
console.log(arr); // [0, 1, 2, 3]

 

spread syntax

• 변수명 앞에 ... 을 붙여서 복사하는 방법
• slice()와 마찬가지로 다른 주소를 바라본다.

let arr = [0, 1, 2, 3];
let newArr = [...arr];
console.log(newArr); // [0, 1, 2, 3]
console.log(arr === newArr); // false

newArr.push(4);
console.log(newArr); // [0, 1, 2, 3, 4]
console.log(arr); // [0, 1, 2, 3]

 

객체 복사하기

Object.assign()

let obj = { name: "karina", age: 22 };
let newObj = Object.assign({}, obj);

console.log(newObj) // { name: "karina", age: 22 }
console.log(obj === newObj) // false

 

spread syntax

let obj = { name: "karina", age: 22 };
let newObj = {...obj};

console.log(newObj) // { name: "karina", age: 22 }
console.log(obj === newObj) // false

 

문제점

• 참조 자료형 내부에 참조 자료형이 중첩되어 있는 경우, 내부의 참조 자료형은 여전히 같은 주솟값을 참조하게 된다.(복사가 한 단계만 일어남)

 

2-2. 깊은 복사

• JSON.stringify()로 참조 자료형을 문자열 형태로 변환하고, JSON.parse()로 문자열의 형태를 객체로 반환하는 방법

let arr = [1, 2, [3, 4]];
let newArr = JSON.parse(JSON.stringify(arr));

console.log(arr); // [1, 2, [3, 4]]
console.log(newArr); // [1, 2, [3, 4]]
console.log(arr === newArr) // false
console.log(arr[2] === newArr[2]) // false

 

예외 케이스

• 중첩된 참조 자료형 중 함수가 포함되어 있을 경우 함수가 null로 바뀌게 된다.

 

2-3. 외부 라이브러리 사용

• lodash, ramda

const lodash = require('lodash');

let arr = [1, 2, [3, 4]];
let newArr = lodash.cloneDeep(arr);

console.log(arr); // [1, 2, [3, 4]]
console.log(newArr); // [1, 2, [3, 4]]
console.log(arr === newArr) // false
console.log(arr[2] === newArr[2]) // false