두 Object를 새로운 객체에 덮어쓰기

요즘 새로운 것을 계속 접하고 배우다 보니 기존의 것을 복습해야 하는데 시간을 잘 사용하지 않았다.

새로운 개념을 이해하려고 새로운 내용을 복습하는데도 벅찼기 때문이다.

그래도 기본이 제일 중요하다고 기본이 무너지면 당연히 새로운 개념도 무너지기 마련인데

오늘 그 경험을 한 것 같다. 두 객체를 합치려는데 기억이 나지 않았다. 다시 복습했다.

두 객체가 있다고 하자. 두 객체는 같은 key 값도 있고 서로에게 없는 key 값도 있다.

이럴때 두 객체의 key 값을 합친 새로운 객체를 만든다고 할때 어떻게 하면 될까?

let kimStore = { 
 		  apple: 10,
                  banana: 20,
                  orange: 15,
                  melon: 5
               }

let leeStore = {
 		  banana: 30,
 		  apple: 40,
 		  grape: 25,
 		  orange: 2
		}

우선 합치기 전에 같은 key를 가진 값은 어떤 객체로 적용할 것인지를 정해야 한다.

합쳤을때 겹치는 key에 kimStore 값을 남길 것인지 leeStore 값을 남길 것인지 말이다.

여기서는 먼저 leeStore의 값을 남긴다고 가정하고 합쳐보자.

두 객체 값을 변형시키지 않고 새로운 객체에 만들고 싶다고 한다면

Object.assign(); 메소드를 이용하면 합칠 수 있다.

Object.assign(); 메소드는 객체를 얕은 복사할 때 사용하는 메소드이기도 하다.

복사를 할때는 이렇게 사용한다.

let kimStore1 = Object.assign({}, kimStore);

kimStore //  {apple: 10, banana: 20, orange: 15, melon: 5}
kimStore1 // {apple: 10, banana: 20, orange: 15, melon: 5}

이렇게 두 객체는 완전히 다른 주소값을 가지고 같은 값을 가진 상태의 객체가 되었다.

이 메소드는 빈 객체 {} 에 kimStore의 key 와 value를 하나하나 꺼내서

빈 객체에 새로운 주소값에 할당하는 과정으로 얕은 복사를 하는 메소드다.

이 메소드로 위의 두 객체를 합친다면

let kimleeStore = Object.assign({}, kimStore, leeStore);

kimleeStore // {apple: 40, banana: 30, orange: 2, melon: 5, grape: 25}
kimStore    // {apple: 10, banana: 20, orange: 15, melon: 5}
leeStore    // {banana: 30, apple: 40, grape: 25, orange: 2}

kimStore 에만 있는 melon은 kimStore의 값으로 있고 겹치는 apple, banana, orange는

leeStore 의 값으로 만들어진 것을 볼 수 있다. 반대로 kimStore, leeStore의 위치를 바꾸면

kimStore의 값이 남게 된다. 뒤에 있는 객체가 앞의 객체를 덮어쓰는 구조다.

ES5 버전에서 개선되었다고 알고 있다. 이전에는 덮어쓸수가 없었다고 한다.

여기서 빈 객체 {} 가 아니라 kimStore을 제일 앞에 두고 leeStore를 두번째에 둔다면

어떻게 될까?

let kimleeStore = Object.assign(kimStore, leeStore);

kimleeStore // {apple: 40, banana: 30, orange: 2, melon: 5, grape: 25}
kimStore    // {apple: 40, banana: 30, orange: 2, melon: 5, grape: 25}
leeStore    // {banana: 30, apple: 40, grape: 25, orange: 2}

kimStore 에 leeStore를 덮어쓰게 되기 때문에 당연히 kimStore이 바뀌게 된다.

새롭게 만드는 것이 아니라면 변수를 선언하지 않아도 된다.

Object.assign(kimStore, leeStore);

kimleeStore // {apple: 40, banana: 30, orange: 2, melon: 5, grape: 25}
kimStore    // {apple: 40, banana: 30, orange: 2, melon: 5, grape: 25}
leeStore    // {banana: 30, apple: 40, grape: 25, orange: 2}

배열, 객체 메소드는 정말 중요하니 복습을 잘 해둬야겠다.

기본이 정말 중요하다.