🧵 자료형에 따른 분류

1. String
2. Boolean
3. Number
4. Null
5. Undefined
6. Object
7. Symbol

🧵 작동원리에 따른 분류

1. Primitive
2. Reference

💍 Premitive

초기의, 원시적인 단계의

🏐 단순히 값이 같으면 동일하게 판별

const string1 = "string";
const string2 = "string";

const result = string1 === string2;

console.log(result); // ?

String은 Primitive(원시값)이다.
원시값의 모양이 같으면 같은 값으로 단순하게 판별한다.

🏐 할당된 값은 그대로

let a = 10;
const b = a;

a = 30;

console.log(b); // 10

a가 10인 시점에서 b에 값을 한번 할당했기 때문에 a의 값이 변경되어도 다시 a를 할당하지 않는 한b는 변경되지 않는다.

💎 Reference

(참조) 방식으로 작동하는 자료형

• Object
• (Array, Function)
  
  

🏐 변수 생성 과정

const a = { id: '1', count: 0};
const b = { id: '2', count: 0};
const c = b;

1. 메모리에 { id: '1', count: 0} 객체 생성
2. 해당 객체의 참조값이 변수 a에 할당
3. 동일하게 b객체 생성및 할당
4. b 변수의 참조값이 c 변수에 복사되어 할당

b와 c변수는 동일한 참조값을 가지므로 동일한 오브젝트를 가리키고 있다.

🏐 동일한 참조값을 가지면 변경 값이 동일하게 적용

const a = { id: '1', count: 0};
const b = { id: '2', count: 0};
const c = b;
b.count = 1;
console.log(b,c);
//{ id: '2', count: 1}
//{ id: '2', count: 1}

b와 c는 동일한 참조값을 가지므로 변경된 값이 그대로 적용된다.

🏐 값이 같아 보이더라도 참조값이 다르면 다른것으로 판별

const list1 = [1, 2, 3];
const list2 = [1, 2, 3];

const result = list1 === list2;

console.log(result); // false

🏐 동일한 참조값을 가지면 값의 변경이 동일하게 적용

const ref1 = {
  num: 10,
};
const ref2 = ref1;

ref1.num = 20;

console.log(ref2); // 20

ref1과 ref1의 참조값은 동일하므로,
ref1의 num값을 변경했을 때 ref2의 참조값인 ref1의 num역시
변경된 값인 20으로 동일하게 적용된다.

🏐 배열 내부의 객체- shallow copy (spread operator)

const arr = [
  {id: '1', count: 0},
  {id: '2', count: 0},
];

const arr2 = arr;
const arr3 = [...arr];

• 생성된 오브젝트는 3개

  • 오브젝트 2개 + 배열 자체의 오브젝트 1개

• arr2는 arr와 동일한 참조값을 가진다.

• arr3은 Spread Operator로 얕은복사 shallow copy를 했기 때문에 새로운 배열을 생성하고 새로운 참조값이 할당된다.

• 그러나 배열 내부의 오브젝트는 동일한 참조값을 복사한다.

• 따라서 오브젝트가 변경되면 arr, arr2, arr3 모두에서 변경된 내용을 볼 수 있다.

• 하지만 arr2와는 다르게 arr3에서는 배열에 새로운 오브젝트가 추가되어도 볼 수 없다. 배열 오브젝트의 참조값은 다르기 때문이다.