jh

• 원시 자료형의 참조 자료형의 종류와 특징

원시 자료형 : String, Number, Boolean, Undefined, Symbol ,Null

- 원시 자료형은 보관함인 변수에 하나의 데이터를 담는다

- 고정된 저장공간을 차지한다

- 

참조 자료형 : 원시 자료형이 아닌것들, 배열, 객체, 함수 

- 참조자료형은 변수에 할당할 때, 변수 값이 아닌 주소를 저장

- 여러개의 데이터를 담음 

가비지 콜렉터(garbage collector)

가비지 콜렉터는 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메로리를 해제하는 기능을 말한다. 더이상 사용되지 않는 메모리란 어떤 식별자도 참조하지 않는 메로리 공간을 의미한다. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로써 가비지 콜렉터를 통해 메모리 누수 (memory leak)를 방지 한다. 

• 얕은 복사와 깊은 복사

 얕은 복사와 깊은 복사

참조 자료형을 복사하는데에는 대략 3가지 방법이 있습니다. 얕은 복사(shallow copy), 깊은 복사(deep copy), 완전한 깊은 복사입니다.

얕은 복사는 slice(), Object.assign(), spread syntax 등을 이용해 참조 자료형을 복사하는 것입니다. 이 방법을 사용해 복사하면 원본과 복사된 참조 자료형이 같은 요소를 가지고 있지만, 다른 주소를 참조하게 됩니다. 따라서 서로 값을 변경해도 서로에게 영향을 주지 않게 됩니다.

하지만, 참조 자료형 내부에 또다른 참조 자료형이 중첩되어 있는 상태에서는 가장 외부에 있는 참조 자료형만 복사되고 내부에 존재하는 참조 자료형은 같은 주소를 참조하게 됩니다.

이런 경우에 내부에 존재하는 참조 자료형까지 모두 복사하는 것이 깊은 복사입니다. 그러나 자바스크립트 내부적으로 깊은 복사를 수행할 수 있는 방법은 존재하지 않습니다. 자바스크립트의 문법을 응용해서 깊은 복사와 동일한 결과물을 만들어 낼 수 있을 뿐입니다.

이 때 사용하는 방법이 JSON.stringfy()와 JSON.parse()입니다.

let arr = [1, 2, [3, 4]];

console.log(JSON.stringify(arr)) // [1,2,[3,4]]

console.log(JSON.parse(JSON.stringify(arr))) // console.log(arr)과 동일 //

let str = JSON.stringify(arr);

console.log(str[0]); // [ //

console.log(str[1]); // 1 //

console.log(str[2]); // 2 //

위 방법을 사용해 깊은 복사를 할 수 있지만, 여기도 예외가 존재합니다. 바로 중첩된 참조 자료형 중에 함수가 포함되어 있을 경우 복사되지 않고 null이 되어버립니다. 따라서 이 방법 역시 완전한 깊은 복사라고 하기는 어렵습니다.

완전한 깊은 복사가 꼭 필요하다면 node.js 환경에서 외부 라이브러리인 lodash, 또는 ramda를 설치하면 됩니다. lodash와 ramda는 각각 방법으로 깊은 복사를 구현해 두었습니다. 다음은 lodash의 cloneDeep을 사용한 깊은 복사의 예시입니다.

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