[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

https://ko.javascript.info/task/map-objects

---

 

내가 쓴 답안

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( item => {
  
  let obj = {};
  obj[fullName] = item.name + ' ' +item.surname;
  obj[id] = item.id;
  
  return obj;
  
});

console.log(usersMapped[0].id);
console.log(usersMapped[0].fullName);

결과

map에서 item을 객체로 만들고 싶어서 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 }
]
*/

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

 

---

 

나는 왜 틀렸을까?

대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다! 따옴표의 종류는 상관 없다.

이 점 꼭 주의하자!

https://ko.javascript.info/object#ref-477

객체

 

 

다음과 같이 코드를 수정했더니 정상적으로 출력되었다.

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( (item) => {
  
  let obj = {};
  obj["fullName"] = item.name + ' ' +item.surname;
  obj["id"] = item.id;
  
  return obj;
  
});

console.log(usersMapped[0].id);
console.log(usersMapped[0].fullName);

 

결과

 

---

 

 

그 외 코드 개선을 위해 알아야할 개념

1. 화살표 함수는 두 가지 방법으로 작성할 수 있다.

화살표 함수는 본문이 없는 형태인 value => expr와 본문이 있는 형태인 value => {...} 두 방법으로 작성할 수 있다.

 

나는 화살표 함수를 쓸 때 거의 '본문이 있는 형태 value => {...}'로만 써왔기에  문제를 풀 때 '본문이 없는 형태 value => expr'로 써야한다는 걸 떠올리지 못했다.

 

본문이 없는 형태 value => expr

let func = (arg1, arg2, ...argN) => expression

위의 코드는 아래 함수의 축약 버전이라고 할 수 있다.

let func = function(arg1, arg2, ...argN) {
  return expression;
};

 

 

2. map 메소드의 역할과 문법

map은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환해준다.

즉 map(func)은 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만든다.

 

문법

let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환합니다.
});

 

주로 아래 예시와 같이 쓰인다.

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

보통은 item => item.length와 같이 본문이 없는 형태인 화살표 함수로 쓰이는 것 같다. 

 

 

---

참고 문서

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

배열과 메서드