JS 배열 객체요소 수정 immutable, mutable

객체 형식을 가진 배열 요소의 값을 수정하고 싶었다.

그런데 배열의 불변성을 지켜주는 map() 고차함수를 사용해서 객체의 요소를 수정했는데도, 원본 배열의 데이터가 아예 수정되는 현상이 발생했다. immutable과 mutable 차이를 제대로 알고 쓰기위해 정리해보려한다.

데이터

state라는 배열에 객체 형식의 요소가 들어가있다.

 

  const state = [
    { id: 1, content: 'a' },
    { id: 2, content: 'b' },
  ];

목표

특정 id로 객체 요소를 찾아 그 요소의 content 값을 바꾸는 함수를 작성한다.

그리고 처음 state값과 함수를 호출했을때의 반환되는 값과, 그 이후 state값이랑 비교해봄으로써 원본 state 데이터가 변경되었는지 (mutable), 변경이 되지 않았는지 (immutable) 직접 확인해본다.

Spread operator로 객체 수정

spread 연산자를 통해 해당 객체의 content 값을 'aaa'로 수정한다.

객체 리터럴 { }을 적어주어 새로운 객체를 만들고, 그 객체 리터럴 안에 원래 요소 el { id: 1, content: 'a' }의 내용을 그대로 ... 로 펼쳐서 복사한다. content 값은 'aaa'로 덮어씌우기하여 수정한다.

 

  const updateContent = (paramId) => {
    return state.map((el) => {
      if (el.id === paramId) {
        return { ...el, content: 'aaa' };
      }
      return el;
    });
  };

  console.log(updateContent(1)); //id가 1인 요소를 찾아 그 content 값을 aaa로 바꾸는 함수 호출
  //[{id: 1, content: 'aaa'}, {id: 2, content: 'b'}]
  console.log(state);
  //[{id: 1, content: 'a'}, {id: 2, content: 'b'}]

원래 state 배열의 id가 1인 요소의 content 값은 'a'였지만, updateContent() 라는 함수를 호출하면 함수의 반환값은 'aaa'를 가진 요소로 수정되어서 반환된다.

 

그럼 이제 updateContent함수를 호출하고 난 이후에 state의 데이터 상태를 확인해본다.

state의 1번 content 값은 여전히 'a'로 찍히는 걸 확인할 수 있다.

spread operator로 객체 리터럴에 새로운 객체를 만들어서 그 값을 수정하는 경우, 원본 state 배열은 변경되지 않는 것이다.

즉, spread operator로 배열을 수정할 시 Immutable로 원본 데이터는 유지된다.

 

Object.assign()으로 객체 수정

Object.assign() 메서드를 활용해서 객체를 수정할 수 있다.

---

Object.assign() 구문

Object.assign(target, ...sources)
변경할 타겟 객체, 새로운 속성으로 병합할 객체

 

target

최종적으로 타겟 목표 객체를 반환할 것

sources

소스 객체로, 타겟 객체에 반영하고자 하는 속성을 가진 객체

---

1)

먼저 Object.assign() 메서드 target 자리인 맨 처음 인자에 빈 객체리터럴을 적어주고, ...sources 자리에 요소의 내용 el을 펼쳐서 그대로 복사해준다. 그리고 또 세번째 인자로도 바꾸고 싶은 내용인 content 값 'bbb'가 있는 객체를 적어준다.

이렇게되면 새로운 객체인 빈 객체 {}에 원래 기존 el 내용인 {id: 2, content: 'b'} 를 병합하고, 또 그 객체에 content: 'bbb' 값을 가진 객체로 병합해준다는 뜻이다.

여기서 마지막 세번째 인자에는 {...el, content: 'bbb'}라고 적어주어 객체의 속성을 모두 다 적어주어도 되고, 수정하려는 속성값만 적어주어도 똑같이 작동한다.

 

  const updateContent2 = (paramId) => {
    return state.map((el) => {
      if (el.id === paramId) {
        return Object.assign({}, el, { ...el, content: 'bbb' });
        //return Object.assign({}, el, { content: 'bbb' }); //똑같이 작동
      }
      return el;
    });
  };
  console.log(updateContent2(2)); //요소 id 2를 찾아 content 값을 'bbb'로 바꾸는 함수 호출
  //[{id: 1, content: 'a'}, {id: 2, content: 'bbb'}]
  console.log(state); 
  //[{id: 1, content: 'a'}, {id: 2, content: 'b'}]

 

updateContent2()를 호출한 결과값을 보면, 함수의 반환값은 'bbb'를 가진 요소가 리턴되면서 수정된 값이 반환된다.

그럼 원본 배열인 state는?

여전히 'b'값을 가지고 있다. 원본배열이 수정되지 않았다.

Object.assign() 메서드를 활용해서 첫번째 인자에 {} 빈객체를 할당해서 객체를 수정하는 경우, 새로운 객체가 만들어져 반환되는 것이기 때문에 Immutable로 원본 데이터가 유지된다.

 

2)

이제 Object.assign()에 빈 객체를 생성하는 것이 아니고, target 자리에 바로 el이라는 내가 바꾸고 싶은 객체 자체를 가져온다. 그리고, 그 el 객체의 sources자리에 새로운 속성으로 바꾸고 싶은 값을 적어준다.

이 예제에서도 마찬가지로 return Object.assign(el, {...el, content: 'bbb'})과 return Object.assign(el, {content: 'bbb'}) 은 동일하게 작동한다.

 

 const updateContent3 = (paramId) => {
    return state.map((el) => {
      if (el.id === paramId) {
        return Object.assign(el, { ...el, content: 'bbb' });
      }
      return el;
    });
  };
  console.log(updateContent3(2)); //요소 id 2를 찾아 content 값을 'bbb'로 바꾸는 함수 호출
  //[{id: 1, content: 'a'}, {id: 2, content: 'bbb'}]
  console.log(state);
  //[{id: 1, content: 'a'}, {id: 2, content: 'bbb'}]

 

updateContent3() 호출한 결과값은 당연히 함수의 리턴값이므로 원하는 값대로 수정된 값이 반환된다.

이제 원래 배열인 state를 확인해보면?

state배열은 이제 'bbb'가 들어온 값을 가지고 있다. 원본 배열이 수정되었음을 확인할 수 있다.

Object.assign()를 사용시 첫번째 인자에 바꾸고 싶은 값을 가지고 오고, 두번째 sources 인자에 값을 할당해서 바로 객체를 바꾼 것이므로 위 예제의 경우에는 Mutable한 특성이 있다. 즉, 원본 데이터를 수정한 것이다.