[javascript] 자바스크립트 filter() 메소드와 map() 메소드 연속으로 사용하기
자바스크립트에서 배열을 다루다 보면 종종 배열 요소를 변형하거나 특정 조건을 만족하는 요소만 따로 추출해야 할 때가 있습니다. 이때 filter() 메소드와 map() 메소드를 연속으로 사용하여 원하는 결과를 얻을 수 있습니다.
filter() 메소드
filter() 메소드는 주어진 함수의 조건을 만족하는 모든 요소로 이루어진 새로운 배열을 반환합니다. 예를 들어, 1에서 10까지의 숫자 중에서 짝수만 추출하고 싶다면 다음과 같이 사용할 수 있습니다.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers는 [2, 4, 6, 8, 10]가 됩니다.
map() 메소드
map() 메소드는 배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환합니다. 예를 들어, 배열 내 각 요소를 제곱한 결과를 새로운 배열로 만들 수 있습니다.
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
// squaredNumbers는 [1, 4, 9, 16, 25]가 됩니다.
filter()와 map() 메소드 연속 사용
filter()와 map() 메소드를 연속하여 사용하면 원하는 조건의 요소를 추출한 후 변형시킬 수 있습니다. 예를 들어, 1에서 10까지의 숫자 중에서 짝수를 추출한 뒤 각 요소를 제곱한 배열을 얻고 싶다면 다음과 같이 사용할 수 있습니다.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquaredNumbers = numbers.filter(num => num % 2 === 0).map(num => num * num);
// evenSquaredNumbers는 [4, 16, 36, 64, 100]가 됩니다.
이처럼 filter() 메소드와 map() 메소드를 연속으로 사용하면 간결하고 가독성 있는 코드를 작성할 수 있으며, 원하는 배열을 손쉽게 다룰 수 있습니다.
위의 예시를 통해 filter()와 map() 메소드의 연속 사용법에 대해 알아보았습니다. 적절히 조합하여 원하는 데이터 처리를 쉽게 할 수 있으니, 다양한 상황에 유연하게 활용해보세요.