원시타입의 값 전달 & 참조타입의 주소 전달, 얕은복사와 깊은복사

원시타입과 객체타입의 가장 큰 차이점

• 원시타입의 값인 원시값은 변경 불가능한 값이다.
• 객체(참조)타입의 값인 객체는 변경 가능한 값이다.

원시타입의 값은 값 그 자체이므로 실제값이 저장된다.
객체타입의 값은 객체를 변수에 할당하면 변수( 확보된 메모리 공간 )에는 참조값이 저장된다.

// 원시타입
const a = 1;// -=> 값 그 자체

// 객체(참조)타입
const a = { a : 1 }; // 객체의 메모리 주소 값을 가지고 참조하므로 참조 타입

a.a=20;

console.log(a); // 20 ( 재할당 가능 )
// { } 메모리주소

얕은 복사(shallow copy), 깊은 복사(deep copy)

얕은 복사(shallow copy)는 가장 상단에 객체가 새로 생기고 내부 객체는 그대로 참조가 유지되는 복사를 말한다.

• spread operator
• Object.assign()
• slice

깊은 복사(deep copy)는 내부객체까지 새로 만들어 복사하는 것을 말한다.

깊은 복사의 경우에는 객체를 새롭게 생성하고 그 안의 내용까지 재귀적으로 새롭게 생성하게 된다.

따라서 깊은 복사를 하게 되면, 처음에 만들었던 객체와 복사된 객체가 전혀 달라지기 때문에 어느 한쪽을 수정한다고 해서 다른 한쪽이 영향 받지않는다.

• JSON.stringify() ⇒ parse()
• lodash 라이브러리 이용

// 1. [shallow copy] 얕은 복사
const obj = {
  a: 1,
  b: 2,
  c: {
    x: 'x',
    y: 'y',
    z: 'z',
  },
};

const arr = [1, 2, obj];
--------------------------------------------
// 1-1. spread operator
const result1 = {
  ...obj
};

console.log(result1);
/* result1 = {
     a : 1,
     b : 2,
     c : {
     	x : 'x',
        y : 'y',
        z : 'z'
     }
}
*/
-------------------------------------------------
// 1-2. Object.assign()
const result2 = Object.assign(obj);
console.log('result2', result2);

result2.c.x = 'hello';

/* result2 = {
     a : 1,
     b : 2,
     c : {
     	x : 'hello',   // <= 속성값을 바꿀수있음
        y : 'y',
        z : 'z'
     }
}
*/
-------------------------------------------------
// 1-3. Array.slice()
const result3 = arr.slice(0);
console.log('result3', result3);

// 스터디까지 아직이해못함 더 공부해보긔

-------------------------------------------------------------------------------------------------

// 2. [deep copy] 깊은 복사
  
const obj2 = {
  a: 1,
  b: 2,
  c: {
    x: 'x',
    y: 'y',
    z: 'z',
  },
};


// 2-1. JSON.stringify() & JSON.parse()
const result4 = JSON.stringify(obj2);
console.log('result4' , result4);
/* {"a":1,"b":2,"c":{"x":"hello","y":"y","z":"z"}} 
==> 이렇게 값이 나오면 이것을 복사해서 json.parse() 안에 넣는다. */

const result5 = JSON.parse('{"a":1,"b":2,"c":{"x":"x","y":"y","z":"z"}}');
console.log('result5', result5);
/* result5 = {
     a : 1,
     b : 2,
     c : {
     	x : 'x',
        y : 'y',
        z : 'z'
     }
}
*/

-------------------------------------------------
  
// 2-2. lodash library cloneDeep();
  /* cloneDeep()을 쓸때는 자바스크립트 맨 위에
  ' import { cloneDeep, result } from 'lodash'; ' 를 넣어야 작동한다. */
const result6 = cloneDeep(obj2);
console.log('result6', result6);
/* result6 = {
     a : 1,
     b : 2,
     c : {
     	x : 'x',
        y : 'y',
        z : 'z'
     }
}
*/