쯔이's Dev

JS(4). 객체선언 본문

JS/변수선언

JS(4). 객체선언

jjhim531 2024. 12. 24. 18:52
반응형

**스프레드 연산자(...)**를 사용하여 배열과 객체를 복사하거나 병합하는 방법이다. 

members = [
    "최지원",
    "김지원",
    "이지원",
    "박지원",
    "남궁지원"
]

let member2 = [
    ...members
]

let choi = {
    name : "jiwon",
    age : 21,
    gender : "남",
}

choi = {
    ...choi,
    age : 20
}

let choi2 = {
    ...choi
}

console.log(choi2)

 

let original = { name: "Alice", age: 30 };
let copy = { ...original, age: 25 }; // age 속성을 업데이트
console.log(original); // { name: "Alice", age: 30 }
console.log(copy);     // { name: "Alice", age: 25 }

 
여기서 주의할 점은  const로 선언했다면 어떨까?라는 점이다.

const의 의미

  • const는 변수의 참조(reference)를 고정합니다.
  • 즉, 변수가 가리키는 메모리 주소가 바뀌지 않는다는 의미입니다.
  • 하지만, 참조된 객체 내부의 프로퍼티는 변경 가능합니다.

객체 내부의 프로퍼티는 변경 가능합니다. 
이유는 객체의 메모리 주소는 그대로 유지되기 때문입니다
 

  • const는 참조를 고정할 뿐, 참조된 객체의 내용은 수정 가능합니다.
  • 객체의 프로퍼티를 변경하는 것은 주소가 아닌 객체 내부의 데이터를 바꾸는 작업입니다.

 
하지만 객체 자체를 재할당하는 것은 불가능합니다.

const choi = {
    name: "jiwon",
    age: 21,
    gender: "남",
};

// 객체 프로퍼티 변경
choi.age = 20; // ✅ 가능
console.log(choi); // { name: "jiwon", age: 20, gender: "남" }

// 객체 자체 재할당 시도
choi = { name: "newName", age: 30 }; // ❌ TypeError: Assignment to constant variable.

 

  • choi.age = 20;:
    • const로 선언되었지만, 객체의 프로퍼티는 변경 가능합니다. 참조 자체가 고정되었을 뿐, 내부 값은 변경할 수 있습니다.
  • choi = {...}:
    • choi 자체를 새로운 객체로 재할당하려고 하면 에러가 발생합니다. 이는 const가 참조를 고정하기 때문입니다.
const person = { name: "Alice", age: 25 };

// 새로운 객체를 재할당하려고 하면 에러 발생
person = { name: "Bob", age: 30 }; // ❌ TypeError: Assignment to constant variable.

만약 객체내부의 프로퍼티의 변경까지 막고 싶다면 Object.freeze를 사용하면 된다.
Object.freeze 특징:

  • 객체의 프로퍼티 수정 및 추가/삭제를 모두 막습니다.
  • **얕은 동결(Shallow Freeze)**이므로, 중첩 객체는 여전히 수정 가능합니다.
const choi = {
    name: "jiwon",
    age: 21,
    gender: "남",
};

Object.freeze(choi);

choi.age = 20; // ❌ 변경 불가
console.log(choi.age); // 21 (변경되지 않음)

 

const person = Object.freeze({
    name: "Alice",
    details: {
        age: 25,
        address: "123 Main St",
    },
});

// 최상위 속성 변경 시도 (실패)
person.name = "Bob"; // ❌ 실패 (무시됨)
console.log(person.name); // "Alice"

// 중첩 객체 속성 변경 시도 (성공)
person.details.age = 30; // ✅ 변경됨
console.log(person.details.age); // 30

중첩 객체까지 동결하려면 **deepFreeze**와 같은 사용자 정의 함수가 필요합니다

728x90
반응형

'JS > 변수선언' 카테고리의 다른 글

JS(3). undefined VS null  (0) 2024.12.23
JS(2). == vs ===  (0) 2024.12.22
JS(1) - 변수선언  (0) 2024.12.21