이노캠 2주차(화)-about 가변객체

🔎가변하는 객체의 문제점 이해하기

//user 객체를 생성
var user={
    name:"wonjang",
    gender:"male"

• 이름을 변경하는 함수,'changeName'을 정의
• 입력값: 변경하는 대상 user객체, 변경고자 하는 이름
• 출력값: 새로운 user 객체
• 특징: 객체의 프로퍼티(속성)에 접근해서 이름을 변경함->가변

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

//변경한 user정보를 user2 변수에 할당함
//가변이기 때문에 user1도 영향 O
var user2= changeName(user,'twojang');

//결국 아래 logic은 skip됨. 
if (user !==user2){
    console.log("유저 정보가 변경되었습니다.");
}

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

user2 변수에 할당한 정도가 user1에 영향을 주어 원하던 값이 나오지 않음.

🔎 해결방법

객체의 프로퍼티에 접근하는 것이 아니라, 아예 새로운 객체를 변환

var changeName = function(user, newName){
    return{
        name:newName,
        gender:user.gender
    };
};
var user2=changeName(user,"twojang"); 

이렇게 하면 불변이기 때문에 user 1에 영향 x

🖥️결과

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

console.log(user.name,user2.name); //wonjang twojang
console.log(user===user2); //false 

이렇게 해결되긴 했으나 이런 방식으로는 속성 값이 늘어나면 하드코딩이 된다는 문제점이 있다.

✍️ 오늘 공부하며 느낀 점

이전에 숙제로 코드 테스트를 할 때 코드가 무한 루프에 빠지거나 아예 값이 출력되지 않는 경우가 있었는데 이런 가변성 있는 함수를 쓴 것 같다는 생각이 들었다. 3주차 온라인 강의를 듣기 시작하자 손으로 코드를 치며 익혔던 지난 강의들 보다 어렵게 느껴졌다. 대부분의 코드는 쓰다보면 중첩된 객체로 짜는 경우가 많은데, 잘 익혀서 오류가 안 나게 해야겠다.