본문 바로가기
개발지식

자바스크립트의 필터(Filter)와 맵(Map) 함수

by hunovator 2024. 2. 6.
반응형

자바스크립트에서는 배열을 다루는 데에 필터(Filter)와 맵(Map) 함수가 매우 유용합니다. 이 두 함수는 함수형 프로그래밍의 개념을 바탕으로 하며, 각각의 독특한 기능을 통해 배열을 조작하고 변형하는 데에 활용됩니다.


### 필터(Filter) 함수

필터 함수는 배열 내의 각 요소를 평가하여 주어진 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환합니다. 즉, 배열에서 특정 조건을 만족하는 요소들만을 걸러내어 새로운 배열을 생성하는 함수입니다. 이 함수를 사용함으로써 우리는 원하는 조건을 가진 요소들만을 쉽게 추출할 수 있습니다. 필터 함수는 기존 배열을 변경하지 않고 새로운 배열을 반환하기 때문에, 원본 데이터를 보존하는 데에 유용합니다.

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers는 [2, 4]가 됩니다.

위의 예시에서는 배열 numbers에서 짝수인 요소들만을 추출하여 새로운 배열 evenNumbers를 생성하고 있습니다. 이처럼 필터 함수를 사용하면 조건에 맞는 요소들을 손쉽게 추출할 수 있습니다.


2, 맵(Map) 함수

맵 함수는 배열 내의 각 요소에 대해 주어진 함수를 호출한 결과로 새로운 배열을 생성합니다. 즉, 배열의 각 요소를 변형하여 새로운 배열을 만드는 함수입니다. 이 함수를 사용함으로써 우리는 배열의 각 요소를 일괄적으로 변환할 수 있습니다. 맵 함수는 각 요소에 대해 동일한 작업을 수행하고자 할 때 유용합니다.

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(num => num * 2);
// doubledNumbers는 [2, 4, 6, 8, 10]이 됩니다.

위의 예시에서는 배열 numbers의 각 요소를 2배로 만들어 새로운 배열 doubledNumbers를 생성하고 있습니다. 이처럼 맵 함수를 사용하면 배열의 각 요소를 특정 연산에 따라 변형할 수 있습니다.

 

3. 필터와 맵의 활용

필터와 맵 함수는 각각 요소를 걸러내거나 변형할 때 유용합니다. 이 두 함수를 함께 사용하면 더욱 강력한 기능을 발휘할 수 있습니다. 예를 들어, 배열에서 특정 조건을 만족하는 요소들을 걸러낸 후, 그 결과에 대해 추가적인 변형을 가하는 등의 작업을 할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];

const squaredEvenNumbers = numbers.filter(num => num % 2 === 0).map(num => num ** 2);
// squaredEvenNumbers는 [4, 16]가 됩니다.


위의 예시에서는 배열 numbers에서 짝수인 요소들을 먼저 걸러내고, 그 결과에 대해 각 요소를 제곱하여 새로운 배열을 생성하고 있습니다. 이처럼 필터와 맵 함수를 조합하여 배열을 다양하게 조작할 수 있습니다.

 

4. 결론

자바스크립트의 필터(Filter)와 맵(Map) 함수는 배열을 다루는 데에 매우 유용한 함수입니다. 필터 함수는 배열에서 특정 조건을 만족하는 요소들을 걸러내어 새로운 배열을 생성하고, 맵 함수는 배열의 각 요소를 변형하여 새로운 배열을 생성합니다. 이 두 함수를 적절히 조합하여 배열을 다양하게 조작할 수 있으며, 함수형 프로그래밍의 개념을 적용하여 코드를 더욱 간결하고 효율적으로 작성할 수 있습니다.

반응형