원시 자료형(Primitive type)
number, string, boolean, undefined, null 타입의 자료형
참조 자료형(Reference type)
배열, 객체, 함수 등 원시 자료형이 아닌 모든 자료형
-> 원시 자료형과 참조 자료형의 특징
1. 값 자체를 저장 VS 주소값을 저장
-
원시 자료형을 변수에 할당하면 값 자체가 할당된다.
-
참조 자료형은 힙(heap)이라는 특별한 저장 공간에 저장한 후 참조(refer)한다.
2. 원시 값 자체를 복사 VS 주소값을 복사
let num = 20;
let copiedNum = num;원시 자료형은 값 자체가 복사됨.
let arr = [0,1,2,3];
let copiedArr = arr;참조 자료형은 주소값이 복사됨.
--> 원시 자료형은 원본에 다른 값을 재할당해도 복사본에 영향을 미치지 않지만 참조 자료형은 원본을 변경하면 복사본도 영향을 받음.
3. 변경 불가능한 값 VS 변경이 가능한 값
한 번 생성된 원시 자료형 값은 변경 불가능.
변수에 다른 값을 재할당해도 변수가 다른 메모리 공간을 참조한다.
남아있는 값을 삭제하는 기능을 가비지 콜렉터(Garbage Collector)라고 한다.
참조 자료형은 변경 가능한 값이다.
크기가 일정하지 않은 참조 자료형은 힙공간에 주소값을 저장하고 있기 때문에 변경이 가능하도록 설계됨.
배열 복사하기
slice()
let arr = [0, 1, 2, 3];
let copiedArr = arr.slice();
console.log(copiedArr); // [0, 1, 2, 3]
console.log(arr === copiedArr); // falseslice()를 사용해서 만든 배열을 원본 배열과 요소는 같지만 참조하는 주소는 다르다. 따라서 복사한 배열에 요소를 추가해도 원본은 변경되지 않는다.
copiedArr.push(4);
console.log(copiedArr); // [0, 1, 2, 3, 4]
console.log(arr); // [0, 1, 2, 3]spread syntax
배열이 할당된 변수명 앞에 ... 을 붙여주면 된다. 배열을 펼치면 배열의 각 요소를 확인할 수 있다.
let arr = [0, 1, 2, 3];
console.log(...arr); // 0 1 2 3
객체 복사하기
Object.assign()
let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = Object.assign({}, obj);
console.log(copiedObj) // { firstName: "coding", lastName: "kim" }
console.log(obj === copiedObj) // falsespread syntax
let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = {...obj};
console.log(copiedObj) // { firstName: "coding", lastName: "kim" }
console.log(obj === copiedObj) // false그러나 참조 자료형 내부에 참조 자료형이 중첩된 구조는 복사할 수 없다
let users = [
{
name: "kimcoding",
age: 26,
job: "student"
},
{
name: "parkhacker",
age: 29,
job: "web designer"
},
];
let copiedUsers = users.slice();
console.log(users === copiedUsers); // false
console.log(users[0] === copiedUsers[0]); // true
이처럼 slice(), Object.assign(), spread syntax 등의 방법으로 참조 자료형을 복사하면, 중첩된 구조 중 한 단계까지만 복사한다. 이것을 얕은 복사(shallow copy)라고 한다.
깊은 복사
깊은 복사는 참조 자료형 내부에 중첩되어 있는 모든 참조 자료형을 복사하는 것을 말한다.
그러나 JavaScript 내부적으로는 깊은 복사를 수행할 수 있는 방법이 없다. 따라서 Javascript의 다른 문법을 이용해야 한다.
JSON.stringify()와 JSON.parse()
JSON.stringify()는 참조 자료형을 문자열 형태로 변환하여 반환하고, JSON.parse()는 문자열의 형태를 객체로 변환하여 반환한다.
const arr = [1, 2, [3, 4]];
const copiedArr = JSON.parse(JSON.stringify(arr));
console.log(arr); // [1, 2, [3, 4]]
console.log(copiedArr); // [1, 2, [3, 4]]
console.log(arr === copiedArr) // false
console.log(arr[2] === copiedArr[2]) // false하지만 중첩된 참조 자료형 중에 함수가 포함되어 있을 경우 위 방법을 사용하면 함수가 null로 바뀌게 됩니다. 따라서 이 방법 또한 완전한 깊은 복사 방법이라고 보기 어렵다.
외부 라이브러리
완전한 깊은 복사를 해야하면 외부라이브러리인 lodash, ramda를 이용해야한다.
--> lodash이용한 예시
const lodash = require('lodash');
const arr = [1, 2, [3, 4]];
const copiedArr = lodash.cloneDeep(arr);
console.log(arr); // [1, 2, [3, 4]]
console.log(copiedArr); // [1, 2, [3, 4]]
console.log(arr === copiedArr) // false
console.log(arr[2] === copiedArr[2]) // false