[SEB FE 44] 원시 자료형과 참조 자료형

✍ 복습 자료

• 문자열

  원시 자료형이지만 배열처럼 인덱스로 문자열의 각 문자에 접근이 가능하다.
  하지만 배열과는 달리 인덱스에 직접 다른 문자를 할당하여 값을 변경할 수 없다.
  그 이유는 문자열도 원시 자료형이기 때문에 값을 변경할 수 없기 때문이다.

• 배열을 복사하는 방법

  • 배열 내장 메서드인 slice()를 사용하는 방법

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

    주소가 다르기 때문에 복사한 배열에 요소를 추가해도 원본 배열에는 추가되지 않는다.
    
    

  • ES6에서 도입된 spread문법

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

    결과적으로 slice() 메서드를 사용한 것과 동일하게 동작한다.
    
    
    
    
    

• 객체 복사하는 방법

  • 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

    
    

※ 예외

참조 자료형 내부에 참조 자료형이 중첩되어 있는 경우, slice(), Object.assign(), spread syntax를 사용해도 참조 자료형 내부에 참조 자료형이 중첩된 구조는 복사할 수 없다.

🎯 얕은 복사 VS 깊은 복사

1. 얕은 복사

slice(), Object.assign(), spread syntax 등의 방법으로 참조 자료형을 복사하면, 중첩된 구조 중 한 단계까지만 복사한다.

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로 바뀌게 된다. 따라서 이 방법 또한 완전한 깊은 복사 방법이라고 보기 어렵다.
  

• 완전한 깊은 복사를 반드시 해야 하는 경우 : 외부 라이브러리 사용

  node.js 환경에서 외부 라이브러리인 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