[javascript] 자바스크립트 배열에서 특정 조건을 만족하는 요소들을 추출하여 다른 배열에 저장하기

배열은 자바스크립트에서 여러 개의 값을 순서대로 저장하는 자료구조입니다. 때로는 배열에서 조건을 만족하는 요소들만 추출하여 새로운 배열을 만들어야 할 수도 있습니다. 이를 위해서는 여러 가지 방법이 있습니다.

filter 메서드를 사용하여 조건에 맞는 요소 추출

filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. 아래는 filter 메서드를 사용하여 배열에서 특정 조건을 만족하는 요소를 추출하는 예제입니다.

const numbers = [10, 15, 20, 25, 30];
const divisibleByFive = numbers.filter(num => num % 5 === 0);
console.log(divisibleByFive); // [10, 15, 20, 25, 30]

위 예제에서 numbers 배열에서 5로 나누었을 때 나머지가 0인 요소들을 모아 divisibleByFive 배열에 저장하였습니다.

for...of 루프를 사용하여 조건에 맞는 요소 추출

for...of 루프를 사용하여 배열의 각 요소를 순회하고 조건에 맞는 요소만 새로운 배열에 추가할 수도 있습니다.

const colors = ['red', 'green', 'blue', 'yellow', 'orange'];
const longColors = [];
for (const color of colors) {
  if (color.length > 4) {
    longColors.push(color);
  }
}
console.log(longColors); // ['green', 'yellow', 'orange']

위 예제에서는 colors 배열에서 길이가 4보다 큰 요소들만 longColors 배열에 추가하였습니다.

두 가지 방법의 장단점

filter 메서드를 사용하는 경우 한 줄로 간결하게 작성할 수 있고, 가독성이 높습니다. 반면에 for...of 루프를 사용하는 경우에는 조건에 따라 루프를 중간에 종료시킬 수도 있고, 추가적인 로직을 더 수월하게 구현할 수 있습니다.

배열에서 특정 조건을 만족하는 요소들만 추출하여 다른 배열에 저장하는 방법은 상황에 따라 다를 수 있으므로, 개발자는 자신의 상황에 맞게 적절한 방법을 선택하여 활용할 수 있습니다.

참고 자료