1️⃣ 원시자료형 vs 참조 자료형

• 자료형 ( type ) : 값( value )의 종류
  • 원시 자료형 : num, str, bool, undefined, null
  • 참조 자료형 : 배열 ( arr ), 객체 ( obj ), 함수 ( fun )
• 원시자료형의 특징
  • 변수에 할당 ➡️ 메모리 값 자체에 저장 ( num = 20 ) ex > 사물함 번호❗️
  • 원시값을 갖는 변수를 다른변수에 할당하면 ➡️ 원시값 자체가 복사됨
  • 변경 불가능한 값 ( immutable value ) + 읽기전용 ( read )
    • 높은 신뢰성을 가질 수 있는 요인
      
• 참조 자료형의 특징
  • 변수에 할당 ➡️ 메모리 값에 주솟값이 저장 ( a = [1,2,3] )
  • 참조값을 갖는 변수를 다른 변수에 할당하면 ➡️ 주솟값 복사
  • 변경 가능한 값 ( mutable value ) ➡️ 같은 주소를 가지고 있기 때문
    

• javascript 참조 자료형 저장 방식
  • 특별한 저장 공간( heep )에 참조 자료형 저장
  • 그 특별한 저장공간의 주소를 메모리값에 저장
• 가비지 콜렉터 ( gabage collector )
  • 사용하지 앟는 값을 자동으로 메모리에서 삭제
    let num = 20 ;
    num = 30 ; 인 경우
  • 변수에 다른 값을 재할당 ➡️ 원시 값 자체가 변경된 것이 아니라 새로운 원시 값을 생성 ( 변수가 다른 메모리 공간을 참조 )

2️⃣ 얕은복사 vs 깊은복사

• 얕은 복사( shallow copy ) : slice(), Object.assign(), spread syntax 등의 방법으로 참조 자료형을 복사하면, 중첩된 구조 중 한 단계까지만 복사
• 원시자료형의 복사 : 원시 자료형을 할당한 변수를 다른 변수에 할당 ➡️ 값 자체의 복사
  • 값 자체가 복사된다는 것 = 둘 중 하나의 값을 변경해도 다른 하나에는 영향 X
  • ✔️ 주소값이 다르기 때문

• 참조자료형의 복사 : 임의의 저장공간(heep) 에 값을 저장
  • 그 저장공간을 참조하는 주소를 메모리에 저장
  • 다른 변수에 할당할 경우 값 자체가 아닌 메모리에 저장되어 있는 주소가 복사

3️⃣ 배열 복사하기

• slice

  • ( arr === copiedArr ) // false " 배열을 복사했는데 주소값이 다르다 !"
    • 배열 내장 메서드인 slice()를 사용하면 원본 배열을 복사
    • 주소값이 아닌 배열 자체만 복사하여 다른 주소값에 새롭게 변수 생성
    • 복사한 배열에 요소 추가 ➡️ 원본은 변하지 X ( 주소값이 다르기 때문 )

• spread syntax ( 배열 펼치기 )

  • 배열이 할당된 변수명 앞에 ... 을 붙여주는 방법으로 배열 복사

  

  • ❗️ [ ...arr ] : []로 감싸주지 않으면 요소만 펼쳐짐
    

  • slice()와 동일하게 배열이 복사됨을 알 수 있다 ( 주소값 다르게 )

4️⃣ 객체 복사하기

• Object.assign()

  

• spread syntax
  • spread syntax는 배열뿐만 아니라 객체를 복사할 때도 사용

📌 예외상황 : 참조 자료형 내부에 참조 자료형이 중첩되어 있는 경우

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

  • 참조자료형 내부 참조자료형은 주소가 동일하게 복사됨
    ➡️ 참조자료형 내부 참조자료형의 객체를 수정하면 원본에도 영향을 미침
    ➡️ 깊은 복사의 필요성 !

5️⃣ 깊은 복사

• 깊은 복사 : 참조 자료형 내부에 중첩되어 있는 모든 참조 자료형을 복사하는 것
  but ) javascript 내부에는 깊은 복사를 할 수 있는 방법 존재 X

• JSON.stringify()와 JSON.parse()

  • JSON.stringify() : 참조 자료형을 문자열 형태로 변환하여 반환
  • JSON.parse() : 문자열의 형태를 객체로 변환하여 반환

📌 예외상황

• 대표적인 예로 중첩된 참조 자료형 중에 함수가 포함되어 있을 경우
  위 방법을 사용하면 함수가 null로 바뀌게 됨.
  따라서 이 방법 또한 완전한 깊은 복사 방법이라고 보기 어렵다 !!
  ➡️ 외부라이브러리를 사용하여 해결

• 외부 라이브러리 사용
  완전한 깊은 복사를 반드시 해야 하는 경우라면,
  node.js 환경에서 외부 라이브러리인 lodash, 또는 ramda를 설치

🌟

얕은 복사의 한계

• 참조자료형의 내부 참조자료형까지 복사 X ( 원본에 영향을 미침 )

깊은 복사의 한계

• JSON.stringify()와 JSON.parse() : 중첩 참조자료형에 함수 포함 ➡️ null값이 됨 ( 함수 복사 X )

📌 완벽한 깊은 복사를 하려면 ?

• 외부 라이브러리인 node.js 환경에서 외부 라이브러리인 lodash, 또는 ramda를 설치하여 복사하자