수정하기 - 자바스크립트에서 filter, map, reduce 메서드는 어떻게 작동하나요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

<a href='https://sangseek.com/sangseeks/자바/ko'>자바</a><a href='https://sangseek.com/sangseeks/스크립트/ko'>스크립트</a>에서 `filter`, `map`, `reduce` 메서드는 배열을 다루는 데 매우 유용한 고차 함수입니다. 이들 각각은 배열의 요소를 처리하고 변환하는 데 사용되며, 함수형 프로그래밍의 개념을 기반으로 합니다. 아래에서 각 메서드의 작동 방식과 사용 예제를 자세히 설명하겠습니다.           1. `filter` 메서드    `filter` 메서드는 주어진 배열에서 특정 조건을 만족하는 요소들만을 추출하여 새로운 배열을 생성합니다. 이 메서드는 원본 배열을 변경하지 않으며, 조건을 만족하는 요소가 없을 경우 빈 배열을 반환합니다.             사용법  ```javascript  const array = [1, 2, 3, 4, 5];  const evenNumbers = array.filter(num => num % 2 === 0);  console.log(evenNumbers); // [2, 4]  ```             작동 원리  - `filter` 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 호출합니다.  - 콜백 함수가 `true`를 반환하는 요소만 새로운 배열에 포함됩니다.  - 배열의 모든 요소를 순회한 후, 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환합니다.           2. `map` 메서드    `map` 메서드는 주어진 배열의 각 요소를 변환하여 새로운 배열을 생성합니다. 이 메서드 역시 원본 배열을 변경하지 않으며, 변환된 요소들로 이루어진 새로운 배열을 반환합니다.             사용법  ```javascript  const array = [1, 2, 3, 4, 5];  const squaredNumbers = array.map(num => num * num);  console.log(squaredNumbers); // [1, 4, 9, 16, 25]  ```             작동 원리  - `map` 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 호출합니다.  - 콜백 함수의 반환값이 새로운 배열의 요소로 사용됩니다.  - 배열의 모든 요소를 순회한 후, 변환된 요소들로 이루어진 새로운 배열을 반환합니다.           3. `reduce` 메서드    `reduce` 메서드는 배열의 각 요소를 누적하여 단일 값을 생성합니다. 이 메서드는 <a href='https://sangseek.com/sangseeks/초기값/ko'>초기값</a>을 설정할 수 있으며, 배열의 모든 요소를 순회한 후 최종적으로 하나의 값을 반환합니다.             사용법  ```javascript  const array = [1, 2, 3, 4, 5];  const sum = array.reduce((accumulator, <a href='https://sangseek.com/sangseeks/currentValue/ko'>currentValue</a>) => accumulator + currentValue, 0);  console.log(sum); // 15  ```             작동 원리  - `reduce` 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 호출합니다.  - 콜백 함수는 두 개의 인자를 받습니다: 누적값(`accumulator`)과 현재 값(`currentValue`).  - 콜백 함수의 반환값은 다음 호출에서 누적값으로 사용됩니다.  - 배열의 모든 요소를 순회한 후, 최종적으로 누적된 값을 반환합니다.           예제: 세 메서드의 조합    이 세 가지 메서드는 함께 사용하여 복잡한 데이터 변환을 수행할 수 있습니다. 예를 들어, 학생들의 <a href='https://sangseek.com/sangseeks/점수 배열/ko'>점수 배열</a>에서 60점 이상의 학생들의 점수를 제곱하여 새로운 배열을 만들고, 그 점수의 총합을 구하는 예제를 살펴보겠습니다.    ```javascript  const scores = [45, 67, 89, 34, 90, 56, 78];    // 1. 60점 이상의 점수 필터링  const passingScores = scores.filter(score => score >= 60);    // 2. 필터링된 점수의 제곱  const squaredScores = passingScores.map(score => score * score);    // 3. 제곱된 점수의 총합  const total = squaredScores.reduce((acc, score) => acc + score, 0);    console.log(total); // 11673  ```           결론    `filter`, `map`, `reduce` 메서드는 자바스크립트에서 배열을 다루는 데 매우 강력한 도구입니다. 이들 메서드를 사용하면 코드의 가독성을 높이고, 배열의 요소를 효율적으로 처리할 수 있습니다. 각 메서드는 고유한 목적을 가지고 있으며, 필요에 따라 조합하여 사용할 수 있습니다. 이러한 메서드를 잘 활용하면 더욱 간결하고 효율적인 코드를 작성할 수 있습니다.