map()

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด๊ณ  ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์ด์šฉ๋˜๋Š” ๋ฐฐ์—ด๊ณผ ์ด๋ฅผ loop์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ forEach()์™€ map()์„ ์ฃผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.  forEach()Array ์ธ์Šคํ„ด์Šค forEach() ๋ฉ”์„œ๋“œ๋Š” ์ˆœํšŒ ๋ฉ”์„œ๋“œ๋กœ ๊ฐ ๋ฐฐ์—ด ์š”์†Œ์— ๋Œ€ํ•ด ์ œ๊ณต๋œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ•œ ๋ฒˆ์”ฉ ์‹คํ–‰ํ•œ๋‹ค.๋ฐ˜ํ•œ ๊ฐ’์€ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค.ํ˜ธ์ถœ๋˜๋Š” ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์ง€๋งŒ, ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ์ œ๊ณต๋˜๋Š” ํ•จ์ˆ˜๋Š” ๋ณ€๊ฒฝ ํ•  ์ˆ˜ ์žˆ๋‹ค.๊ทธ๋Ÿฌ๋‚˜ ๋ฐฐ์—ด์˜ length๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์ฒ˜์Œ ํ˜ธ์ถœํ•˜๊ธฐ ์ „์— ์ €์žฅ๋œ๋‹ค๋Š” ์ ์„ ์œ ์˜ํ•ด์•ผํ•จ.๊ทธ๋ฆฌ๊ณ  ๋ฃจํ”„๋ฅผ ์ค‘์ง€ํ•˜๊ฑฐ๋‚˜ ์ค‘๋‹จํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์—†๋‹ค. const array1 = ['a', 'b', 'c'];array1.forEach((element) => console.log(element));// Expected output: "a"..
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ํฌ๊ฐœ 3๊ฐ€์ง€๋กœ ๋‚˜๋ˆ ๋ณด์ž๋ฉด ํ”„๋กœ๊ทธ๋žจ ์ž์ฒด์• ์„œ ์ ์–ด์„œ ๋ฐ”๋กœ ๋ฐ›์•„์˜จ ๊ฒƒ UI์—์„œ ๋„ฃ์–ด์˜จ ์†Œ์Šค (from DOM) WEB Api๊ฐ™์€ ์™ธ๋ถ€์—์„œ fetchํ•œ ์†Œ์Šค ์ด๋ ‡๊ฒŒ ์ด 3๊ฐœ์ง€์˜ ์†Œ์Šค์—์„œ ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฐฉ์‹์—๋Š” ์ด 4๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ๋ช‡ ๊ฐ€์ง€ ๊ธฐ์ค€์ด ์žˆ๋Š”๋ฐ, ๋‹จ์ˆœํ•œ ๋ฆฌ์ŠคํŠธ๊ฐ€ ํ•„์š”ํ•œ๊ฑด์ง€, ์•„๋‹ˆ๋ฉด key, value ๊ฐ’์ด ํ•„์š”ํ•œ๊ฑด์ง€ ์ƒ๊ฐ์„ ํ•ด์„œ ๊ธฐ์ค€์— ๋งž์ถ”์–ด์„œ ์“ฐ๋ฉด ๋œ๋‹ค. ์ €์žฅ๋ฐฉ์‹์€ Array, Set, Object, Map ์ด 4๊ฐ€์ง€์ด๋‹ค. ์‹ฌํ”Œํ•œ ๋ฆฌ์ŠคํŠธ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด array์™€ set์„ ์ด์šฉํ•ด์„œ ์ €์žฅํ•˜๋ฉด ๋œ๋‹ค. Array color = [‘red’, ‘gold’, ‘red’]; //{ ‘red’, ‘gold’, ‘red’} ๐Ÿ‘‰ ๋ฐ˜๋ณต๋˜๋Š” ๊ฐ’์ด ๋ฆฌ์ŠคํŠธ์— ํฌํ•จ์ด ๋  ์ˆ˜๋„ ์žˆ..
๋ฐ(Ming) ๐Ÿˆ‍โฌ›
'map()' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก