[JS] 불변 객체, 얕은 복사, 깊은 복사 : 원본 객체에 영향 미치지 않기

 

 

💡 객체를 활용해 새 객체를 만들어낼 때 원본 객체에 영향이 없도록 해보자!

 

객체의 프로퍼티(속성)에 접근해 영향을 줌 : 가변

let user = {
  name: 'aoto',
  gender: 'female',
};

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

let user2 = changeName(user, 'yae');

console.log(user.name, user2.name) // yae yae

 

 

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

let user = {
  name: 'aoto',
  gender: 'female',
};

const changeName = function (user, newName) {
  return {
    name = newName;
    gender = user.gender;
  };
};

let user2 = changeName(user, 'yae');

console.log(user.name, user2.name) // aoto yae

 

❗️ 하지만 위 방식에서 return 값이 많을 시, 코드가 길어질 수 있으니 얕은 복사를 활용해보자!

for in 반복문 활용 ➡️ 얕은 복사를 했으니 user와 user2는 별개의 객체!

let user = {
  name: 'aoto',
  gender: 'female',
};

const copyObject = function (target) {
  let result = {};
  
  for (let prop in target) {
    result[prop] = target[prop];
  }
  
  return result;
};


let user2 = copyObject(user);
user2.name = 'yae'

console.log(user.name, user2.name) // aoto yae

 

❗️ 하지만..! 중접 객체는 깊은 복사를 해야 한다!

객체의 프로퍼티 중, 기본형 데이터는 그대로 복사하고 참조형 데이터는 다시 그 내부의 프로퍼티를 복사하도록 ~

➡️ 재귀적으로 수행되게!

const copyObjectDeep = function (target) {
  let result = {};
  
  if (typeOf target === 'object' && target !== null) {
    for (let prop in target) {
      result[prop] = copyObjectDeep(target[prop])
    }
  } else {
    result = target;
  }
  
  return result;
}