일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 알고리즘
- 컴퓨터공학
- 프론트엔드
- react
- 솔리디티
- 리액트
- AWS
- kubernetes
- 쿠버네티스
- 이더리움
- CSS
- 타입스크립트
- 웹
- TypeScript
- k8s
- 백준
- 자바스크립트
- 백엔드
- es6
- JavaScript
- node.js
- 블록체인
- 가상화
- HTML
- BFS
- 파이썬
- 클라우드
- docker
- 이슈
- next.js
Archives
- Today
- Total
즐겁게, 코드
얼어붙어라! - 객체 불변화하기 본문
오늘은 객체에 담긴 값을 불변으로 만드는 방법에 대해 알아보도록 하겠습니다.
const person = {
name: "chanmin",
age: 25,
};
먼저 const
키워드로 선언한 변수에 객체 리터럴을 할당한 모습입니다.
이러면 객체가 불변 상태가 된 걸까요?
물론 아닙니다. 이렇게 const
변수에 객체를 할당하면 해당 객체의 참조 만이 불변값이 되어 새로운 객체를 할당하는 것이 불가능하고, 내부 프로퍼티를 변경하는 것은 여전히 자유롭게 가능합니다.
const person = {
name: "chanmin",
age: 25,
};
person.age = 100;
person.school = "KAU";
console.log(person);
// age 프로퍼티의 값은 변경이 가능합니다.
// school 이라는 프로퍼티를 새로 추가할 수도 있습니다.
// { name: 'chanmin', age: 100, school: "KAU" }
이번 글에서는 Object.preventExtensions()
, Object.seal()
, Object.freeze()
메서드를 통해 객체의 확장 및 수정을 변경하는 방법을 소개하도록 하겠습니다.
Object.preventExtensions()
Object.preventExtensions()
는 객체에 새로운 프로퍼티를 추가하는 것을 방지하는 메서드입니다.
const person = {
name: "chanmin",
age: 25,
};
// 1. 이제 person 객체는 확장 불가능 객체가 됩니다.
Object.preventExtensions(person);
// 2. 확장 가능 객체의 여부는 Object.isExtensible() 메서드로 확인합니다.
Object.isExtensible(person); // false
// 3. 확장 불가능 객체이므로 school 프로퍼티는 추가되지 않습니다.
person.school = "KAU";
console.log(person);
// { name: 'chanmin', age: 25 }
위 코드에서는 person
객체에 school
이라는 프로퍼티를 동적으로 추가하려고 시도했지만, Object.preventExtensions()
에 의해 객체를 확장하지 못한 모습입니다.
수행 가능한 동작들
- 객체를 읽고 쓰기
- 객체의 프로퍼티 수정하기
- 객체의 프로퍼티 삭제하기
Object.seal()
Object.seal()
은 객체를 읽고 쓰기(프로퍼티 값 갱신)만 가능하도록 만드는 메서드입니다.
const person = {
name: "chanmin",
age: 25,
};
// 1. 이제 person 객체는 프로퍼티를 읽고 쓰거나 삭제만 가능합니다.
Object.seal(person);
// 2. 확장 가능 객체의 여부는 Object.isSealed() 메서드로 확인합니다.
Object.isSealed(person); // true
// 3. 확장 불가능 객체이므로 school 프로퍼티는 추가되지 않습니다.
person.school = "KAU";
// 4. 읽고 쓰기만 가능하므로 프로퍼티의 삭제는 불가합니다.
delete person.name;
console.log(person);
// { name: 'chanmin', age: 25 }
수행 가능한 동작들
- 객체를 읽고 쓰기
- 객체의 프로퍼티 수정하기
Object.freeze()
Object.freeze()
는 객체를 읽기만 가능하도록 하는 메서드입니다.
const person = {
name: "chanmin",
age: 25,
};
// 1. 이제 person 객체는 프로퍼티를 읽고 쓰거나 삭제만 가능합니다.
Object.freeze(person);
// 2. 확장 가능 객체의 여부는 Object.isSealed() 메서드로 확인합니다.
Object.isFrozen(person); // true
// 3. 객체를 읽기만 가능하므로 school 프로퍼티는 추가되지 않습니다.
person.school = "KAU";
// 4. 읽기만 가능하므로 프로퍼티의 삭제는 불가합니다.
delete person.name;
// 5. 읽기만 가능하므로 프로퍼티의 추가도 불가능합니다.
person.name = "heejin"
console.log(person);
// { name: 'chanmin', age: 25 }
수행 가능한 동작들
- 객체의 프로퍼티 값 읽기
마치며
지금까지 객체 내부의 값을 불변(상수)화하는 방법을 알아봤습니다.
올해 실시된 자바스크립트 코딩테스트 중에서도 "객체를 읽기만 가능하도록 수정하시오" 라는 조건을 만난 적이 있었는데요, 오늘 다룬 불변화 메서드들에 대해 알아두시면 좋을 것 같습니다!
반응형
'💬 언어 > Javascript' 카테고리의 다른 글
HTMLCollection과 NodeList, 너흰 누구니? (1) | 2021.10.24 |
---|---|
자바스크립트 메모리 누수 방지 기법 (0) | 2021.09.12 |
keys, values, entries 메서드 사용하기 (0) | 2021.08.15 |
데이터 페칭 로직 우아하게 개선하기 (3) | 2021.06.14 |
너! 배열이 되어라! - Array.from() 메서드 사용하기 (1) | 2021.05.29 |
Comments
소소한 팁 : 광고를 눌러주시면, 제가 뮤지컬을 마음껏 보러다닐 수 있어요!
와!! 바로 눌러야겠네요! 😆