배열은 자바스크립트에서 데이터를 저장하고 조작하는 데에 매우 유용한 자료구조입니다. 배열에는 여러 개의 요소들이 포함되어 있으며, 이때 특정한 기준에 따라 배열의 요소를 필터링하고 추출하는 것은 매우 일반적인 작업이 될 수 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 배열의 요소를 특정 기준으로 필터링하고 추출하는 방법에 대해 알아보겠습니다.

배열 필터링하기

자바스크립트 배열의 filter() 메소드를 사용하면 배열의 요소를 특정한 조건에 따라 필터링할 수 있습니다. filter() 메소드는 콜백 함수를 매개변수로 받으며, 이 콜백 함수는 배열의 각 요소에 대해 실행됩니다. 콜백 함수가 true를 반환하는 요소만 남겨진 새로운 배열이 반환됩니다.

다음은 filter() 메소드를 사용하여 배열의 요소를 필터링하는 예제입니다:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

위의 예제에서는 numbers 배열에서 짝수인 요소만 필터링하여 evenNumbers 배열에 저장하였습니다. filter() 메소드의 콜백 함수는 number 매개변수를 통해 배열의 각 요소에 접근하고, 해당 요소가 짝수인지 검사한 후 true 또는 false를 반환합니다.

배열에서 특정 값 추출하기

배열에서 특정한 조건을 만족하는 요소만 추출하고 싶다면 filter() 메소드와 함께 map() 메소드를 사용할 수 있습니다. map() 메소드는 배열의 각 요소에 대해 지정된 함수를 적용하고 그 결과를 새로운 배열로 반환합니다.

다음은 filter() 메소드와 map() 메소드를 함께 사용하여 배열에서 특정 값만을 추출하는 예제입니다:

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 },
  { name: 'David', age: 40 }
];

const names = people.filter(function(person) {
  return person.age > 30;
}).map(function(person) {
  return person.name;
});

console.log(names); // ['Charlie', 'David']

위의 예제에서는 people 배열에서 나이가 30보다 많은 사람들의 이름만을 추출하여 names 배열에 저장하고 있습니다. filter() 메소드를 사용하여 나이가 30보다 많은 사람들을 필터링하고, map() 메소드를 사용하여 사람들의 이름만을 추출하여 새로운 배열로 반환하고 있습니다.

위의 예제에서는 익명 함수를 사용하여 콜백 함수를 정의했지만, 화살표 함수를 사용하여 더 간결하게 표현할 수도 있습니다:

const names = people.filter(person => person.age > 30).map(person => person.name);

결론

이번 포스트에서는 자바스크립트 배열에서 요소를 특정 조건에 따라 필터링하고 추출하는 방법을 알아보았습니다. filter() 메소드를 사용하여 배열의 요소를 필터링하고, map() 메소드를 사용하여 요소를 추출하는 방법을 살펴보았습니다. 이러한 배열 조작 기능은 자바스크립트에서 매우 유용하게 사용되며, 다양한 데이터 처리 작업에서 자주 사용됩니다.