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

Q1: 자바스크립트의 `filter` 메서드는 무엇인가요?
A1: `filter`는 배열의 각 요소에 대해 주어진 조건을 검사하는 콜백 함수를 실행하여, 조건을 만족하는 요소만으로 구성된 새로운 배열을 반환하는 메서드입니다. 원본 배열은 변경하지 않습니다.

Q2: `filter` 메서드의 기본 문법은 어떻게 되나요?
A2:
```javascript
array.filter(function(element, index, array) {
// 조건을 반환하는 불리언 값
});
```
각 인자는 순서대로 현재 요소, 인덱스, 원본 배열을 의미하며, 콜백 함수가 `true`를 반환하는 요소만 결과 배열에 포함됩니다.

Q3: `map` 메서드는 어떻게 동작하나요?
A3: `map`은 배열의 각 요소를 주어진 콜백 함수로 변환하여, 변환된 값들로 새 배열을 만들어 반환합니다. 원본 배열은 변경되지 않습니다.

Q4: `map` 메서드 사용 예시를 알려주세요.
A4:
```javascript
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
```

Q5: `reduce` 메서드의 역할은 무엇인가요?
A5: `reduce`는 배열의 각 요소를 순회하며 누적값(accumulator)을 갱신하는 콜백 함수를 실행해 단일 값으로 줄이는 메서드입니다. 합산, 곱셈, 객체 변환 등이 가능합니다.

Q6: `reduce` 메서드의 문법과 인자는 무엇인가요?
A6:
```javascript array.reduce(function(accumulator, currentValue, currentIndex, array) {
// 누적 계산 후 반환
}, initialValue);
```
- `accumulator`: 누적된 값
- `currentValue`: 현재 처리 중인 요소
- `currentIndex`: 현재 인덱스
- `array`: 원본 배열
- `initialValue`: 누적 시작값 (optional)

Q7: `reduce`를 이용한 배열 합계 구하는 예제는?
A7:
```javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 10
```

Q8: `filter`, `map`, `reduce` 메서드는 원본 배열을 변경하나요?
A8: 아니요. 세 메서드 모두 원본 배열은 변경하지 않고 새로운 값이나 배열을 반환합니다.

Q9: 언제 `filter`, `map`, `reduce`를 사용해야 하나요?
A9:
- `filter`: 조건에 맞는 요소만 추출할 때
- `map`: 배열 요소들을 변환하여 새 배열 생성할 때
- `reduce`: 배열을 단일 값(합, 객체 등)으로 축약할 때

Q10: 이 메서드들은 배열이 아닌 다른 자료형에도 적용 가능한가요?
A10: 기본적으로 배열에 사용하는 메서드이며, 유사 배열 객체나 ES6의 `Map`, `Set` 등은 별도로 처리하거나 배열로 변환 후 사용할 수 있습니다.

자바스크립트에서 `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` 메서드는 배열의 각 요소를 누적하여 단일 값을 생성합니다.

이 메서드는 초기값을 설정할 수 있으며, 배열의 모든 요소를 순회한 후 최종적으로 하나의 값을 반환합니다.

사용법 ```javascript const array = [1, 2, 3, 4, 5]; const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 15 ``` 작동 원리 - `reduce` 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 호출합니다.

- 콜백 함수는 두 개의 인자를 받습니다: 누적값(`accumulator`)과 현재 값(`currentValue`). - 콜백 함수의 반환값은 다음 호출에서 누적값으로 사용됩니다.

- 배열의 모든 요소를 순회한 후, 최종적으로 누적된 값을 반환합니다.

예제: 세 메서드의 조합 이 세 가지 메서드는 함께 사용하여 복잡한 데이터 변환을 수행할 수 있습니다.

예를 들어, 학생들의 점수 배열에서 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` 메서드는 자바스크립트에서 배열을 다루는 데 매우 강력한 도구입니다.

이들 메서드를 사용하면 코드의 가독성을 높이고, 배열의 요소를 효율적으로 처리할 수 있습니다.

각 메서드는 고유한 목적을 가지고 있으며, 필요에 따라 조합하여 사용할 수 있습니다.

이러한 메서드를 잘 활용하면 더욱 간결하고 효율적인 코드를 작성할 수 있습니다.