[JavaScript] map() 함수

문제 설명)

map() 함수는 각 배열 요소를 정의된 함수를 통해 변환한 결괏값들로 새 배열을 반환합니다. 쉽게 말해 배열을 가공하여 새 배열을 만드는 함수입니다.

예를 들어 아래와 같이 딕셔너리 배열이 주어졌습니다. 딕셔너리 요소인 firstname과 lastname을 합한 전체 이름을 출력하려고 합니다.

 

var persons = [

{firstname : "Malcom", lastname: "Reynolds"},

{firstname : "Kaylee", lastname: "Frye"},

{firstname : "Jayne", lastname: "Cobb"}

];

 

먼저 getFullName() 함수에 대해 살펴봅시다. 해당 함수는 item의 firstname과 lastname을 더해서 반환하고 있습니다.

 

function getFullName(item) { var fullname = item.firstname + " " +item.lastname; return fullname; }

 

그리고 persons 리스트에 대해 getFullName 함수에 map()을 이용한 결과를 확인해봅시다. map()은 아래와 같은 형태로 사용됩니다.

 

document.write(persons.map(getFullName));

 

또한 map() 함수와 자바스크립트의 내장함수를 이용해 결과를 얻을 수도 있습니다. 자바스크립트 내장 함수 중 Math.sqrt()는 제곱근을 반환합니다. 즉, 특정 숫자의 루트를 씌운 값을 반환합니다.

 

document.write(Math.sqrt(4));

 

해당 함수를 이용해 각 요소에 루트 연산을 한 새로운 배열을 얻고 싶다면 아래처럼 map() 함수를 이용하면 됩니다.

 

var numbers = [4, 9, 16, 25]; var x = numbers.map(Math.sqrt) document.write(x);

 

[지시사항]

아래 내용이 출력되도록 map 활용하기

티셔츠티셔츠티셔츠양말청바지청바지

 

let clothes=['티셔츠', '양말', '청바지'];
let counts=[3,1,2];

document.write(clothes.map((elem, idx) => {
  // 티셔츠, 양말, 청바지 => elem
  return elem.repeat(counts[idx])
}));