# ์์ฝ
- ๋จ์ํ ๋ฌด์ธ๊ฐ๋ฅผ ๋ฐ๋ณตํ๋ฉด์ ์์ ์ ์ํํ ๋ โก forEach (์๋ณธ ๋ฐฐ์ด ๋ณ๊ฒฝ๋์ง ์์ / ์๋ก์ด ๋ฐฐ์ด ๋ฐํํ์ง ์์)
- ์๋ณธ ๋ฐฐ์ด์ ๋ณ๊ฒฝํ์ง ์๊ณ ๋ณํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ก ์ฌ์ฉํ ํ์๊ฐ ์์ ๋ โก map (์๋ณธ ๋ฐฐ์ด ๋ณ๊ฒฝ๋์ง ์์ / ์๋ก์ด ๋ฐฐ์ด ๋ฐํ)
โ forEach
- ๋ฐฐ์ด์ ๊ฐ ์์์ ๋ํด ํน์ ์์ ์ ์ํํ ๋ ์ฌ์ฉํ๋ค.
const numbers = [1, 2, 3];
numbers.forEach(num => {
console.log(num * 2); // 2, 4, 6 ์ถ๋ ฅ
});
console.log(numbers); // [1, 2, 3] ์๋ณธ ๋ฐฐ์ด์ ๊ทธ๋๋ก!
- forEach๋ ๋ฐฐ์ด์ ์์๋ค์ ์ํํ๋ฉด์ ๊ฐ ์์๋ฅผ 2๋ฐฐ๋ก ๊ณ์ฐํด์ ์ถ๋ ฅํ์ง๋ง, ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ์ง ์๋๋ค.
(์๋ณธ ๋ฐฐ์ด์ ๋ณ๊ฒฝ๋์ง ์์) - ์๋ณธ ๋ฐฐ์ด์ ์ ์งํ๋ฉด์, ๋จ์ํ ๋ฐ๋ณต ์์ ์ ์ํํ ๋ ์ฌ์ฉ(๋ฐ์ดํฐ๋ฅผ ํ๋ฉด์ ์ถ๋ ฅํ๊ฑฐ๋, ๋ก๊ทธ ์ฐ์ ๊ฒฝ์ฐ ์ฌ์ฉ๋จ)
โ map
- ๋ฐฐ์ด์ ๊ฐ ์์์ ๋ํด ์์ ์ ์ํํ๊ณ , ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์๋ก์ด ๋ฐฐ์ด๋ก ๋ฐํํ ๋ ์ฌ์ฉํ๋ค.
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6] ๋ณํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฐฐ์ด๋ก ๋ฐํ
console.log(numbers); // [1, 2, 3] ์๋ณธ ๋ฐฐ์ด์ ๊ทธ๋๋ก ์ ์ง!
- map์ ๋ฐฐ์ด์ ์ํํ๋ฉฐ ๊ฐ ์์๋ฅผ 2๋ฐฐ๋ก ๋ง๋ค์ด ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ๋ค.
- ์๋ณธ ๋ฐฐ์ด์ ๊ทธ๋๋ก ๋๊ณ ์๋ก์ด ๋ฐฐ์ด์ ์์ฑํ๋ค.
โก ์๋ณธ ๋ฐฐ์ด์ ๋ณ๊ฒฝํ์ง ์์์ผ๋ก ๋ฐ์ดํฐ ์์ค ๋ง์ ์ ์๊ณ , ๋ณํ๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฌ์ฉํ๊ฑฐ๋ ์ด๋๊ฐ ์ ์ฅํ ๋ ์ ์ฉํ๋ค.
(ex: ๊ฐ๊ฒฉ ๋ฐ์ดํฐ๋ฅผ ๋ณํํด์ ํ ์ธ๊ฐ๋ฅผ ๊ณ์ฐํ ํ, ์ด๋ฅผ ์๋ก์ด ๋ฐฐ์ด๋ก ์ ์ฅ ๊ฐ๋ฅ)
๐ฅ map์ ์ฌ์ฉํด์ผ ํ ์ํฉ์์ forEach๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ๋ฐ์ํ๋ ๋ฌธ์
1. ๋ณํ๋ ๋ฐ์ดํฐ๋ฅผ ์ป์ ์ ์๋ค.
forEach๋ ๋จ์ํ ๋ฐฐ์ด์ ๊ฐ ์์๋ฅผ ์ํํ๋ฉด์ ์์ ์ ์ํํ ๋ฟ์ด๋ฏ๋ก, ๋ณํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ฑฐ๋ ์ฌ์ฌ์ฉํ ์ ์๋ค.
const numbers = [1, 2, 3];
const doubled = numbers.forEach(num => num * 2);
console.log(doubled); // undefined
forEach๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ์ง ์๊ธฐ ๋๋ฌธ์ doubled ๋ณ์๋ undefined๊ฐ ๋๋ค.
๋ณํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐฐ์ด๋ก ์ป์ผ๋ ค๋ ์ํฉ์์ forEach๋ฅผ ์ฌ์ฉํ๋ฉด, ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ก ์ ์ฅํ ์ ์๋ค.
const numbers = [1, 2, 3];
numbers.forEach(num => {
num = num * 2; // ์์
์ ์ํ๋์ง๋ง
});
console.log(numbers); // [1, 2, 3] ์๋ณธ ๋ฐฐ์ด์ ์ฌ์ ํ ๊ทธ๋๋ก
๋ณํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ ์์ผ๋ ์ฌ์ฌ์ฉ๋ ๋น์ฐ ๋ถ๊ฐ..
2. ์ฝ๋๊ฐ ๋ณต์กํด์ง๊ณ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋ค.
map์ "๋ณํ๋ ๋ฐฐ์ด์ ๋ฐํ"ํ๋ ๋ช ํํ ๋ชฉ์ ์ ๊ฐ์ง๊ณ ์ฌ์ฉ๋๋ค. ๋ฐ๋ฉด, forEach๋ ์ฃผ๋ก "๋ฐฐ์ด์ ์ํํ๋ฉด์ ์์ ์ ์ํ"ํ ๋ ์ฌ์ฉ๋๋ค. ์ด๋ฐ ์ฐจ์ด๋ฅผ ๋ฌด์ํ๊ณ forEach๋ฅผ ๋ณํ ์์ ์ ์ฌ์ฉํ๋ฉด, ์ฝ๋์ ์๋๊ฐ ๋ถ๋ถ๋ช ํด์ง๊ณ , ์ด๋ ๊ฒฐ๊ตญ ์ฝ๋์ ๊ฐ๋ ์ฑ์ ๋จ์ด๋จ๋ฆฌ๊ฒ ๋๋ค.
const numbers = [1, 2, 3];
let doubled = [];
numbers.forEach(num => {
doubled.push(num * 2);
});
forEach๋ก ์๋ก์ด ๋ฐฐ์ด์ ๋ง๋ค๊ธฐ ์ํด์๋ ์ง์ ๋ฐฐ์ด์ ์์ฑํ๊ณ ๊ฐ๊ฐ์ ์์๋ฅผ ๋ฐฐ์ด์ ๋ฃ๋ ์์ ์ ํด์ผ ํ๋ค. ์ฝ๋๋ ๋ณต์กํด์ง๊ณ ๊ฐ๋ ์ฑ์ ๋จ์ด์ง๊ธฐ ๋๋ฌธ์ ์ด ๊ฒฝ์ฐ map์ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ์ง๊ด์ ์ด๊ณ ์๋๊ฐ ๋ช ํํ๋ค.
'๐ฉโ๐ป hello, world! > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
DOM ๋ค๋ฃจ๊ธฐ : todolist layout ๋ฐ๋ณต๋๋ ์ฝ๋ ๋ฆฌํฉํ ๋ง (0) | 2024.09.23 |
---|---|
[JS] DOM ๋ค๋ฃจ๊ธฐ :: textContent, innerText, innerHTML, appendChild, insertAdjacentHTML (2) | 2024.09.12 |