배열메서드 find(), filter() 차이

find(function(){}) => 데이터요소들중 해당 조건의 첫번째 값가져옴

filter(function() =데이터 요소들중 해당조건의 데이터요소들을 배열로 생성

    //배열 메서드 find() : 데이터 요소 찾기 
    {
      const arr29 = [100, 200, 300, 400, 500];
      //const target1 = arr29.find(function(){}); //undefined

      const target1 = arr29.find((element) => {
        return element > 100
      });
      const target2 = arr29.find(el => el == 200);

      document.write("*** 31. 배열 메서드 find() ***<br>");
      document.write(target1, "<br>"); //200
      document.write(target2, "<br><br>"); //200
    }
    //배열 메서드 filter() : 데이터 요소 찾기(배열로 생성)
    {
      const arr30 = [100, 200, 300, 400, 500];

      const target1 = arr30.filter(element => {
        return element > 100; 
      });
      const target2 = arr30.filter(el => el === 200);

      document.write("*** 32. 배열 메서드 filter() ***<br>");
      document.write(target1, "<br>");//200,300,400,500
      document.write(target2, "<br><br>"); //200
    }

// 배열 메서드 reduce() : 데이터의 모든 값을 합산 
    //concat과 비슷한데 연산할때 사용, 
    //보통 합계를 구할때 사용하나 index 최댓값등도 구할수있음
    //****배열의 크기가 길수록 map,filter 사용하는 것보다 간소화된 함수를 짤수 있음.
    {
      const arr31 = [100, 200, 300, 400, 500];

      const sum1 = arr31.reduce((prev, current) => {
        return prev + current;
      });
      const sum2 = arr31.reduce((p, c) => p + c);

      document.write("*** 33. 배열 메서드 reduce() ***<br>");
      document.write(sum1, "<br>"); //1500
      document.write(sum2, "<br><br>"); //1500

** reduce의 간소화를 볼수 있는 예(하단 블로그분이 잘 정리해주셔서 링크 남김)

steemit.com/javascript/@rouka/reduce

//조건별로 값을 변환하거나 수집하는 작업을 동시에 할 경우에는 reduce 함수가 꽤 
//가독성이 있고 성능도 좋개 구현할 수 있다.
//아래 필터링과 값 매핑을 filter + map 하는 예제를 보자

// 첫번째 순회로 값을 필터링하고 나중에 곱하게 된다. 즉 두번의 루프를 돈다.
// 엔진별로 최적화(lazy evaluation) 를 할 수 있지만 그건 고려하지 않기로...
[ 2, 4, 5, 6, 8 ]
    .filter(val => val%2 === 0)
    .map(val => val * 10);

// 루프 한번에 filter, map 완료.
[ 2, 4, 5, 6, 8 ].reduce((acc, val) => {
    if(val%2 === 0) {
        acc.push(val * 10)
    }
    return acc;
}, []);