← 목록

JavaScript 배열 메소드: 매핑과 필터링 🖥️

작성: 2024년 05월 16일읽기: 약 3분

웹 개발을 배우는 여정에서 JavaScript는 중요한 역할을 합니다. 특히, 배열을 다루는 다양한 메소드들은 데이터를 처리하는 데 있어 필수적인 도구입니다. 오늘은 그 중에서도 map()filter() 메소드에 대해 알아보겠습니다. 이 두 메소드를 이해하고 활용하면 데이터를 효율적으로 조작할 수 있습니다.

JavaScript의 map() 메소드

map() 메소드는 배열의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 만듭니다. 이는 데이터의 형태를 변환할 때 유용하게 사용됩니다.

예를 들어, 우리가 가지고 있는 숫자 배열의 모든 요소를 두 배로 만들고 싶다면, 다음과 같이 map() 메소드를 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

JavaScript의 filter() 메소드

반면, filter() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과가 true를 반환하는 모든 요소로 새 배열을 만듭니다. 이는 특정 조건을 만족하는 요소만 추출할 때 사용됩니다.

예를 들어, 숫자 배열에서 짝수만 추출하고 싶다면, 다음과 같이 filter() 메소드를 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(number => number % 2 === 0);
console.log(evens); // [2, 4]

map()filter() 메소드는 자주 함께 사용되어 강력한 데이터 처리를 가능하게 합니다. 예를 들어, 우리가 숫자 배열을 가지고 있고, 이 배열의 짝수만 두 배로 만들고 싶다면, 두 메소드를 연쇄적으로 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const doubledEvens = numbers.filter(number => number % 2 === 0).map(number => number * 2);
console.log(doubledEvens); // [4, 8]

이처럼 map()filter() 메소드를 활용하면, 복잡한 데이터 처리 작업도 명확하고 간결한 코드로 해결할 수 있습니다. 웹 개발을 배우는 여정에서 이러한 배열 메소드들을 숙지하고 활용하는 것은 매우 중요합니다.

JavaScript 배열 메소드를 통해 데이터를 매핑하고 필터링하는 방법을 배워보았습니다. 이 기술들을 활용하여 더 효율적이고 강력한 웹 애플리케이션을 만들어보세요!