[js] object - 수정편(Write, Update)

지난번 Object에 대해 접근하고 데이터에 접근하는 방법을 알아보았다.
관련 링크는 아래를 참고하면 된다.
object - 호출편(Read)

◾ 값을 수정하는 방법

아래와 같은 나라별 key와 해당하는 영화감독들의 배열을 value로 가지는 object가 있다.
각 데이터를 수정하는 방법을 알아보자.

const movieDirector = {
    Korea: ["봉중호", "박찬욱", "장항춘"],
    USA: ["스티븐 스필버그", "크리스토퍼 놀란", "마틴 스콜세지", "쿠엔틴 타란티노", "그레타 거윅"],
    Japan: ["구로사와 아키라", "고레에다 히로카즈", "오즈 야스지로"],
    France: ["장뤽 고다르", "프랑수아 트뤼포", "조르주 멜리에스"],
};

1. 해당 Key의 value값에 직접 접근하여 변경

장항준 감독이 오타로 인해 변경되어야 하므로 아래와 같이 변경할 수 있다.
배열 값이므로 해당 위치의 값에 변경할 값을 대입해준다.

movieDirector.Korea[2] = "장항준"

2. 스프레드 연산자를 통해 기존값을 유지하고 변경할 Key의 value만 변경

React에서는 불변성을 지켜야 하므로 아래와 같은 방식이 많을 것 같다.

const changeObj = {...movieDirector, Korea: ["봉준호", "박찬욱", "장항준"]};
changeObj
/*
{
    "Korea": ["봉준호","박찬욱","장항준"],
    "USA": ["스티븐 스필버그","크리스토퍼 놀란","마틴 스콜세지","쿠엔틴 타란티노","그레타 거윅"],
    "Japan": ["구로사와 아키라","고레에다 히로카즈","오즈 야스지로"],
    "France": ["장뤽 고다르","프랑수아 트뤼포","조르주 멜리에스"]
}
*/

잘 변경된 것을 볼 수 있다.

3. Key의 배열에 접근하여 pop, push, splice등을 사용하여 배열 데이터를 제거하거나 추가할 수 있다.

movieDirector.USA.splice(2, 1) // 마틴 스콜세지 out
movieDirector
/*
{
    "Korea": ["봉준호","박찬욱","장항춘"],
    "USA": ["스티븐 스필버그","크리스토퍼 놀란","쿠엔틴 타란티노","그레타 거윅"],
    "Japan": ["구로사와 아키라","고레에다 히로카즈","오즈 야스지로"],
    "France": ["장뤽 고다르","프랑수아 트뤼포","조르주 멜리에스"]
}
*/

이외에도 다양한 방법이 존재한다. 값이 문자열인지 숫자인지 object인지 등등에 따라 다양하게 변경 할 수 있다.