primitive vs reference type

- 프롤로그

원시자료형과 참조자료형을 알아가기에 앞서 스택과 힙에 대해서 먼저 알아두고가는것이 다가가기 수월할것이다
스택(stack)은 '서랍장'이라고 예시해보겠다 물건을 정리할때 각기 서랍안에
양말,옷핀,지우개 등등 의 품목들을 넣어두는일!!!이라고 생각해보자 .
힙(heap)이란곳은 'city' 예시해보자 하나의 큰도시에 방대한 데이터를 저장
할수있다는것이다 .
여기서 두 자료형의 차이점을 알아보도록하자.

- 목차

1.원시자료형

2.참조자료형

• 얕은복사
• 깊은복사

1.원시자료형은 객체가 아니면서 method를 가지지 않는 데이터를 말한다.

• string , number , boolean , undefined , symbol , bigint
• 스택을 저장소라고 하고 각 저장칸의 크기는 정해져있기 때문에 한정적이다.
  위 그림내용을 예시로 들어보자.

let a = 10 
let b = a    
 //변수 a 에 할당된 10은 하나의 저장칸을 차지했다  여기서 원시자효형은
 값 자체가 복사하게된다. 즉, 변수 a과 변수 b는 동일하게 10이라는 값을 
 가지게 되는것이다.

2.참조자료형은 원시자료형이 아닌 모든 데이터 타입이다.

• array , object , function

• 참조자료형의 스택에는 데이터를 저장했던 주소지만 들어있고 실제 데이터는
  힙(heap)이라는 곳 저장된다.

  1)위 그림처럼 객체 복사하기위해서는 Object.assign()을 사용한다.

let a = { 
   name : 'John',
   age : 22
   }
let b = Object.assign({},a);
console.log(a===b)  // false 
--> 변수의 재할당으로 복사는 했지만 스택의 서랍장 주소지가 다르기때문에
a===b 물어본결과 false 가 나오게 된것이다.

> ```

2)배열복사하기

• slice() 내장함수 사용법

  let arr = [0,1,2,3,4];
  let addArr = arr.slice();
  console.log(arr = addArr) //false 
  --> 이또한 원본 배열과 같은 요소를 갖지만 각기 다른 주소값이다.

> slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 
새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않는다.

• spread문법의 사용법 (ES6에서 도입됨)

let arr = [0,1,2,3,4];
let newArr = [...arr];
console.log(newArr) // [0,1,2,3,4]
console.log(arr === newArr) // false
---> 이또한 새로운 배열(newArr)안에 배열을 펼쳐서 전달했음에도 각기 다른
주소값이기에 false 가 나오게된다.

위 참조 자료형 내부에 참조 자료형이 중첩되어 있는 경우, slice(), Object.assign(), spread syntax를 사용해도 참조 자료형 내부에 참조 자료형이 중첩된 구조는 복사할 수 없다. 참조 자료형이 몇 단계로 중첩되어 있던지, 위에서 설명한 방법으로는 한 단계까지만 복사하는것이 얕은 복사라고한다.

- JSON.stringify()와 JSON.parse()를 사용하게 되면 Javascript 깊은 복사와같은 결과물을 만들어 낼수있다.

• JSON.stringify()는 참조 자료형을 문자열 형태로 변환하여 반환하고, JSON.parse()는 문자열의 형태를 객체로 변환하여 반환한다. 먼저 중첩된 참조 자료형을 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

-JSON.stringify(value[, replacer[, space]]
-JSON.parse(text[, reviver])