💪 JavaScript. Map w/ 노마드코더

Preface

📌 개발 공부 3개월 차인 to-be 개발자의 자습 블로그🙂ﾠOct 10 ~ 15, 2021

현재 상태
array.map은 자주 쓰니까 복습하라고 했다. 그러니 복습!

배열의 형태로 저장되어 있는 data가 있을 때 각 data에 어떠한 조치를 취하고 싶은 경우 사용한다.
즉 .map method는 모든 배열의 item에 function을 실행하고 그 결과 값으로 새로운 배열을 만드는 method이다.

const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];

const smilingDays = days.map(happy => console.log(happy))
// = const smilingDays = days.map((happy) => console.log(happy));

// ↓ arrow function은 return을 함축적으로 가지고 있으므로 이걸 풀어서 쓰면
const smilingDays = days.map((happy) => {
  return console.log(happy);
});

// ↓ 한번 더 풀어서 쓰면
const smilingDays = days.map((happy) => {
  const temp = console.log(happy);
  return temp;
});

// array.map() method는 괄호 안이나 위에 실행할 function을 만듦
// 매개변수 (여기에서는 'happy') 를 function에 넘김
// happy라는 변수가 배열의 각 값인 Mon ~ Fri를 가지게 되는 것
// ⬇️ Output
// "Mon" "Tue" "Wed" "Thu" "Fri" : 배열을 돌면서 얻은 값들
// [undefined, undefined, undefined, undefined, undefined] : 하지만 return되는 배열은 undefined임

// 🎵 모든 요일에 😌 넣기
const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];

const smilingDays = days.map(happy => `😌 ${happy}`);
console.log(smilingDays);
// ⬇️ Output
// ["😌 Mon","😌 Tue","😌 Wed","😌 Thu","😌 Fri"]

// ↓ 함수를 array.map 위에 쓰면
const addSmile = day => `😌 ${day}`;
const smilingDays = days.map(addSmile);
console.log(smilingDays);
// ⬇️ Output
// ["😌 Mon","😌 Tue","😌 Wed","😌 Thu","😌 Fri"]

// 🎵 모든 요일에 index 넣기
const weekdays = days.map((day, index) =>
  console.log(`#${index + 1} ${day}day`)
);

// ↓ 함수를 array.map 위에 쓰면
const addNumber = (day, index) => `#${index + 1} ${day}day`;
const weekDays = days.map(addNumber);
console.log(weekDays);
// ⬇️ Output
// "#1 Monday"
// "#2 Tueday"
// "#3 Wedday"
// "#4 Thuday"
// "#5 Friday"

Endnote

🔗 related documents

MDN Web Docs - Array.prototype.map()

🙇 the source of this content

노마드 코더 Nomad Coders