Premitive & Reference (원시값과 참조값)
🧵 자료형에 따른 분류
- String
- Boolean
- Number
- Null
- Undefined
- Object
- Symbol
🧵 작동원리에 따른 분류
- Primitive
- 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;
- 메모리에 { id: '1', count: 0} 객체 생성
- 해당 객체의 참조값이 변수 a에 할당
- 동일하게 b객체 생성및 할당
- 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에서는 배열에 새로운 오브젝트가 추가되어도 볼 수 없다. 배열 오브젝트의 참조값은 다르기 때문이다.
Author And Source
이 문제에 관하여(Premitive & Reference (원시값과 참조값)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gygy/Premitive-Reference-원시값과-참조값저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)