[JavaScript] Primitive, Reference

Primitive

---

• 원시 값 또는 원시 자료형으로 불린다.
• Boolean, Number, String, Null, Undefined가 있다.

Example

조건 1. 하나의 포스트잇에는 하나의 원시 값만 적을 수 있다.

조건 2. 한번 사용한 포스트잇은 재사용하지 않는다.

let a = 10;
const b = a;

a = 30;

console.log(b); // 10

1. a 포스트잇에 10이라는 숫자를 적는다.
2. b 포스트잇에 10이라는 숫자를 적는다.
3. 새로운 포스트잇에 30을 적고, a 포스트잇으로 사용한다. (기존 a 포스트잇은 버려진다.)
4. b 포스트잇에 적힌 숫자는 여전히 10이다.

⇒ 원시 값은 값을 바꾸면 달라지고, 모양이 같으면 같고 다르면 다른 것이다.

Reference

---

• 참조 값 또는 참조 자료형으로 불린다.
• Object(Array, Function 포함)가 있다.

Example

조건 1. 하나의 포스트잇에는 하나의 정보만 적을 수 있고, 재활용하지 않는다.

조건 2. 참조 값 형태의 자료들은 양이 방대하여 포스트잇에 적을 수 없다.

조건 3. 참조 값 형태의 자료들은 별도 저장소에 보관해야 하며, 하나의 저장소에는 하나의 자료만 보관할 수 있다.

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

console.log(result); // false

1. 코드 첫 번째 줄, [1, 2, 3]이라는 자료는 포스트잇에 적을 수 없기 때문에, 첫 번째 저장소에 보관된다.
2. list1이라는 포스트잇에 첫 번째 저장소의 위치 정보를 적는다.
3. 코드 두 번째 줄, [1, 2, 3]이라는 자료는 포스트잇에 적을 수 없기 때문에, 두 번째 저장소에 보관된다.
4. list2라는 포스트잇에 두 번째 저장소의 위치 정보를 적는다.
5. result라는 포스트잇에 list1 포스트잇과 list2 포스트잇에 적힌 내용이 같은지를 판별하여 적는다. → 각각 다른 저장소의 위치 정보를 가지므로 false이다.

⇒ 배열을 만든다는 것은 메모리에 배열 정보를 전달하고 위치 값을 저장하는 것이기 때문에 입력된 내용과 상관없이 엄연히 다른 값이다.

const list3 = [ 1, 2, 3 ];
const list4 = list3;
const isSame = list3 === list4;
console.log(isSame); // true

list3는 배열을 만들지만, list4는 만들어진 배열을 그대로 담기 때문에 똑같은 위치 정보를 가지므로 true이다.

const person1 = {
  age: 10
};
const person2 = person1;
person1.age = 20;

console.log(person2); // 20

person2에 person1의 값을 담는 것이 아니라 위치 정보를 담는 것이기 때문에 수정된 내용이 그대로 반영된다.

const person = {
  age: 30
};
const something = person.age;
person.age = 50;

console.log(something); // 30

something에 담는 person.age는 위치 정보가 아닌 원시 값이기 때문에 수정된 내용이 반영되지 않는다.

P.S.

객체와 기본 데이터 타입의 본질적인 차이를 알게 되었다😃 모양을 만들고 기능을 구현하는 것만큼이나 코드의 기본적인 메커니즘을 이해하는 것이 무척이나 중요하다는 것을 느꼈다🙃

참고 문서

---

• Reference by 바닐라코딩 사전 학습 가이드