[JavaScript] 불변 객체가 필요한 이유

코어자바스크립트 1장 데이터 타입을 넘기나 했는데 갑자기 헷갈리는 개념이 생겨서 다시 제자리 걸음을 하게 되었다.

불변 객체란 변경할 수 없는 객체를 뜻한다.

이전 포스트에 언급했듯이, 참조형 데이터의 가변성은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립한다. 즉, 객체의 내부 프로퍼티를 변경하거나 새로운 값을 할당하려면, 기존 객체는 변하지 않고 새로운 객체를 만들어야 한다. 이는 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않는다는 특성을 갖는다.

그렇다면 내부 프로퍼티를 변경할 일이 있을 때마다 매번 새로운 객체를 만들어 재할당해야 객체의 불변성을 확보할 수 있을 텐데, 어떤 상황에서 불변 객체가 필요할까?

값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우가 자주 발생한다. 바로 이때 불변 객체가 필요하다.

💡 불변 객체가 필요한 이유

🔍 객체의 가변성에 따른 문제점

var user = { 
    name: "Alice",
    age: 30
};

var changeName = function (user, newName) {
    var newUser = user;
    newUser.name = newName;
    return newUser;
};

var user2 = changeName(user, "Jung");

if (user !== user2) {
    console.log("유저 정보가 변경되었습니다.");
}

console.log(user.name, user2.name); // Jung Jung
console.log(user === user2); // true

위 코드에서는 changeName함수가 새로운 객체를 생성하지 않고, 원본 객체 user를 직접 수정하고 있다. 결과적으로 user와 user2는 동일한 객체가 되어 불변 객체의 원칙을 위반한다.

불변 객체로 만들어 문제를 해결하는 방법을 알아봐야겠다!

🔍 객체의 가변성에 따른 문제점의 해결 방법

var user = { 
    name: "Alice",
    age: 30
};

var changeName = function (user, newName) {
    // 새로운 객체를 생성하여 반환
    var newUser = { ...user, name: newName };  
    return newUser;
};

var user2 = changeName(user, "Jung");

if (user !== user2) {
    console.log("유저 정보가 변경되었습니다.");
}

console.log(user.name, user2.name); // Alice Jung
console.log(user === user2); // false

changeName 함수가 원본 객체를 복사하여 새로운 객체를 생성 하고, 변경된 이름을 반영하도록 하였다. 이렇게 되면 user 객체는 변경되지 않고, user2는 새로운 객체가 되어 새로운 이름을 가진 각각 다른 객체가 된다.