[JavaScript] 원시 타입 vs 참조 타입

자바스크립트의 데이터 타입에는 크게 원시 타입과 참조 타입 두 가지로 나뉜다.

• 원시 타입 - 숫자(number), 문자열(string), 불리언(boolean), null, undefined, 심볼(symbol) 등
• 참조 타입 - 객체(object), 배열(Array), 함수(Function) 등

원시 타입

---

원시 타입의 값은 변수에 직접 저장되고, 값이 복사될 때 변수와 함께 복사된다. 이러한 특성 때문에 두 변수가 독립적인 값을 가진다.

let a = 10;
let b = a;

a = 20;

console.log(a); // 20
console.log(b); // 10

위 코드에서 변수 a가 값을 할당한 후, 변수 b에 a의 값을 할당한다. 하지만 a의 값을 변경하더라도 b의 값은 변경되지 않는다. 이는 변수 a와 b가 각각의 값을 가지고 있기 때문이다.

원시 타입은 불변성(immutability)의 특징을 가지고 있다.

참조 타입

---

원시 타입을 제외한 나머지는 참조 타입이다. 참조 타입의 값은 객체나 배열이 저장된 메모리 주소를 가리키는 포인터이다. 변수에 할당된 값은 메모리 주소이며, 이 주소를 통해 객체나 배열에 접근할 수 있다.

let person = { name: 'Joon', age: 30 };
let anotherPerson = person;

anotherPerson.age = 25;
console.log(person.age); // 25

위 예제에서 person 객체를 생성하고 이 객체를 anotherPerson 변수에 할당한다. 이때 anotherPerson 변수에 person 객체의 메모리 주소가 저장된다.

여기서 anotherPerson의 속성 age의 값을 변경하면 person 객체의 age 속성 값도 함께 변경된다. 이는 두 변수가 같은 객체를 가리키고 있기 때문이다.

값은 변수에 직접 저장되지 낳고, 메모리의 힙(heap)에 저장된다. 때문에 참조 타입의 값은 변수와 함께 복사되지 않으며, 변수가 참조하는 객체나 배열이 변경되면 변수의 값도 변경된다.

동일성과 동등성

---

동일성

동일성은 동일하다는 뜻으로 두 객체가 완전히 같은 경우를 의미한다. 이 말은 두 객체가 사실상 하나의 객체로 봐도 무방하며, 주소 값이 같이 때문에 두 변수가 같은 객체를 가리키게 된다.

const hero1 = {
  name: 'Batman'
};
const hero2 = {
  name: 'Batman'
};
 
hero1 === hero1; // => true
hero1 === hero2; // => false

동등성

동등성은 동등하다는 뜻으로 두 객체가 같은 정보를 갖고 있는 경우를 의미한다. 동등성은 변수가 참조하고 있는 객체의 주소가 서로 다르더라도 내용만 같으면 두 변수는 동등하다고 말할 수 있다.

onst one = {
  fruit: '🥝',
  nutrients: {
    energy: '255kJ',
    minerals: {
      name: 'calcium'
    }
  }
};

const two = {
  fruit: '🥝',
  nutrients: {
    energy: '255kJ',
    minerals: {
      name: 'calcium'
    }
  }
};

JSON.stringify(one) === JSON.stringify(two); // true

Reference
https://aiday.tistory.com/128
https://velog.io/@nomadhash/Java-Script-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC
https://steady-coding.tistory.com/534
https://inpa.tistory.com/entry/JS-%F0%9F%9A%80-%EA%B0%9D%EC%B2%B4-%EB%81%BC%EB%A6%AC-%EA%B0%92-%EB%B9%84%EA%B5%90
https://iskull-dev.tistory.com/160