Notice
Recent Posts
Recent Comments
Link
쯔이's Dev
JS(4). 객체선언 본문
반응형
**스프레드 연산자(...)**를 사용하여 배열과 객체를 복사하거나 병합하는 방법이다.
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 |