์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด์ ์ฒ๋ฆฌํ๋ ๋ฉ์๋ map, reduce, filter
์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐฐ์ด์ ์์์ ์ ๊ทผํ๋ ๋ํ ๋ฉ์๋์ธ map , reduce , filter ๋ ๊ฐ๋ฐ์๋ผ๋ฉด ํ์์ ์ผ๋ก ๊ทธ๋ฆฌ๊ณ ์ข ๋ ์์ธํ ์๊ณ ๊ฐ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
๊ฐ๊ฐ์ ํน์ง์ ๋ํด ์ด์ผ๊ธฐํ๋ฉด ๋๋ถ๋ถ์ ์๋ง๋
map -> ๋ชจ๋ ์์์ ํ ๋ฒ์ฉ ์ ๊ทผํ๊ธฐ reduce -> ๋ชจ๋ ์์๋ฅผ ํ๋๋ก ํฉ์น๊ธฐ filter -> ๋ชจ๋ ์์์์ ์ํ๋ ๊ฒ๋ง ๊ณจ๋ผ๋ด๊ธฐ
์ ๋์ ๊ฐ๋
์ ๊ฐ๊ณ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
๊ตณ์ด ์ ๋ฉ์๋๊ฐ ์๋๋ผ forEach ๋ฌธ ๋ฑ ๋ค๋ฅธ ๋ฐฉ์์ ์ฌ์ฉํด๋ ๊ฐ์ ๋ก์ง์ ๊ตฌํ์ด ๊ฐ๋ฅํ๋ฐ์.
๊ทธ๋ ๋ค๋ฉด ์ ๋ฉ์๋๋ผ๋ฆฌ๋ ์๋ก ๋ณ๊ฒฝํ์ฌ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋๋ก ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๊น์?
๊ฐ ๋ฉ์๋์ ๊ธฐ๋ฅ์ ์ดํด๋ณด๋ฉด์ ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
1. map
๋จผ์ ๋ฉ์๋๋ ์์ ๊ฐ์ผ๋ฉฐ *๊ฐ ๋ถ์ด์๋ ํ๋ผ๋ฏธํฐ๋ ์๋ตํ ์ ์์ต๋๋ค.
์ธ๋ฑ์ค ๋ ํ์ฌ๊ฐ์ ์ธ๋ฑ์ค, ๋ฐฐ์ด ์ map์ด ์ํํ๋ ๋ฐฐ์ด array๋ฅผ ์๋ฏธํฉ๋๋ค.
์ด์ map์ ์ฌ์ฉํ๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์ฝ๋๋ฅผ ํ์ธํด ๋ณด๊ฒ ์ต๋๋ค.
const myArray = [10, 20, 30, 40, 50];
const newArray = myArray.map((value) => { return value });
console.log(newArray); // [10, 20, 30, 40, 50]
console.log(myArray===newArray); //false
map์ ํด๋น ๋ฐฐ์ด ์์ฒด๋ฅผ ๋ฐ๊พธ๋ ๊ฒ์ด ์๋๋ฏ๋ก ๋ฆฌํด๊ฐ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ๋ค๋ฅธ ๋ณ์์ ๋ฃ์ด ์ฃผ์ด์ผ ํฉ๋๋ค.
ํ๋ผ๋ฏธํฐ์์ index๋ ํ์ฌ ์ ๊ทผํ ์์์ index์ด๋ฉฐ array๋ ์ํํ๋ ๋ฐฐ์ด ์ ์ฒด๋ฅผ ์ ๋ฌํฉ๋๋ค.
const myArray = [10, 20, 30, 40, 50];
const newArray = myArray.map((value, index, array) => {
if(index%2){
return value-array[1];
}else{
return value-array[0];
}
});
console.log(newArray);
๋ค์ ์ฝ๋๋ ์์ฃผ ์ ํ๋ ์ค์ ์ค ํ๋๋ก ์ฝ๋์ ๋์ ์ฌ๋ถ๋ฅผ ์๊ฐํด ๋ณผ ํ์๊ฐ ์์ต๋๋ค.
const myData = {10, 20, 30, 40, 50};
const newData = myData.map((value) => {return value+1});
console.log(newData);
์ ์ฝ๋๋ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
๋ฐ๋ก map์ ํน์ฑ ๋๋ฌธ์ธ๋ฐ์. map์ ๋ฐฐ์ด ์์ ๋์ํ๋ ๋ฉ์๋์ด๋ฉฐ ๊ฐ์ฒด object์์๋ ๋์ํ์ง ์์ต๋๋ค.
ํ์ง๋ง ๋ค์๊ณผ ๊ฐ์ด ๋ฐฐ์ด ๋ด๋ถ์ object๋ ์ ๊ทผ ๊ฐ๋ฅํฉ๋๋ค.
const myData = [{name:'chamchi', age:3},{name:'ggongchi', age:2},{name:'myulchi', age:1}];
const newData = myData.map((value) => value.name );
console.log(newData); //['chamchi', 'ggongchi', 'myulchi']
๊ทธ๋ ๋ค๋ฉด map์ ์ฌ์ฉํด reduce๋ filter ๋ฉ์๋์ ๊ฐ์ ๋ก์ง์ ๊ตฌํํ ์ ์์๊น์?
๋ค์ ์ฝ๋๋ฅผ ํตํด ํ์ธํ ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
const myArray = [1, 2, 3, 4, 5];
const newArray = myArray.map((value) => {
if(value%2){
return value;
}
});
console.log(newArray); //[1, undefined, 3, undefined, 5]
ํ์์ ์์๋ง ๋ฐํํ๊ณ ์ ์์ ๊ฐ์ด ์์ฑํ๋๋ผ๋ map์ ๋ชจ๋ ์์๋ฅผ ๋ฐํํฉ๋๋ค.
์ง์ ๋ถ๋ถ์ ๋ฆฌํด๊ฐ์ด ์ ์๋์ง ์์ undefined๋ก ๋ฐํ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
๋ฐ๋ผ์ map์ reduce, filter์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
2. reduce
๋จผ์ ๋ฉ์๋๋ ์์ ๊ฐ์ผ๋ฉฐ *๊ฐ ๋ถ์ด์๋ ํ๋ผ๋ฏธํฐ๋ ์๋ตํ ์ ์์ต๋๋ค.
๋์ ๊ฐ ์ ๋ฐฐ์ด์ ์ํํ๋ฉด์ ์์
์ ์ฒ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋์ ํ๋ ๊ฐ์ผ๋ก ์ํ๊ฐ ์ข
๋ฃ๋๋ฉด ์ต์ข
๋ฆฌํด๊ฐ์ด ๋ฉ๋๋ค.
reduce์ ์์๋ก ๋ชจ๋ ์์๋ฅผ ๋ํ๋ ์์๊ฐ ๋ง๋ค๋ณด๋ ์ฉ๋๋ ์ ์ฒด ์์ ๋ํ๊ฑฐ๋ ๋นผ์ ํ๋๋ก ๋ง๋ค๊ธฐ๋ผ๊ณ
์๊ณ ์์ ์ ์์ง๋ง ๋์ ๊ฐ ์ค์ ์ ํตํด ๋ค์ํ ๋ฐฉ์์ผ๋ก ํ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค.
์ธ๋ฑ์ค ๋ ํ์ฌ๊ฐ์ ์ธ๋ฑ์ค, ๋ฐฐ์ด ์ reduce๊ฐ ์ํํ๋ array ๋ฐฐ์ด์ ์๋ฏธํฉ๋๋ค.
๋ง์ง๋ง์ ์๋ ์์๊ฐ ์ ๋์ ๊ฐ์ ์ฒ์ ๊ธฐ๋ณธ๊ฐ์ ์ ๋ฌํฉ๋๋ค.
์๋ตํ๋ฉด 0์ด ๊ธฐ๋ณธ๊ฐ์ด ๋ฉ๋๋ค.
const myArray = [10, 20, 30, 40, 50];
const newArray = myArray.reduce((acc, value) => { return acc + value });
console.log(newArray); // 150
์์๊ฐ์ด ์๋ต๋์์ผ๋ฏ๋ก acc์ ๊ธฐ๋ณธ๊ฐ์ 0์ด ๋ฉ๋๋ค.
๊ทธ๋ผ ์ด๊ธฐ๊ฐ์ ์ค์ ํ ์ํ์ ๋ณด๊ฒ ์ต๋๋ค.
const myArray = [10, 20, 30, 40, 50];
const newArray = myArray.reduce((acc, value) => { return acc + value },100);
console.log(newArray); // 250
์ด๋ฅผ ์์ฉํ์ฌ ์ด๊ธฐ๊ฐ์ ์ค์ ํ๋ฉด ๋ค์ํ ๊ฒฐ๊ณผ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
๋จผ์ ๋ฐฐ์ด์ ๋ค๋ฅธ ๋ฐฐ์ด๋ก ๋ณต์ฌํ๋ ๊ธฐ๋ฅ์ ๊ตฌํํด ๋ณด๊ฒ ์ต๋๋ค.
const myArray = [10, 20, 30, 40, 50];
const newArray = myArray.reduce((acc, value) => {
acc.push(value);
return acc;
},[]);
console.log(newArray); // [10, 20, 30, 40, 50]
์ด๊ฒ์ผ๋ก map๊ณผ ๋๊ฐ์ ๋ก์ง์ ๊ตฌํ์ด ๊ฐ๋ฅํฉ๋๋ค.
๊ทธ๋ ๋ค๋ฉด filter๋ฅผ ๊ตฌํํด ๋ณด๊ฒ ์ต๋๋ค.
const myArray = [10, 20, 30, 40, 50];
const newArray = myArray.reduce((acc, value, index) => {
if(index%2){
acc.push(value);
}
return acc;
},[]);
console.log(newArray); // [20, 40]
์ฝ๋๋ฅผ ํตํด ํ์ธํด๋ณด๋ reduce๋ ์ด๊ธฐ๊ฐ ์ค์ ์ ํตํด map์ด๋ filter์ ๊ฐ์ ๋ก์ง์ ๊ตฌํ์ด ๊ฐ๋ฅํฉ๋๋ค.
3. filter
filter๋ ๋ง ๊ทธ๋๋ก ๋ฐฐ์ด์ ์์๋ฅผ ํํฐ๋งํ์ฌ ์กฐ๊ฑด์ด ์ฐธ์ด ๋๋ ์์๋ง ๋ฐํํฉ๋๋ค.
const myArray = [10, 20, 30, 40, 50];
const newArray = myArray.filter((value) => {
return value%20 === 0
});
console.log(newArray); // [20, 40]
filter๋ ํํฐ๋ง ๊ธฐ๋ฅ๋ง ๊ฐ๊ณ ์์ด map์ด๋ reduce์ ๋ก์ง์ ๋ง๋ค๊ธด ์ด๋ ค์ธ ๊ฒ ๊ฐ์ต๋๋ค.
map๊ณผ filter๋ ์ฉ๋๊ฐ ์กฐ๊ธ ๋ ํน์ ๋์ด ์๋ค๋ณด๋ ๋ค๋ฅธ ๋ฉ์๋์ ๋ก์ง์ ๊ทธ๋๋ก ๊ตฌํํ๊ธฐ๋ ์ด๋ ต์ง๋ง reduce๋ ์ด๊ธฐ๊ฐ์ ํตํด ๋ค์ํ ๋ก์ง์ ๊ตฌํ์ด ๊ฐ๋ฅํด ๋ค์ฌ๋ค๋ฅํ ๋ฉ์๋์ธ ๊ฒ ๊ฐ์ต๋๋ค.