문제
객체 두 개가 주어졌을 때, 두 객체를 특정한 방법으로 합치는 문제인데, 두 객체는 각각 obj1과 obj2로 주어진다.
먼저 나는 두 객체를 합치는 방법을 알아보기 위해 구글링을 했고, 그 결과 Object.assign() 함수를 이용하면 된다는 것을 알아냈다. 다시 구글에 'mdn Object.assingn'이라고 검색하니 다양한 예제와 함께 위 함수가 어떻게 작동되는지 살펴볼 수 있었다.
Object.assign() 함수는 다음과 같은 기능을 한다.
let obj1 = { a: 3, b: 4 };
let obj2 = { b: 7, c: 5, d: 6 };
let returnedObject1 = Object.assign(obj1, obj2);
console.log(obj1);
// expected output: Object { a: 3, b: 7, c: 5, d: 6 }
console.log(returnedObj1);
// expected output: Object { a: 3, b: 7, c: 5, d: 6 }
console.log(obj2);
// expected output: Object { b: 7, c: 5, d: 6 }이처럼 Object.assign()을 이용해 두 객체를 합칠 수는 있지만, 또 다른 단점들이 있었다.
-
두 객체를 합치면 객체 obj1도 변화
-
두 객체를 합칠 때, obj2에 있는 키가 obj1의 키에 덮어 씌워짐
하지만 코플릿의 문제에서는 두 객체를 합치지만 obj1의 키가 그대로 있기를 원했고, obj1에 없는 키를 obj2에서 obj1으로 추가해오는 조건을 성립시켜야했다.
그래서 Object.assign(obj1, obj2)을 하면 obj1의 키가 바뀌고 obj2의 키와 값들이 obj1에 덮어 씌워지니까 두 객체의 순서를 바꿔서 함수에 넣어보면 어떨까라고 생각했고 다시 코드를 짜서 console 창에서 작동을 시켜보았더니, 여전히 문제에서 원하는 조건들을 통과하지 못해 다시 긴 고민의 시간을 거치게 되었다.
해결 방법
문제를 어떻게 풀 수 있을지 계속 고민하다가 결국 모델 솔루션을 참고했고, 모델 솔루션은 두 개의 풀이방법을 보여주고 있었다.
-
이 문제는 객체 obj1은 그대로 놔둔 채, obj1에는 없지만 obj2에는 있는 키와 값을 obj1에 추가하기를 원했기 때문에, 먼저 for문을 통해 객체 obj2의 키를 돌면서 객체 obj1에 있는 키와 같은 키가 아닐 경우에는
obj1[key] = obj2[key]를 통해 obj1에 추가하는 식의 풀이 방법을 보여주었다. -
두 번째 풀이방법은 내가 고민했던
Object.assign()함수를 이용한 풀이이다.
먼저 처음에 내가 생각한 풀이법처럼 Object.assign() 안에 obj2와 obj1을 차례대로 넣어주긴 하는데, 빈 객체 {} 를 제일 첫번째 순서로 넣어주어야 obj2의 값들이 변하지 않는다는 것을 알게되었다.
예제
let obj1 = { a: 1, b: 2, c: 3 };
let obj2 = { b: 7, c: 6, d: 9 };
let returnedObject = Object.assign({}, obj2, obj1);
console.log(obj2);
// expected output: Object { b: 7, c: 6, d: 9 }
console.log(returnedObject);
// expected output: Object { b: 2, c: 3, d: 9, a: 1 }
// obj2의 값은 변하지 않음위와 같이 obj1과 obj2를 합쳐준 객체를 다시 obj1과 합쳐준다. 그렇게 하면 이러한 값을 출력할 수 있다.
let obj1 = { a: 1, b: 2, c: 3 };
let obj2 = { b: 7, c: 6, d: 9 };
let returnedObject = Object.assign({}, obj2, obj1);
console.log(obj2);
// expected output: Object { b: 7, c: 6, d: 9 }
console.log(returnedObject);
// expected output: Object { b: 2, c: 3, d: 9, a: 1 }
Object.assign(obj1, returnedObject);
console.log(Object.assign(obj1, returnedObject);
// expected output: Object { a: 1, b: 2, c: 3, d: 9 }returnedObject가 다시 obj1과 합쳐지면서, obj1과 동일한 키와 값은 obj1이 그대로 가지고 가므로 이렇게 하면 순서도 정렬되고 원하는 값을 얻을 수 있다.
느낀 점
Pre Course 4주차에 접어들면서 그동안 배운 것들을 스스로 다시 익혀보는 중이다. Pre Course 초반에는 문제가 잘 안 풀리면 답답한 기분을 자주 느꼈는데, 그래도 지금은 하나씩 구글링해가며 풀이 방법을 고민해보는 시간도 늘어났고 그만큼 문제를 풀었을 때 느끼는 성취감도 커졌다.
그리고 눈으로만 읽었을 때는 잘 와닿지 않던 코드들이 이렇게 블로깅을 통해 정리하는 과정을 거치면서 확실하게 이해되는 것 같아 뿌듯한 마음이 든다. 앞으로도 공부를 하다가 이해가 잘 안되거나 어려운 개념이 있다면 블로깅을 통해 복습하는 시간을 가져야겠다🙂
.png)