[JS] Learn- forEach, map, filter, reduce

❓forEach

• 배열 ( [ ] ) 의 요소들을 탐색하고, 작업을 수행하는 메서드
• 쉬운말로 그냥 배열 뻉뻉이돌면서 콜백함수 적용.
• 대충 반복문(for문)과 똑같은 친구임.

대충 이런 느낌의 함수일거임

      const 대충만들어보는forEach = (predicate, thisArg) => {
        //하나하나 탐색하면서 콜백함수를 반복호출
        //JS는 함수형프로그래밍 이므로, 이렇게 parameter로 함수가 오는 것이 가능함.
        for(let i = 0; i<배열.length; i++){
          predicate(a[i],i);
        }
      }

그래서 어떻게 쓰는건데?

      a=[0,1,2,3,4,5]
//배열의 요소의 멋진 표현= a[i] , 배열의 인덱스 = i = idx = index 
//forEach의 2번째 parameter인 thisArg (=[1,2])는 콜백함수 안으로 바인딩이 된다. 
//옵셔널(선택사항)이기 떄문에 필요한 상황일 때 쓰면 된다.
      a.forEach(function(배열의요소,배열의인덱스){
        console.log(배열의요소,배열의인덱스,this);
      },[1,2])

햇갈리지말자구요!

forEach의 안에있는 (function(어쩌고){저쩌고}) 는 CallBack Function(콜백함수)이다.

👀한번 예제를 만들어보자

	const arr=['정현', '나희', '진상', '연주', '종엽'] 
	arr.forEach((name, idx) =>
        console.log("index: " + idx + ", name: " + name),
      )

---

❓map

• 배열 ( [ ] ) 의 요소들을 탐색하고, 그 요소들을 이용하여 새로운 배열을 생성하고, return 해주는 메서드
• 쉬운말로 얘도 forEach 처럼 배열뺑뻉이돌면서 콜백함수를 적용해줌. 근데, 새 배열을 생성하고 return 해준다는게 뽀인트.
• 원본 배열의 길이 = 새 배열의 길이

대충 이런 느낌의 함수일거임

      const 대충만들어보는map = (predicate, thisArg) => {
        //빈배열을 선언해주고,
        let list = []
        //뺑뻉이 돌면서 빈배열에 하나하나 차곡차곡 넣어줌.
        //아하, 이래서 배열을 리턴하는거구나
        for (let i = 0; i < 배열.length; i++) {
          list.push(predicate(a[i], i))
        }
       return list
      }

그래서 어떻게 쓰는건데?

요론식으루 제곱된 값들이 들은 새 배열이 출력 됨

      const arr = [0, 1, 2, 3, 4, 5]
      const square = arr.map((value, idx) => {
        return v * v
      })

      console.log(square)

---

❓filter

• 배열 ( [ ] ) 의 요소들을 탐색하고, 작업을 수행하는 메서드
• 쉬운말로 얘도 map 처럼 배열뺑뻉이돌면서 콜백함수를 적용해서 새 배열을 생성하고 return 해줌. 근데 조건에 맞는 애들만 뱉어주는게 뽀인트.

대충 이런 느낌의 함수일거임

      const 대충만들어보는filter = (predicate, thisArg) => {
        let list = []
        for (let i = 0; i < 배열.length; i++) {
          //조건이 참인 경우만, 새 배열에 넣어줌
          if(predicate(a[i], i)) list.push(a[i]);
        }
        return list
      }

그래서 어떻게 쓰는건데?

요론식으루 조건들을 만족한 새 배열(짝수)이 출력 됨

      const arr = [0, 1, 2, 3, 4, 5]
      const evenNumber = arr.filter((value, idx) => {
        return value % 2 === 0
      })

      console.log(evenNumber)

---

❓reduce

• 배열 ( [ ] ) 의 요소들을 탐색하고, 작업을 수행하는 메서드.
• 쉬운말로 그냥 배열 뻉뻉이돌면서 콜백함수 안에든 작업에 대한 값을 출력함.
• 멋진말로 누산기 라고 함.

대충 이런 느낌의 함수일거임

      const 대충만들어보는reduce = (predicate, value) => {
        let result = value; 
        for (let i = 0; i < 배열.length; i++) {
          result = predicate(result, a[i]); 
        }
        return result
      }

그래서 어떻게 쓰는건데?

요론식으루 모든 배열을 더한 값이 출력 됨

      const arr = [0, 1, 2, 3, 4, 5]
      const arrSum = arr.reduce((acc, cur) => {
        return acc + cur
      })

      console.log(arrSum)