배열 고차함수 ( forEach/map/ filter/ find/ reduce )

돌리의 하루·2023년 1월 13일
0
post-thumbnail

혼란하다 혼란해!!!
우당탕탕 고차함수와 친해지기 대작전..✨
고차함수를 정복하고말겟따...

📚ForEach()

for문을 대체하는 고차 함수
배열을 순회하면서 연산을 수행

const arr = [1, 2, 3, 4, 5];
let total = 0;
 
Arr.forEach((item) => {
    total += item;
});
 
console.log(total); // 15

📚 map()

forEach와 비슷하게 순회하지만, 콜백함수에서의 실행결과를 리턴한 값으로 이루어진
새로운 배열을 반환한다.
어떠한 값을 다른 값으로 가르키다💨 라고 생각하면 더 이해하기 좋다.

const arr = [1, 2, 3, 4, 5];
const mapArr = arr.map((item) => {
    return item * 2 
});
 
console.log(mapArr); // [1, 4, 6, 8, 10]

📚 find() / findIndex() / filter()

  • find() : 찾고자 하는 그대로 반환한다.
  • findIndex() : 찾고자 하는 인덱스를 반환
  • filter() : 콜백 함수의 반환값이 true일때 해당 요소로만 구성된 새로운 배열을 생성
    조건을 넣어서 만들기 좋음.
const arr = [1, 3, 3, 5, 7];
const objectArr = [
    { name: 'Yeom', age: 10 },
    { name: 'Mango', age: 20 },
    { name: 'Straw', age: 30 }
];
 
console.log(objectArr.find(item => {
   return item.age === 20 
}); // {name: "Mango", age: 20}
 
console.log(arr.find(item => item === 3));  // 3
console.log(arr.filter(item => item === 3));  // [3, 3]
// find는 값을 하나만 반환한다.filter은 배열로 여러개를 반환한다.

📚reduce()

이 고차함수는 몇 번이나 봐도 이해가 힘들어서 문제 풀 때 고생좀 했다 ㅠㅠ
자주 보면서 머리에 정보를 넣는중이다 ㅎㅎ
어제 푼 문제들 중에 하나를 예제로 들어서 설명하자면,

//2차원 배열을 입력받아 배열의 요소들을 담고있는 단일 배열 리턴
const arr = [ [['a','b'], [1, 3], [true, false]]]

function joinArrayOfArrays(arr) {
 
  const result =  arr.reduce((arr,cur)=>{ 
    return arr.concat(cur);
  })
  return result;
}

arr은 누산값, cur은 현재값이며,
콜백함수의 반환값이 누산값으로 들어가 조건에 맞을때까지 배열을 순회한다.
위의 예제는 배열을 concat으로 합친 후 조건대로 reduce문을 돌렸다.
각각의 고차함수들을 예로 들 수 있는 문제들을 가져온 블로깅으로 곧 돌아옵니다 :P!💛

profile
진화중인 돌리입니다 :>

0개의 댓글