[JavaScript] 원시, 참고 자료형 / 얕은, 깊은 복사

1. 원시자료형, 참조 자료형의 종류와 특징

원시 자료형

• number
• string
• boolean
• null
• undefined

참조 자료형

• arr
• object
• function

원시 자료형	참조 자료형
변수에 할당하면 메모리 공간에 값 자체가 저장	변수에 할당하면 메모리 공간에 주소값이 저장
원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되서 전달	참조값을 갖는 변수를 다른 변수에 할당하면 주소값이 복사되어 전달
변경 불가능한 값(immutable value), 즉 한 번 생성된 원시 자료형은 읽기 전용(read only) 값	변경이 가능한 값(mutable value)

1 - 1 원시 자료형에서 재할당 방식

let num = 1; 이라는 변수 할당하고
num = 2; 로 재할당 할 경우 num이라는 변수가 처음 할당된 공간에서 1이 2로 재할당 되는게 아닌 새로운 num으로 새로운 공간을 확보한다. 그 후 재할당 받은 2를 그 공간에 넣어서 num = 2; 로 변경된다. 그 후 num = 1; 이 들어있던 가비지 콜렉터 기능으로 삭제 한다.

*가비지 콜렉터 : 사용하지 않는 값을 자동으로 메모리에서 삭제.

2. 얕은 복사, 깊은 복사

원시 자료형을 할당한 변수를 다른 변수에 할당하면 값 자체의 복사가 일어난다.
= 둘 중 하나의 값을 변경해도 다른 하나에는 영향을 미치지 않는다.
참조 자료형은 값 자체의 복사가 아닌 값이 저장 되있는 주소를 복사한다.
= 변수의 값이 변경되면 두 변수가 참조하고있는 주소의 값이 변경되기 때문에 두 변수 영향을 끼침.

2 - 1 얕은 복사

참조 자료형의 경우 원본값의 변경없이 다른 값을 변경하고 싶을때 배열 복사를 한다.

배열을 복사하는 방법 : slice() spread syntax

slice 메서트

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

spread syntax(변수명 앞에 ...)

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

• arr, copiedArr 둘다 값은 같지만 참조하는 주소를 새로 만들어 arr와 같은 내용을 넣었기 때문에 둘은 같지 않다(false)로 나온다.

객체를 복사하는 방법 : Object.assign() spread syntax

Object.assign()

let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = Object.assign({}, obj);

console.log(copiedObj) // { firstName: "coding", lastName: "kim" }
console.log(obj === copiedObj) // false

spread syntax(변수명 앞에 ...)

let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = {...obj};

console.log(copiedObj) // { firstName: "coding", lastName: "kim" }
console.log(obj === copiedObj) // false

참조 자료형 내부에 참조 자료형이 중첩되있는 경우에는 중첩 되있는 내부 참조 자료형까지는 복사가 불가능 하다.

2 - 2 깊은 복사

참조 자료형 내부에 중첩되어 있는 모든 참조 자료형을 복사한다.

함수가 없을 경우
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)를 사용

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