[JS] 원시자료형 vs 참조자료형

Primitive type data

• string, number, boolean, null, undefined, symbol
• 객체가 아니면서 method를 가지지 않는다.
• 변수에는 하나의 데이터만 담는다. (value자체가 담김)

let num = 123;
let str = 'abc';
// 데이터의 크기와 무관하게 하나의 데이터만 담을 수 있다.

let copyNum = num;
console.log(copyNum); // 123 num값을 복사

copyNum = 12345; // 재할당
console.log(copyNum); // 12345
console.log(num); // 123

참조자료형과 다르게 복사 후 값을 재할당해도 원본데이터에 영향을 주지 않는다. = 깊은복사

---

Reference type data

• 원시자료형이 아닌 모든 타입 array, object, function
• 변수에 할당될 때 데이터가 아닌 메모리 주소가 저장된다.
• 데이터는 주소가 가리키는 곳, 동적으로 크기가 변하는 보관함(heap)에 저장된다.

얕은복사 (shallow copy)

참조값을 복사한다. 데이터가 같은 주소에 위치해 있으므로 한 데이터를 변경하면 다른 데이터도 바뀐다.

const obj = {key: 123};
const copyObj = obj;

copyObj.key = 'abc';

console.log(obj.key) // 'abc 
console.log(obj === copyObj) // true

깊은복사 (deep copy)

값 자체를 복사하여 다른 메모리 주소를 할당해, 한 데이터를 변경해도 다른 데이터는 유지된다.

• slice(), Object.assign({}, 원본객체), spread operator(...) 이용해 깊은 복사가 가능하다.

// # slice()
let arr = [1, 2, 3]
let copyArr = arr.slice();
console.log(arr === copyArr); // false

// # Object.assign({}, 원본객체)
let obj = {
  name : 'kim',
  age : 20,
  fav : {
    fruit : 'apple' ,
    num : 7 
  },
  study : ['JS', 'React']
}
let copyObj = Object.assign({}, obj)
console.log(obj === copyObj)

// # spread operator (...)
let copyArr2 = [...arr]
console.log(arr === copyArr2); // false

let copyObj2 = {...obj}
console.log(obj === copyObj2) // false

그러나 spread operator(...)와 Object.assign({}, 원본객체) 내부의 참조형 데이터는 얕은복사가 된다.

copyObj.name = 'park'
copyObj.fav.fruit = 'banana';

copyObj2.name = 'lee'
copyObj2.study.push('html');

내부의 원시타입데이터(name)는 깊은복사되고,
내부의 참조타입데이터인 객체(fav), 배열(study) 얕은 복사된 걸 알 수 있다.

• JSON.parse(JSON.stringify(data))을 이용하면 내부참조형타입까지 완전한 깊은복사를 할 수 있다.

let copyJSON = JSON.parse(JSON.stringify(obj))
copyJSON.study.pop();