๐ช JavaScript. Map w/ ๋ ธ๋ง๋์ฝ๋
10959 ๋จ์ด JavaScriptJavaScript
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
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ช JavaScript. Map w/ ๋ ธ๋ง๋์ฝ๋), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@maimade/javascript07์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค