Object Mutation의 이해와 방지
JavaScript에서 객체의 상태를 변경하는 과정은 객체 변이(Object Mutation)라 불리며, 이는 객체의 속성을 직접 수정하는 것을 의미합니다. 객체 변이는 코드의 동시 실행 환경에서 문제를 야기할 수 있으며, 디버깅을 어렵게 만들 수 있습니다.
JavaScript의 데이터 타입
JavaScript는 두 가지 카테고리의 데이터 타입을 지원합니다: 기본형(Primitive)과 참조형(User-Defined) 데이터 타입.
기본형 데이터 타입
기본형 데이터 타입은 불변하며, 생성된 이후에는 변경할 수 없습니다. 여기에는 Number, Boolean, String, BigInt, Undefined, Null, Symbol이 포함됩니다.
참조형 데이터 타입
참조형 데이터 타입은 객체나 배열 등으로, 기본형을 조합하여 만들어지며, 이들은 변경 가능합니다. 참조형 데이터는 변이 가능한 특징을 지닙니다.
변수 할당과 재할당
기본형 데이터 타입 변수의 할당은 값의 복사를 통한 독립적인 저장을 의미합니다. 예를 들어:
var varA = 100;
var varB = varA; // varB는 varA의 복사본을 저장
varB를 변경해도 varA는 영향을 받지 않습니다.
JavaScript의 객체 변이
JavaScript에서 객체는 직접적으로 수정 가능한 방식으로 설계되었습니다. 이로 인해 같은 객체를 참조하는 여러 변수가 있을 때, 하나의 변화를 통해 모두가 영향을 받을 수 있습니다. 이는 코드의 복잡도를 증가시키고 예상치 못한 동작을 유발할 수 있습니다.
객체 변이 예시
객체의 속성을 추가하거나 수정할 때 발생할 수 있는 변이의 예:
const author = { id: 1, name: "Joydip Kanjilal" };
author.id = 2;
author.city = "Hyderabad, INDIA";
console.log(author);
객체 변이 방지 방법
객체 변이를 방지하기 위한 여러 방법이 존재합니다:
- 객체 복제:
Object.assign()또는 스프레드 연산자 사용. Object.seal()메서드: 속성 추가나 삭제를 방지.Object.freeze()메서드: 속성의 변경을 방지.
객체 복제
let originalObj = { x: 10, y: 100 };
let clonedObj = { ...originalObj };
clonedObj.x = 50;
console.log(originalObj.x, clonedObj.x);
Object.freeze() 사용
const author = { id: 1, name: "Joydip Kanjilal", city: "Hyderabad" };
Object.freeze(author);
author.city = "Bangalore"; // 변경되지 않음
console.log(author);
Object.seal() 사용
const author = { id: 1, name: "Joydip Kanjilal", city: "Hyderabad" };
Object.seal(author);
author.city = "Bangalore"; // 변경 가능
author.booksauthored = 3; // 추가 불가
console.log(author);
Object.defineProperty() 사용
const author = { id: 1, name: "Joydip Kanjilal" };
Object.defineProperty(author, "booksauthored", {
value: 3,
writable: false,
});
author.booksauthored = 5; // 변경되지 않음
console.log(author.booksauthored);
주요 정리
JavaScript는 객체 타입을 기본형과 객체형으로 나누며, 기본형 값은 변경 불가능하지만 객체는 생성 후에도 변경될 수 있습니다. 객체 변이에 대한 적절한 통제를 통해 버그를 줄이고 코드의 신뢰성을 높일 수 있습니다.
출처 : 원문 보러가기