[javascript] forEach, map, filter, reduce

forEach

const animals = [
  {name : 'monkey', size: 'medium', weight: 40},
  {name : 'tiger', size: 'big', weight: 500},
  {name : 'cat', size: 'small', weight: 30},
   {name : 'dog', size: 'small', weight: 50}
  ]

animals.forEach(function(item) {
  console.log(item)
});
//{name: 'monkey', size: 'medium', weight: 40}
//{name: 'tiger', size: 'big', weight: 500}
//{name: 'cat', size: 'small', weight: 30}
//{name: 'dog', size: 'small', weight: 50}

forEach로 돌면서 animals안에 있는 값들을 하나씩 가져왔음

map

어떤 배열을 다른 새로운 형태의 배열로 다시 재생산할 때 사용
즉 새로운 배열을 반환함

const animalsNames = animals.map(function(item){
	return item.name;
});

console.log(animalsNames);
// ['monkey', 'tiger', 'cat', 'dog']

값을 재생산해서 남겨야하기 때문에 return을 했음
콘솔을 찍어보면 animals안에 있는 name이 새로운 배열로 나오는 것을 볼 수 있다

filter

배열 안에서 특정 조건을 가진 아이템들만 뽑아내는 반복문

const smallAnimals = animals.filter(function(item){
	return item.size === 'small';
})
console.log(smallAnimals);
// {name: 'cat', size: 'small', weight: 30}
//{name: 'dog', size: 'small', weight: 50}

주로 데이터를 불러와서 데이터 테이블에서 필터하는 데 사용한다고 한다

reduce

const totalWeight = animals.reduce(function(acc, cur) {
  return acc + cur.weight;
}, 0);

console.log(totalWeight);

const totalWeight = animals.reduce(function(누산값, 현재값) {}, 초기값);
형태로 쓸 수 있다

참고 동영상 : https://youtu.be/vqdzVZxoRtM