자바스크립트 개념을 공부하면서 문제를 푸는데 계속 오류가 발생했다.
문제는 다음과 같다.
문제: 객체 매핑하기
세 개의 프로퍼티 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
객체
ko.javascript.info
다음과 같이 코드를 수정했더니 정상적으로 출력되었다.
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
배열과 메서드
ko.javascript.info
'Programming Language > JavaScript' 카테고리의 다른 글
[JavaScript] setTimeout은 현재 실행 중인 스크립트의 처리가 종료된 이후에 실행된다! (0) | 2022.12.23 |
---|---|
[JavaScript] Object.entries(obj)가 반환하는 건 맵이 아닌 '배열'이다! (0) | 2022.11.19 |
[Javascript] 반복문 STOP! split과 join, 그리고 Map 자료구조 (0) | 2022.11.17 |
[Javascript] 반복문 lover인 나에게 map과 reduce를 건네본다..❤️ (0) | 2022.11.16 |