Javascript 반복문 (forEach, map, filter, reduce)

const animals=[
    {name : 'lion' , size:'big', isAggresive: true, weight:200},
    {name : 'monkey' , size:'medium', isAggresive: true, weight:20},
    {name : 'cat' , size:'small', isAggresive: false, weight:10},
    {name : 'rat' , size:'small', isAggresive: false, weight:2},
]

//전통적인 반복문
for(let i=0; i<animals.length; i++){
    console.log(animals[i]);
}
/*출력문
{name: 'lion', size: 'big', isAggresive: true, weight: 200}
{name: 'monkey', size: 'medium', isAggresive: true, weight: 20}
{name: 'cat', size: 'small', isAggresive: false, weight: 10}
{name: 'rat', size: 'small', isAggresive: false, weight: 2}
*/


//보다 간결한 반복문
for(let i of animals){
    console.log(i)
}
//위의 출력문과 동일

 

 

forEach - 요소와 인덱스 접근이 가능하다.

animals.forEach(function(e, index){
    console.log(e);
    console.log(index);
})
/* 출력문
{name: 'lion', size: 'big', isAggresive: true, weight: 200}
0
{name: 'monkey', size: 'medium', isAggresive: true, weight: 20}
1
{name: 'cat', size: 'small', isAggresive: false, weight: 10}
2
{name: 'rat', size: 'small', isAggresive: false, weight: 2}
3 
*/

 

 

map : 어떤 배열을 다른 형태의 배열로 재생산

//animal 객체의 name속성값으로 이루어진 배열 재생산
const animalsNames = animals.map((e)=> {return e.name})

console.log(animalsNames); // ['lion', 'monkey', 'cat', 'rat']


const animalsNames = animals.map((e)=> {
    return `${e.name} size is ${e.size}`;
})

console.log(animalsNames) 
/*출력문
['lion size is big',
'monkey size is medium',
'cat size is small',
'rat size is small']
*/

 

 

filter : 특정 조건을 가진 요소만 뽑아내기 - 실시간 검색이 가능함.

const smallAnimals=animals.filter((e)=>{
    return e.size === 'small'
})

console.log(smallAnimals);
/*출력문
{name: 'cat', size: 'small', isAggresive: false, weight: 10}
{name: 'rat', size: 'small', isAggresive: false, weight: 2}
*/

 

 

reduce : 주로 배열안 합을 구할때 사용 (배열요소 합 구하기)

reduce( 누적값, 현재값, 인덱스, 요소) 형태입니다.

※ 첫번째 인자는 이전값이 아니라 누적값

const numbers=[1,22,333,44,555];

const total=numbers.reduce((acc,cur)=>{
    //acc : 더해진값(누적값) / cur : 현재값
    console.log(acc, cur);
    return acc + cur;
})
/*출력문
1 22
23 333
356 44
400 555
*/

console.log(total) //955

배열안 객체의 속성값 더하기

const totalWeight=animals.reduce((acc, cur)=>{
    console.log(acc, cur.weight);
    return acc + cur.weight;
},0)
/*출력문
0 200
200 20
220 10
230 2
*/

console.log(totalWeight); // 232