[Javascript] 객체 매핑하기

문제

세 개의 프로퍼티 name과 surname, id를 가진 객체 user가 담긴 배열이 있습니다.

name과 surname을 조합해 fullName을 만들고, 이를 이용해 두 개의 프로퍼티 id와 fullName을 가진 객체를 담은 새로운 배열을 반환해주는 코드를 작성해보세요.

 

• 예시

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = /* 여기에 코드를 작성하세요. */

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ) // 1
alert( usersMapped[0].fullName ) // John Smith

 

나의 풀이

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [john, pete, mary];

let usersMapped = users.map(function (item) {

  let obj = {};
  obj.fullName = `${item.name} ${item.surname}`;
  obj.id = item.id;
  return obj;

});

 

해답

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,  // 이런 식으로 입력해도 된다!
  id: user.id
}));

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]

map메소드를 이용해서 새로운 배열을 만들어줄 때, 요소를 객체로 설정하고 싶다면
함수에 객체를 선언하고 채워준 후, 반환하지 않고 바로 객체 그 자체를 적어줘도 된다.

 

• map 메소드 이용해서 요소가 객체인 배열 만들기

arr.map(item ⇒ ({key: value, key: value}))
// 아래와 같음

arr.map(function(item) {

let obj = {};

obj.key = value;
obj.key = value;

return obj;

}

 

---

참고

https://ko.javascript.info/array-methods

배열과 메서드