JavaScript์ for ๋ฃจํ, forEach, map ๋ฉ์๋ ์ฑ๋ฅ์ ์ค์ ์์์ ํจ๊ป ์์ธํ ๋น๊ตํ๊ณ ๊ฐ๋ฐ์๋ฅผ ์ํ ์ต์ ์ ํ์ฉ๋ฒ์ ์ ์ํฉ๋๋ค.
์ฑ๋ฅ ๋น๊ต: JavaScript์ for ๋ฃจํ vs. forEach vs. Map
JavaScript๋ ๋ฐฐ์ด์ ๋ฐ๋ณตํ๋ ์ฌ๋ฌ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ฉฐ, ๊ฐ ๋ฐฉ๋ฒ์ ๊ณ ์ ํ ๊ตฌ๋ฌธ, ๊ธฐ๋ฅ, ๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ์ค์ํ๊ฒ๋ ์ฑ๋ฅ ํน์ฑ์ ๊ฐ์ง๋๋ค. ํนํ ๋๊ท๋ชจ ๋ฐ์ดํฐ ์ธํธ๋ ์ฑ๋ฅ์ ๋ฏผ๊ฐํ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ค๋ฃฐ ๋, for ๋ฃจํ, forEach, map ๊ฐ์ ์ฐจ์ด์ ์ ์ดํดํ๋ ๊ฒ์ ํจ์จ์ ์ด๊ณ ์ต์ ํ๋ JavaScript ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์ด ๊ธ์ ๊ฐ ๋ฉ์๋์ ๋ฏธ๋ฌํ ์ฐจ์ด๋ฅผ ํ๊ตฌํ๊ณ ์ธ์ ์ด๋ค ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ผ ํ๋์ง์ ๋ํ ์ง์นจ์ ์ ๊ณตํ๋ ํฌ๊ด์ ์ธ ์ฑ๋ฅ ๋น๊ต๋ฅผ ์ ๊ณตํฉ๋๋ค.
์๊ฐ: JavaScript์์ ๋ฐ๋ณตํ๊ธฐ
๋ฐฐ์ด์ ๋ฐ๋ณตํ๋ ๊ฒ์ ํ๋ก๊ทธ๋๋ฐ์ ๊ธฐ๋ณธ ์์ ์ ๋๋ค. JavaScript๋ ํน์ ๋ชฉ์ ์ ๋ง๊ฒ ์ค๊ณ๋ ๋ค์ํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ฐ๋ฆฌ๋ ์ธ ๊ฐ์ง ์ผ๋ฐ์ ์ธ ๋ฉ์๋์ ์ค์ ์ ๋ ๊ฒ์ ๋๋ค:
for๋ฃจํ: ์ ํต์ ์ด๋ฉฐ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋ฐ๋ณต ๋ฐฉ๋ฒ์ด๋ผ๊ณ ํ ์ ์์ต๋๋ค.forEach: ๋ฐฐ์ด์ ์์๋ฅผ ๋ฐ๋ณตํ๊ณ ๊ฐ ์์์ ๋ํด ์ ๊ณต๋ ํจ์๋ฅผ ์คํํ๋๋ก ์ค๊ณ๋ ๊ณ ์ฐจ ํจ์์ ๋๋ค.map: ํธ์ถํ๋ ๋ฐฐ์ด์ ๋ชจ๋ ์์์ ๋ํด ์ ๊ณต๋ ํจ์๋ฅผ ํธ์ถํ ๊ฒฐ๊ณผ๋ฅผ ํฌํจํ๋ ์ ๋ฐฐ์ด์ ์์ฑํ๋ ๋ ๋ค๋ฅธ ๊ณ ์ฐจ ํจ์์ ๋๋ค.
์ฌ๋ฐ๋ฅธ ๋ฐ๋ณต ๋ฉ์๋๋ฅผ ์ ํํ๋ ๊ฒ์ ์ฝ๋์ ์ฑ๋ฅ์ ํฐ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๊ฐ ๋ฉ์๋๋ฅผ ์์ธํ ์ดํด๋ณด๊ณ ์ฑ๋ฅ ํน์ฑ์ ๋ถ์ํด ๋ณด๊ฒ ์ต๋๋ค.
for ๋ฃจํ: ์ ํต์ ์ธ ์ ๊ทผ ๋ฐฉ์
for ๋ฃจํ๋ JavaScript๋ฅผ ๋น๋กฏํ ๋ง์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋ฐ๋ณต ๊ตฌ์กฐ์ด๋ฉฐ ๋๋ฆฌ ์ดํด๋๊ณ ์์ต๋๋ค. ์ด๋ ๋ฐ๋ณต ํ๋ก์ธ์ค์ ๋ํ ๋ช
์์ ์ธ ์ ์ด๋ฅผ ์ ๊ณตํฉ๋๋ค.
๊ตฌ๋ฌธ ๋ฐ ์ฌ์ฉ๋ฒ
for ๋ฃจํ์ ๊ตฌ๋ฌธ์ ๊ฐ๋จํฉ๋๋ค:
for (let i = 0; i < array.length; i++) {
// Code to be executed for each element
console.log(array[i]);
}
๊ตฌ์ฑ ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ด๊ธฐํ (
let i = 0): ์นด์ดํฐ ๋ณ์ (i)๋ฅผ 0์ผ๋ก ์ด๊ธฐํํฉ๋๋ค. ์ด ๋ถ๋ถ์ ๋ฃจํ ์์ ์ ํ ๋ฒ๋ง ์คํ๋ฉ๋๋ค. - ์กฐ๊ฑด (
i < array.length): ๋ฃจํ๊ฐ ๊ณ์๋๊ธฐ ์ํด ์ฐธ์ด์ด์ผ ํ๋ ์กฐ๊ฑด์ ์ง์ ํฉ๋๋ค.i๊ฐ ๋ฐฐ์ด์ ๊ธธ์ด๋ณด๋ค ์์ ๋์ ๋ฃจํ๋ ๊ณ์๋ฉ๋๋ค. - ์ฆ๊ฐ (
i++): ๊ฐ ๋ฐ๋ณต ํ ์นด์ดํฐ ๋ณ์ (i)๋ฅผ ์ฆ๊ฐ์ํต๋๋ค.
์ฑ๋ฅ ํน์ฑ
for ๋ฃจํ๋ ์ผ๋ฐ์ ์ผ๋ก JavaScript์์ ๊ฐ์ฅ ๋น ๋ฅธ ๋ฐ๋ณต ๋ฉ์๋๋ก ๊ฐ์ฃผ๋ฉ๋๋ค. ์นด์ดํฐ๋ฅผ ์ง์ ์กฐ์ํ๊ณ ์ธ๋ฑ์ค๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด ์์์ ์ ๊ทผํ๋ฏ๋ก ์ค๋ฒํค๋๊ฐ ๊ฐ์ฅ ๋ฎ์ต๋๋ค.
์ฃผ์ ์ฅ์ :
- ์๋: ์ค๋ฒํค๋๊ฐ ๋ฎ์ ์ผ๋ฐ์ ์ผ๋ก ๊ฐ์ฅ ๋น ๋ฆ ๋๋ค.
- ์ ์ด: ์์ ๊ฑด๋๋ฐ๊ธฐ ๋๋ ๋ฃจํ ํ์ถ ๊ธฐ๋ฅ์ ํฌํจํ์ฌ ๋ฐ๋ณต ํ๋ก์ธ์ค์ ๋ํ ์์ ํ ์ ์ด๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ๋ธ๋ผ์ฐ์ ํธํ์ฑ: ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ํฌํจํ์ฌ ๋ชจ๋ JavaScript ํ๊ฒฝ์์ ์๋ํฉ๋๋ค.
์์: ์ ์ธ๊ณ ์ฃผ๋ฌธ ์ฒ๋ฆฌ
์ฌ๋ฌ ๊ตญ๊ฐ์์ ์จ ์ฃผ๋ฌธ ๋ชฉ๋ก์ ์ฒ๋ฆฌํ๋ค๊ณ ์์ํด ๋ณด์ธ์. ์ธ๊ธ ๋ชฉ์ ์ผ๋ก ํน์ ๊ตญ๊ฐ์ ์ฃผ๋ฌธ์ ๋ค๋ฅด๊ฒ ์ฒ๋ฆฌํด์ผ ํ ์๋ ์์ต๋๋ค.
const orders = [
{ id: 1, country: 'USA', amount: 100 },
{ id: 2, country: 'Canada', amount: 50 },
{ id: 3, country: 'UK', amount: 75 },
{ id: 4, country: 'Germany', amount: 120 },
{ id: 5, country: 'USA', amount: 80 }
];
function processOrders(orders) {
for (let i = 0; i < orders.length; i++) {
const order = orders[i];
if (order.country === 'USA') {
console.log(`Processing USA order ${order.id} with amount ${order.amount}`);
// Apply USA-specific tax logic
} else {
console.log(`Processing order ${order.id} with amount ${order.amount}`);
}
}
}
processOrders(orders);
forEach: ๋ฐ๋ณต์ ์ํ ํจ์ํ ์ ๊ทผ ๋ฐฉ์
forEach๋ ๋ฐฐ์ด์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณ ์ฐจ ํจ์๋ก, ๋ ๊ฐ๊ฒฐํ๊ณ ํจ์ํ ๋ฐฉ์์ผ๋ก ๋ฐ๋ณตํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ๊ฐ ๋ฐฐ์ด ์์์ ๋ํด ์ ๊ณต๋ ํจ์๋ฅผ ํ ๋ฒ ์คํํฉ๋๋ค.
๊ตฌ๋ฌธ ๋ฐ ์ฌ์ฉ๋ฒ
forEach์ ๊ตฌ๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
array.forEach(function(element, index, array) {
// Code to be executed for each element
console.log(element, index, array);
});
์ฝ๋ฐฑ ํจ์๋ ์ธ ๊ฐ์ง ์ธ์๋ฅผ ๋ฐ์ต๋๋ค:
element: ๋ฐฐ์ด์์ ํ์ฌ ์ฒ๋ฆฌ ์ค์ธ ์์์ ๋๋ค.index(์ ํ ์ฌํญ): ๋ฐฐ์ด์์ ํ์ฌ ์์์ ์ธ๋ฑ์ค์ ๋๋ค.array(์ ํ ์ฌํญ):forEach๊ฐ ํธ์ถ๋ ๋ฐฐ์ด์ ๋๋ค.
์ฑ๋ฅ ํน์ฑ
forEach๋ ์ผ๋ฐ์ ์ผ๋ก for ๋ฃจํ๋ณด๋ค ๋๋ฆฝ๋๋ค. ์ด๋ forEach๊ฐ ๊ฐ ์์์ ๋ํด ํจ์๋ฅผ ํธ์ถํ๋ ์ค๋ฒํค๋๋ฅผ ํฌํจํ์ฌ ์คํ ์๊ฐ์ ์ฆ๊ฐ์ํค๊ธฐ ๋๋ฌธ์
๋๋ค. ๊ทธ๋ฌ๋ ์์ ๋ฐฐ์ด์ ๊ฒฝ์ฐ ์ฐจ์ด๊ฐ ๋ฏธ๋ฏธํ ์ ์์ต๋๋ค.
์ฃผ์ ์ฅ์ :
- ๊ฐ๋
์ฑ:
for๋ฃจํ์ ๋นํด ๋ ๊ฐ๊ฒฐํ๊ณ ๊ฐ๋ ์ฑ ์๋ ๊ตฌ๋ฌธ์ ์ ๊ณตํฉ๋๋ค. - ํจ์ํ ํ๋ก๊ทธ๋๋ฐ: ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์๊ณผ ์ ๋ง์ต๋๋ค.
์ฃผ์ ๋จ์ :
- ๋๋ฆฐ ์ฑ๋ฅ: ์ผ๋ฐ์ ์ผ๋ก
for๋ฃจํ๋ณด๋ค ๋๋ฆฝ๋๋ค. break๋๋continue๋ถ๊ฐ: ๋ฃจํ์ ์คํ์ ์ ์ดํ๊ธฐ ์ํดbreak๋๋continue๋ฌธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ฐ๋ณต์ ์ค์งํ๋ ค๋ฉด ์์ธ๋ฅผ ๋ฐ์์ํค๊ฑฐ๋ ํจ์์์ ๋ฐํํด์ผ ํฉ๋๋ค(์ด๋ ํ์ฌ ๋ฐ๋ณต๋ง ๊ฑด๋๋๋๋ค).
์์: ์ฌ๋ฌ ์ง์ญ์ ๋ ์ง ํ์ ์ง์
ํ์ค ํ์์ ๋ ์ง ๋ฐฐ์ด์ด ์๊ณ , ์ด๋ฅผ ๋ค์ํ ์ง์ญ๋ณ ์ ํธ๋์ ๋ฐ๋ผ ํ์ํํด์ผ ํ๋ค๊ณ ์์ํด ๋ณด์ธ์.
const dates = [
'2024-01-15',
'2023-12-24',
'2024-02-01'
];
function formatDate(dateString, locale) {
const date = new Date(dateString);
return date.toLocaleDateString(locale);
}
function formatDates(dates, locale) {
dates.forEach(dateString => {
const formattedDate = formatDate(dateString, locale);
console.log(`Formatted date (${locale}): ${formattedDate}`);
});
}
formatDates(dates, 'en-US'); // US format
formatDates(dates, 'en-GB'); // UK format
formatDates(dates, 'de-DE'); // German format
map: ๋ฐฐ์ด ๋ณํํ๊ธฐ
map์ ๋ฐฐ์ด์ ๋ณํํ๋๋ก ์ค๊ณ๋ ๋ ๋ค๋ฅธ ๊ณ ์ฐจ ํจ์์
๋๋ค. ์๋ณธ ๋ฐฐ์ด์ ๊ฐ ์์์ ์ ๊ณต๋ ํจ์๋ฅผ ์ ์ฉํ์ฌ ์๋ก์ด ๋ฐฐ์ด์ ์์ฑํฉ๋๋ค.
๊ตฌ๋ฌธ ๋ฐ ์ฌ์ฉ๋ฒ
map์ ๊ตฌ๋ฌธ์ forEach์ ์ ์ฌํฉ๋๋ค:
const newArray = array.map(function(element, index, array) {
// Code to transform each element
return transformedElement;
});
์ฝ๋ฐฑ ํจ์๋ forEach์ ๋์ผํ ์ธ ๊ฐ์ง ์ธ์(element, index, array)๋ฅผ ๋ฐ์ง๋ง, ์๋ก์ด ๋ฐฐ์ด์์ ํด๋น ์์๊ฐ ๋ ๊ฐ์ ๋ฐํํด์ผ ํฉ๋๋ค.
์ฑ๋ฅ ํน์ฑ
forEach์ ์ ์ฌํ๊ฒ, map์ ํจ์ ํธ์ถ ์ค๋ฒํค๋๋ก ์ธํด ์ผ๋ฐ์ ์ผ๋ก for ๋ฃจํ๋ณด๋ค ๋๋ฆฝ๋๋ค. ๋ํ, map์ ์๋ก์ด ๋ฐฐ์ด์ ์์ฑํ์ฌ ๋ ๋ง์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์๋นํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ฐฐ์ด์ ๋ณํํด์ผ ํ๋ ์์
์ ๊ฒฝ์ฐ, map์ for ๋ฃจํ๋ก ์ ๋ฐฐ์ด์ ์๋์ผ๋ก ์์ฑํ๋ ๊ฒ๋ณด๋ค ๋ ํจ์จ์ ์ผ ์ ์์ต๋๋ค.
์ฃผ์ ์ฅ์ :
- ๋ณํ: ๋ณํ๋ ์์๋ก ์ ๋ฐฐ์ด์ ์์ฑํ๋ฏ๋ก ๋ฐ์ดํฐ ์กฐ์์ ์ด์์ ์ ๋๋ค.
- ๋ถ๋ณ์ฑ: ์๋ณธ ๋ฐฐ์ด์ ์์ ํ์ง ์์ ๋ถ๋ณ์ฑ์ ์ด์งํฉ๋๋ค.
- ์ฒด์ด๋: ๋ณต์กํ ๋ฐ์ดํฐ ์ฒ๋ฆฌ๋ฅผ ์ํด ๋ค๋ฅธ ๋ฐฐ์ด ๋ฉ์๋์ ์ฝ๊ฒ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
์ฃผ์ ๋จ์ :
- ๋๋ฆฐ ์ฑ๋ฅ: ์ผ๋ฐ์ ์ผ๋ก
for๋ฃจํ๋ณด๋ค ๋๋ฆฝ๋๋ค. - ๋ฉ๋ชจ๋ฆฌ ์๋น: ์ ๋ฐฐ์ด์ ์์ฑํ์ฌ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ๋๋ฆด ์ ์์ต๋๋ค.
์์: ์ฌ๋ฌ ๊ตญ๊ฐ์ ํตํ๋ฅผ USD๋ก ๋ณํ
๋ค์ํ ํตํ๋ก ๋ ํธ๋์ญ์ ๋ฐฐ์ด์ด ์๊ณ , ๋ณด๊ณ ๋ชฉ์ ์ผ๋ก ์ด๋ฅผ ๋ชจ๋ USD๋ก ๋ณํํด์ผ ํ๋ค๊ณ ๊ฐ์ ํด ๋ณด์ธ์.
const transactions = [
{ id: 1, currency: 'EUR', amount: 100 },
{ id: 2, currency: 'GBP', amount: 50 },
{ id: 3, currency: 'JPY', amount: 7500 },
{ id: 4, currency: 'CAD', amount: 120 }
];
const exchangeRates = {
'EUR': 1.10, // Example exchange rate
'GBP': 1.25,
'JPY': 0.007,
'CAD': 0.75
};
function convertToUSD(transaction) {
const rate = exchangeRates[transaction.currency];
if (rate) {
return transaction.amount * rate;
} else {
return null; // Indicate conversion failure
}
}
const usdAmounts = transactions.map(transaction => convertToUSD(transaction));
console.log(usdAmounts);
์ฑ๋ฅ ๋ฒค์น๋งํน
์ด๋ฌํ ๋ฉ์๋์ ์ฑ๋ฅ์ ๊ฐ๊ด์ ์ผ๋ก ๋น๊ตํ๊ธฐ ์ํด JavaScript์ console.time() ๋ฐ console.timeEnd()์ ๊ฐ์ ๋ฒค์น๋งํน ๋๊ตฌ ๋๋ ์ ์ฉ ๋ฒค์น๋งํน ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ค์์ ๊ธฐ๋ณธ ์์์
๋๋ค:
const arraySize = 100000;
const largeArray = Array.from({ length: arraySize }, (_, i) => i + 1);
// For loop
console.time('For loop');
for (let i = 0; i < largeArray.length; i++) {
// Do something
largeArray[i] * 2;
}
console.timeEnd('For loop');
// forEach
console.time('forEach');
largeArray.forEach(element => {
// Do something
element * 2;
});
console.timeEnd('forEach');
// Map
console.time('Map');
largeArray.map(element => {
// Do something
return element * 2;
});
console.timeEnd('Map');
์์ ๊ฒฐ๊ณผ:
๋๋ถ๋ถ์ ๊ฒฝ์ฐ ๋ค์๊ณผ ๊ฐ์ ์ฑ๋ฅ ์์(๊ฐ์ฅ ๋น ๋ฅธ ๊ฒ๋ถํฐ ๊ฐ์ฅ ๋๋ฆฐ ๊ฒ๊น์ง)๋ฅผ ๊ด์ฐฐํ ์ ์์ต๋๋ค:
forloopforEachmap
์ค์ ๊ณ ๋ ค ์ฌํญ:
- ๋ฐฐ์ด ํฌ๊ธฐ: ๋ฐฐ์ด์ด ํด์๋ก ์ฑ๋ฅ ์ฐจ์ด๊ฐ ๋ ๋๋๋ฌ์ง๋๋ค.
- ์ฐ์ฐ์ ๋ณต์ก์ฑ: ๋ฃจํ ๋๋ ํจ์ ๋ด๋ถ์์ ์ํ๋๋ ์ฐ์ฐ์ ๋ณต์ก์ฑ๋ ๊ฒฐ๊ณผ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๊ฐ๋จํ ์ฐ์ฐ์ ๋ฐ๋ณต ๋ฉ์๋์ ์ค๋ฒํค๋๋ฅผ ๊ฐ์กฐํ๋ ๋ฐ๋ฉด, ๋ณต์กํ ์ฐ์ฐ์ ์ฐจ์ด์ ์ ๊ฐ๋ฆด ์ ์์ต๋๋ค.
- JavaScript ์์ง: ๋ค๋ฅธ JavaScript ์์ง(์: Chrome์ V8, Firefox์ SpiderMonkey)์ ์ฝ๊ฐ ๋ค๋ฅธ ์ต์ ํ ์ ๋ต์ ๊ฐ์ง ์ ์์ผ๋ฉฐ, ์ด๋ ๊ฒฐ๊ณผ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ์ฌ์ฉ ์ฌ๋ก
์ฌ๋ฐ๋ฅธ ๋ฐ๋ณต ๋ฉ์๋๋ฅผ ์ ํํ๋ ๊ฒ์ ์์ ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. ๋ค์์ ๋ชจ๋ฒ ์ฌ๋ก ์์ฝ์ ๋๋ค:
- ์ฑ๋ฅ์ ๋ฏผ๊ฐํ ์์
: ํนํ ๋๊ท๋ชจ ๋ฐ์ดํฐ ์ธํธ๋ฅผ ๋ค๋ฃฐ ๋ ์ฑ๋ฅ์ ๋ฏผ๊ฐํ ์์
์๋
for๋ฃจํ๋ฅผ ์ฌ์ฉํ์ธ์. - ๊ฐ๋จํ ๋ฐ๋ณต: ์ฑ๋ฅ์ด ์ฃผ์ ๊ณ ๋ ค ์ฌํญ์ด ์๋๊ณ ๊ฐ๋
์ฑ์ด ์ค์ํ ๋๋ ๊ฐ๋จํ ๋ฐ๋ณต์
forEach๋ฅผ ์ฌ์ฉํ์ธ์. - ๋ฐฐ์ด ๋ณํ: ๋ฐฐ์ด์ ๋ณํํ๊ณ ๋ณํ๋ ๊ฐ์ ํฌํจํ๋ ์ ๋ฐฐ์ด์ ๋ง๋ค์ด์ผ ํ ๋๋
map์ ์ฌ์ฉํ์ธ์. - ๋ฐ๋ณต ์ค๋จ ๋๋ ๊ฑด๋๋ฐ๊ธฐ:
break๋๋continue๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐfor๋ฃจํ๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.forEach๋ฐmap์ ์ค๋จ ๋๋ ๊ฑด๋๋ฐ๊ธฐ๋ฅผ ํ์ฉํ์ง ์์ต๋๋ค. - ๋ถ๋ณ์ฑ: ์๋ณธ ๋ฐฐ์ด์ ๋ณด์กดํ๊ณ ์์ ์ฌํญ์ด ์ ์ฉ๋ ์ ๋ฐฐ์ด์ ๋ง๋ค๋ ค๋ฉด
map์ ์ฌ์ฉํ์ธ์.
์ค์ ์๋๋ฆฌ์ค ๋ฐ ์์
๋ค์์ ๊ฐ ๋ฐ๋ณต ๋ฉ์๋๊ฐ ๊ฐ์ฅ ์ ์ ํ ์ ํ์ด ๋ ์ ์๋ ์ค์ ์๋๋ฆฌ์ค์ ๋๋ค:
- ์น์ฌ์ดํธ ํธ๋ํฝ ๋ฐ์ดํฐ ๋ถ์ (
for๋ฃจํ): ์๋ฐฑ๋ง ๊ฑด์ ์น์ฌ์ดํธ ํธ๋ํฝ ๊ธฐ๋ก์ ์ฒ๋ฆฌํ์ฌ ํต์ฌ ์งํ๋ฅผ ๊ณ์ฐํฉ๋๋ค. ๋๊ท๋ชจ ๋ฐ์ดํฐ ์ธํธ์ ์ต์ ์ ์ฑ๋ฅ์ด ํ์ํ๋ฏ๋กfor๋ฃจํ๊ฐ ์ด์์ ์ ๋๋ค. - ์ ํ ๋ชฉ๋ก ํ์ (
forEach): ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ์ ์ ํ ๋ชฉ๋ก์ ํ์ํฉ๋๋ค. ์ฑ๋ฅ ์ํฅ์ด ๋ฏธ๋ฏธํ๊ณ ์ฝ๋๊ฐ ๋ ๊ฐ๋ ์ฑ์ด ์ข๊ธฐ ๋๋ฌธ์forEach๋ก ์ถฉ๋ถํฉ๋๋ค. - ์ฌ์ฉ์ ์๋ฐํ ์์ฑ (
map): ์ฌ์ฉ์ ๋ฐ์ดํฐ๋ฅผ ์ด๋ฏธ์ง URL๋ก ๋ณํํด์ผ ํ๋ ์ฌ์ฉ์ ์๋ฐํ๋ฅผ ์์ฑํฉ๋๋ค.map์ ๋ฐ์ดํฐ๋ฅผ ์ด๋ฏธ์ง URL์ ์ ๋ฐฐ์ด๋ก ๋ณํํ๋ฏ๋ก ์๋ฒฝํ ์ ํ์ ๋๋ค. - ๋ก๊ทธ ๋ฐ์ดํฐ ํํฐ๋ง ๋ฐ ์ฒ๋ฆฌ (
for๋ฃจํ): ์์คํ ๋ก๊ทธ ํ์ผ์ ๋ถ์ํ์ฌ ์ค๋ฅ ๋๋ ๋ณด์ ์ํ์ ์๋ณํฉ๋๋ค. ๋ก๊ทธ ํ์ผ์ ๋งค์ฐ ํด ์ ์๊ณ , ๋ถ์ ์ ํน์ ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ฃจํ๋ฅผ ์ค๋จํด์ผ ํ ์ ์์ผ๋ฏ๋กfor๋ฃจํ๊ฐ ๊ฐ์ฅ ํจ์จ์ ์ธ ์ต์ ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. - ๊ตญ์ ์ฌ์ฉ์๋ฅผ ์ํ ์ซ์ ํ์งํ (
map): ๊ตญ์ ์ฌ์ฉ์์๊ฒ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๊ธฐ ์ํด ์ซ์ ๊ฐ ๋ฐฐ์ด์ ๋ค์ํ ๋ก์ผ์ผ ์ค์ ์ ๋ฐ๋ผ ํ์ํ๋ ๋ฌธ์์ด๋ก ๋ณํํฉ๋๋ค.map์ ์ฌ์ฉํ์ฌ ๋ณํ์ ์ํํ๊ณ ํ์งํ๋ ์ซ์ ๋ฌธ์์ด์ ์ ๋ฐฐ์ด์ ์์ฑํ๋ฉด ์๋ณธ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋์ง ์์์ ๋ณด์ฅํฉ๋๋ค.
๊ธฐ๋ณธ ์ด์: ๋ค๋ฅธ ๋ฐ๋ณต ๋ฉ์๋
์ด ๊ธ์ for ๋ฃจํ, forEach, map์ ์ค์ ์ ๋์ง๋ง, JavaScript๋ ํน์ ์ํฉ์์ ์ ์ฉํ ์ ์๋ ๋ค๋ฅธ ๋ฐ๋ณต ๋ฉ์๋๋ ์ ๊ณตํฉ๋๋ค:
for...of: ์ดํฐ๋ฌ๋ธ ๊ฐ์ฒด(์: ๋ฐฐ์ด, ๋ฌธ์์ด, Map, Set)์ ๊ฐ์ ๋ฐ๋ณตํฉ๋๋ค.for...in: ๊ฐ์ฒด์ ์ด๊ฑฐ ๊ฐ๋ฅํ ์์ฑ์ ๋ฐ๋ณตํฉ๋๋ค. (๋ฐ๋ณต ์์๊ฐ ๋ณด์ฅ๋์ง ์๊ณ ์์๋ ์์ฑ๋ ํฌํจ๋๋ฏ๋ก ๋ฐฐ์ด ๋ฐ๋ณต์๋ ์ผ๋ฐ์ ์ผ๋ก ๊ถ์ฅ๋์ง ์์ต๋๋ค.)filter: ์ ๊ณต๋ ํจ์์ ์ํด ๊ตฌํ๋ ํ ์คํธ๋ฅผ ํต๊ณผํ๋ ๋ชจ๋ ์์๋ก ์ ๋ฐฐ์ด์ ์์ฑํฉ๋๋ค.reduce: ์ดํ๋ฎฌ๋ ์ดํฐ์ ๋ฐฐ์ด์ ๊ฐ ์์(์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ)์ ๋ํด ํจ์๋ฅผ ์ ์ฉํ์ฌ ๋จ์ผ ๊ฐ์ผ๋ก ์ค์ ๋๋ค.
๊ฒฐ๋ก
JavaScript์์ ๋ค์ํ ๋ฐ๋ณต ๋ฉ์๋์ ์ฑ๋ฅ ํน์ฑ๊ณผ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ดํดํ๋ ๊ฒ์ ํจ์จ์ ์ด๊ณ ์ต์ ํ๋ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ ํ์์ ์
๋๋ค. for ๋ฃจํ๊ฐ ์ผ๋ฐ์ ์ผ๋ก ์ต๊ณ ์ ์ฑ๋ฅ์ ์ ๊ณตํ์ง๋ง, forEach์ map์ ๋ง์ ์๋๋ฆฌ์ค์ ์ ํฉํ ๋ ๊ฐ๊ฒฐํ๊ณ ๊ธฐ๋ฅ์ ์ธ ๋์์ ์ ๊ณตํฉ๋๋ค. ์์
์ ํน์ ์๊ตฌ ์ฌํญ์ ์ ์คํ๊ฒ ๊ณ ๋ คํ์ฌ ๊ฐ์ฅ ์ ์ ํ ๋ฐ๋ณต ๋ฉ์๋๋ฅผ ์ ํํ๊ณ ์ฑ๋ฅ ๋ฐ ๊ฐ๋
์ฑ์ ์ํด JavaScript ์ฝ๋๋ฅผ ์ต์ ํํ ์ ์์ต๋๋ค.
์ฑ๋ฅ ๊ฐ์ ์ ํ์ธํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์ปจํ ์คํธ์ ๋ฐ๋ผ ์ ๊ทผ ๋ฐฉ์์ ์กฐ์ ํ๊ธฐ ์ํด ์ฝ๋๋ฅผ ๋ฒค์น๋งํนํ๋ ๊ฒ์ ์์ง ๋ง์ธ์. ์ต์ ์ ์ ํ์ ๋ฐ์ดํฐ ์ธํธ์ ํฌ๊ธฐ, ์ํ๋๋ ์ฐ์ฐ์ ๋ณต์ก์ฑ, ์ฝ๋์ ์ ๋ฐ์ ์ธ ๋ชฉํ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค.