Javascript # 고차함수

📝 오늘 배운 내용

오늘은 고차함수에서 map.filter.reduce에 대해 작성하려고 한다.

먼저 map을 살펴보면,
map을 활용시 배열의 각 요소가 특정 논리에 의해 다른 요소로 지정된다고 생각하면 편하다.
예를 들어, 아래 배열의 요소들에 2을 곱한 값을 다시 배열로 출력을 해야할 때, for문을 사용하면 이렇게 코드를 작성할 수 있다. 두번째 예시는 map이라는 메서드를 활용한 예시다.

// 예시
const arr = [1, 2, 3];
const result = [];

for (let i = 0; i < arr.length; i++) {
  result.push(arr[i] * 2);
}

console.log(result) // [2, 4, 6]

• map() 메서드는 이처럼 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

// 예시
const arr = [1, 2, 3];

const mappedArr = arr.map((el) => {
  return el * 2;
})

console.log(mappedArr) // [2, 4 ,6]

다음은 filter 메서드를 알아보자.

filter() 메서드는 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
말 그대로 어떠한 조건에 대해 참인 요소들만 모아 반환해주는 메서드이다.
예를 들어, 아래의 배열 중 2의 배수만 출력 해야 할 때, for문을 사용한다면 이렇게 작성 할 수 있다.

// 예시
const arr = [1, 2, 3, 4];
const result = [];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
	result.push(arr[i])
  }
}

console.log(result) // [2, 4]

• filter() 메서드는 이처럼 조건을 만족하는 요소만 결과를 모아 새로운 배열을 반환한다.

// 예시
const arr = [1, 2, 3, 4];

const filteredArr = arr.filter((el) => {
  return el % 2 === 0;
})

console.log(filteredArr) // [2, 4]

마지막으로 reduce에 대해 알아보자.
reduce() 메서드로는 다양한 것들을 할 수 있지만 가장 간단한 요소들의 합을 구하는 예시로 작성하려고 한다. 먼저 for문을 사용하여 작성해보자.

// 예시 
const arr = [1, 2, 3, 4];
let sum = 0;

for (let i = 0; i < arr.length; i++) {
  sum = sum + arr[i];
}

console.log(sum) // 10

• reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

// 예시
const arr = [1, 2, 3, 4];

const sum = arr.reduce((acc, cur) => {
  return acc + cur;
});

console.log(sum) // 10