1. Object

1-1. object 구성

• object는 key와 value의 한 쌍으로 여러개 가질 수 있음

let obj = {
  name: 'test',
  age: 5,
}

• 오브젝트는 너무 크기 때문에 변수 한 공간 안에 들어가기 너무 크다
  • 다른 공간에 key와 value가 저장되어 있음
    • 키마다 공간이 할당되어 있고 주소가 할당됨
  • 이 부분은 위치를 나타태는 메모리가 있음
    • 주민번호, 주소 처럼
    • key가 모여있는 메모리인 래퍼런스(주소값)을 123이라고 가정하면 obj의 변수는 123의 주소값을 가짐

1-2. object의 key 출력하기

코드

let obj = {
  name: 'test',
  age: 5,
}

console.log(obj.name)

결과

• obj.name을 하면 123이라는 주소값을 참조해 name의 값을 출력함

1-3. 다른 변수에 기존 object 할당하기

• let obj2 = obj

  • obj2에 obj를 할당하면 obj2라는 새로운 메모리 공간이 생김
  • 변수에 할당할 때는 변수에 들어있는 주소값이 복사되어 할당됨
  • 123이라는 주소값을 이용해 name을 가리킴
    

• console.log(obj2.name)

  • obj.name과 똑같은 출력값이 나옴

변수와 object의 차이점

• 변수 : 변수에 값이 들어있어서 다른 변수에 값이 들은 변수를 할당하면 값이 할당됨
  • number, string, boolean. null, undefined는 메모리에 값이 그대로 들어감
• object : object는 주소가 들어있어서 다른 object에 주소가 있는 object를 할당하면 주소가 할당됨

1-4. object의 value 값 변경하기

코드

obj.name = 'change'
console.log('-------')
console.log(obj.name)
console.log(obj2.name)

• obj.name을 변경하면
  • obj2도 가리키고 있기 때문에
  • change로 출력됨

결과

2. const object

• const는 한번 값을 할당하면 변경할 수 없음
• 하지만 const obj의 value 값은 어떻게 변경될까?

const obj의 전체 obj 바꾸는 것은 불가능

코드

const objC = {
  name: 'test',
  age: 5,
}

objC = {
  name: 'test2',
  age: 10,
}

결과

• obj 전체를 바꾸지 못하는 이유
  • objC가 가리키는 래퍼런스가 잠겨 있기 때문

object의 value를 바꾸는 것은 가능

• 래퍼런스는 잠겨있지만 래퍼런스가 가리키는 value값은 변경 가능
• object는 key와 value의 값이 다른 공간에 저장되어 있기 때문에 object 자체가 const여도 변경 가능

const objC = {
  name: 'test',
  age: 5,
}

objC.name = 'change'
console.log(objC.name)

* 정리

• object는 key와 value를 가지고 있음
• object는 변수가 달리 key와 value를 가지고 있는 메모리를 가리키는 래퍼런스(주소값)를 가짐
• const object는 object 전체를 바꿀 수 없음
  • 변수처럼 object 자체가 주소값을 가지고 있기 때문에 잠겨 있음
• 하지만 const object의 value는 바꿀 수 있음
  • const 변수와 다르게 const object가 가리키고 있는 메모리가 따로 있어서 value가 있는 메모리는 변경 가능함

해당 내용은 다음 자료를 참고했습니다.
자바스크립트 기초 1. 변수 | primitive 타입과 object의 차이점