자바스크립트의 배열 메서드 중 filter()의 사용법은 무엇인가요?

Q1: 자바스크립트 배열의 filter() 메서드는 무엇인가요?
A1: filter() 메서드는 주어진 배열에서 조건을 만족하는 요소들만 모아 새로운 배열을 반환하는 함수입니다. 원본 배열은 변경되지 않습니다.

Q2: filter() 메서드의 기본 문법은 어떻게 되나요?
A2:
```javascript
array.filter(callback(element, index, array), thisArg)
```
- `callback`: 각 요소에 대해 실행되는 함수로, true를 반환하면 해당 요소가 결과 배열에 포함됩니다.
- `element`: 현재 처리 중인 배열 요소.
- `index`: 현재 처리 중인 요소의 인덱스(선택적).
- `array`: filter가 호출된 배열(선택적).
- `thisArg`: callback 함수 내부에서 사용할 this 값(선택적).

Q3: filter() 메서드를 사용하는 예제는?
A3:
```javascript
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]
```
위 예제에서 짝수만 골라 새로운 배열을 반환합니다.
Q4: filter() 메서드가 원본 배열을 변경하나요?
A4: 아니요, filter()는 원본 배열을 변경하지 않고 조건에 맞는 요소들로만 구성된 새로운 배열을 반환합니다.

Q5: callback 함수에서 반환하는 값은 어떤 역할을 하나요?
A5: callback 함수는 boolean 값을 반환해야 하며, true일 경우 해당 배열 요소가 최종 결과 배열에 포함되고 false일 경우 제외됩니다.

Q6: filter() 메서드의 thisArg는 어떤 상황에 사용하나요?
A6: thisArg는 callback 함수 내부에서 this가 참조할 객체를 설정할 때 사용합니다. 보통은 arrow function을 쓰면 필요 없지만, 일반 함수와 특정 컨텍스트가 필요한 경우 활용됩니다.

Q7: 배열의 빈 요소도 filter()에서 처리되나요?
A7: filter()는 sparse 배열(빈 요소가 있는 배열)에서 빈 요소는 callback 함수가 호출되지 않습니다. 따라서 빈 요소는 결과 배열에 포함되지 않습니다.

Q8: filter() 대신에 다른 메서드는 언제 쓰나요?
A8:
- 조건에 맞는 첫 번째 요소를 찾을 때는 `find()`
- 모든 요소를 변형할 때는 `map()`
- 조건 판별 결과가 true/false일 때는 `some()`, `every()`
위 메서드들과 역할이 다릅니다.

---

요약하자면, `filter()`는 조건에 따라 배열을 걸러내 새 배열로 반환하는 매우 유용한 메서드입니다. 사용자가 원하는 필터 기준을 callback 함수로 작성하여 간단히 배열을 다룰 수 있습니다.

JavaScript의 `filter()` 메서드는 배열에서 특정 조건을 만족하는 요소들로만 구성된 새로운 배열을 생성하는 데 사용됩니다.

이 메서드는 원본 배열을 변경하지 않고, 조건에 맞는 요소들만 포함된 새로운 배열을 반환합니다.

`filter()` 메서드는 주로 배열의 요소를 필터링하여 원하는 데이터를 추출할 때 유용하게 사용됩니다.

기본 사용법 `filter()` 메서드는 다음과 같은 형식을 가집니다: ```javascript let newArray = array.filter(callback(element[, index[, array]])[, thisArg]); ``` - array : 필터링할 원본 배열입니다.

- callback : 각 요소에 대해 실행될 함수로, 다음과 같은 매개변수를 가집니다: - element : 현재 처리 중인 배열 요소. - index (선택적): 현재 요소의 인덱스. - array (선택적): `filter()`가 호출된 배열. - thisArg (선택적): `callback`을 실행할 때 사용할 `this` 값. - newArray : 조건을 만족하는 요소들로 구성된 새로운 배열. 예제 1. 기본적인 사용 예 ```javascript const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // [2, 4, 6] ``` 위의 예제에서 `filter()` 메서드는 배열 `numbers`의 각 요소를 검사하여 짝수인 경우에만 새로운 배열 `evenNumbers`에 포함시킵니다.



2. 객체 배열 필터링 객체 배열을 필터링할 때도 유용하게 사용할 수 있습니다.

```javascript const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }, { name: 'David', age: 20 } ]; const adults = users.filter(user => user.age >= 30); console.log(adults); // [{ name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 }] ``` 이 예제에서는 `users` 배열에서 나이가 30세 이상인 사용자들만 필터링하여 `adults` 배열을 생성합니다.



3. 인덱스를 사용하는 경우 필터링할 때 인덱스를 사용할 수도 있습니다.

```javascript const numbers = [10, 20, 30, 40, 50]; const filteredNumbers = numbers.filter((num, index) => index % 2 === 0); console.log(filteredNumbers); // [10, 30, 50] ``` 위의 예제에서는 인덱스가 짝수인 요소들만 필터링하여 새로운 배열을 생성합니다.

주의사항 - `filter()` 메서드는 원본 배열을 변경하지 않습니다.

항상 새로운 배열을 반환합니다.

- 조건을 만족하지 않는 요소는 새로운 배열에 포함되지 않으며, 조건을 만족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.

- `filter()` 메서드는 배열의 각 요소에 대해 `callback` 함수를 실행하므로, 배열의 길이에 따라 성능에 영향을 미칠 수 있습니다.

결론 JavaScript의 `filter()` 메서드는 배열에서 특정 조건을 만족하는 요소들로 새로운 배열을 생성하는 데 매우 유용한 도구입니다.

배열의 각 요소를 검사하고, 원하는 조건을 기반으로 필터링할 수 있어 데이터 처리 및 조작에 있어 강력한 기능을 제공합니다.

다양한 상황에서 유용하게 사용할 수 있으므로, 배열을 다루는 작업에서 자주 활용될 것입니다.