[TIL] 얕은복사와 깊은복사

welcome·2021년 10월 12일
0

💚💗 본문 내용은 코어자바스크립트를 참고하였습니다.


불변객체


  • 불변객체가 필요한 경우

값으로 전달받은 객체에 변경을 가하더라도 원본객체는 변하지 않아야하는 경우(변수복사 후 객체의 프로퍼티 값을 변경했을시 원본개체의 프로퍼티 값도 변경되기 때문)

  • 불변객체를 만드는 방법

내부 프로퍼티를 변경할 필요가 있을때 마다 매번 새로운 객체를 만들어 재할당 하기로 규칙을 정하거나 자동으로 새로운 객체를 만드는 도구를 활용한다면 불변성을 확보할수 있을 것입니다.

얕은 복사(shallow copy)

  • 객체의 불변성을 확보하기 위해서는 프로퍼티가 아닌 객체자체를 복사해야 한다. 이와 같이 객체안의 프로퍼티 값이 객체일 경우 또한 객체자체를 복사해주어야한다.
    얕은복사는 참조형객체의 바로 아래 단계 프로퍼티 값은 복사해 주지만 그 이상의 프로퍼티는 복사하지 않는다.
    (객체의 프로퍼티 값이 참조형일 경우는 깊은 복사가 되지않는다.)

Object.assign(target, ...sources)
Spread syntax(전개 구문)

깊은복사(deep copy)

  • 객체에 직접속한 프로퍼티 뿐만 아니라 그 내부의 프로퍼티가 있을때마다 재귀적으로 수행해주는 방법
  1. 재귀함수를 사용하는 방법
function cloneObject(obj) {
  var clone = {};
  for (var key in obj) {
    if (typeof obj[key] == "object" && obj[key] != null) {
      clone[key] = cloneObject(obj[key]);
    } else {
      clone[key] = obj[key];
    }
  }
  return clone;
}
  1. 객체를 JSON문법으로 표현된 문자열로 전환했다가 다시 JSON객체로 바꾸는 방법이다.
var CopyObject = function (target) {
  return JSON.parse(JSON.stringify(target))  
}
  1. immutable.js 등의 라이브러리 사용

참고자료

0개의 댓글