참조 자료형과 데이터 복사

• 원시타입 자료형은 변수에 값 자체를 저장한다. (string, number, boolean, null, undefined, binInt...)
  값을 복사할 때 데이터 값을 복사하기 때문에 원래의 변수에는 영향이 가지 않음.

• 참조자료형은 원시 자료형(Primitive type)이 메모리에 값을 할당하는 것과는 달리 주소값을 저장함. (참조타입 자료는 배열, 객체, 함수와 같은 것들이 있음.)
• 참조 타입 자료형은 heap에 연결되어 있고, heap의 주소값을 저장한다. 값을 조회하면 저장된 주소값을 보고 찾아 간다.
• 값을 복사할때는 주소 값을 복사하기 때문에 복사된 값은 같은 주소를 가리키게 된다.
  따라서, 값을 변경하게 되면 같은 주소의 값을 변경하게 되어 원래 데이터도 같이 변경된다.

let arr = [1,2,3,4,5];
let arr2 = arr;
arr2.pop() /* 5 */
console.log(arr) /* [1,2,3,4]*/
arr2[3] = 7
console.log(arr) /*[1,2,3,7]*/

• 참조자료형 데이터를 복사할때 주로 Array.prototype.slice, Spread Operator, Object.assign 등의 메소드를 활용하여 복사 한다.(얕은복사를 수행한다. 깊은값은 복사하지 못함.)
• 위와 같은 메소드 들은 내부적으로 iterator-looping으로 값을 복사한다.
• JSON.parse & JSON.stringify를 활용하여 깊은값 까지 복사 할 수 있다.
  JSON.stringify는 입력 값으로 넘어온 데이터를 문자로 변형을 시켜주는 메소드, JSON.parse는 변형된 문자를 다시 원래 객체로 되돌려주는 역할. 객체 순환을 통해 값을 옮겨담는 과정이 아닌, 문자열로 변경 후 그것을 다시 해석해 객체로 변경하는 과정이라고 한다.
• JSON.stringify 는 무한 사이클을 갖는 구조를 변경하지 않고 에러를 뱉는다.(function도 바꾸지 못함)

const arr = [1, 2, [3, 4]];
const arr2 = JSON.parse(JSON.stringify(arr));
console.log(arr === arr2) /* false */
arr2[2].push(5) /* 3 */
console.log(arr) /* [1, 2, [3, 4]] */
console.log(arr2) /* [1, 2, [3, 4, 5]] */

참고한곳