자바스크립트에서 배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 자료구조입니다. 이러한 배열을 다루다보면 특정 기준에 따라 원하는 항목만 필터링하거나 추출하는 경우가 자주 발생합니다. 이번 포스트에서는 자바스크립트 배열의 요소를 특정 기준으로 필터링하고 추출하는 방법에 대해 알아보겠습니다.

1. Array.prototype.filter() 메소드를 사용한 필터링

Array.prototype.filter() 메소드는 주어진 기준에 따라 배열의 요소들을 필터링하여 새로운 배열을 생성합니다. 이 메소드는 조건에 맞는 요소들로 이루어진 새로운 배열을 반환합니다.

다음은 filter() 메소드를 사용하여 배열의 요소 중 3의 배수만 필터링하는 예시입니다.

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

const filteredNumbers = numbers.filter((number) => {
  return number % 3 === 0;
});

console.log(filteredNumbers); // [3, 6, 9]

위의 코드에서 filter() 메소드의 인자로 전달한 콜백 함수는 각 요소의 값을 검사하여 true를 반환하는 경우에만 해당 요소를 포함시킵니다. 이를 통해 3의 배수인 요소들만 추출하여 filteredNumbers 배열에 저장합니다.

2. for…of 루프를 사용한 필터링

for...of 루프를 사용하여 배열의 요소를 순회하면서 특정 조건에 부합하는 요소들만 추출할 수도 있습니다.

다음은 for...of 루프를 사용하여 배열의 요소 중 5보다 큰 숫자들만 추출하는 예시입니다.

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

const filteredNumbers = [];

for (const number of numbers) {
  if (number > 5) {
    filteredNumbers.push(number);
  }
}

console.log(filteredNumbers); // [8, 6, 9, 7, 10]

위의 코드에서 for...of 루프를 사용하여 numbers 배열의 각 요소를 순회하면서 5보다 큰 숫자들만 filteredNumbers 배열에 추가합니다.

3. Array.prototype.reduce() 메소드를 사용한 필터링

Array.prototype.reduce() 메소드를 사용하면 배열의 요소들을 순차적으로 처리하면서 특정 조건에 맞는 요소들을 필터링할 수 있습니다.

다음은 reduce() 메소드를 사용하여 배열의 요소 중 홀수로 이루어진 새로운 배열을 생성하는 예시입니다.

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

const filteredNumbers = numbers.reduce((accumulator, currentNumber) => {
  if (currentNumber % 2 !== 0) {
    accumulator.push(currentNumber);
  }
  return accumulator;
}, []);

console.log(filteredNumbers); // [1, 3, 5, 7, 9]

위의 코드에서 reduce() 메소드의 콜백 함수는 배열의 각 요소를 순회하면서 홀수인 경우에만 accumulator 배열에 추가합니다. 초기값으로 빈 배열 []을 전달하여 새로운 배열을 생성합니다.

결론

이 글에서는 자바스크립트 배열의 요소를 특정 기준으로 필터링하고 추출하는 세 가지 방법을 알아보았습니다. filter() 메소드, for...of 루프, 그리고 reduce() 메소드를 사용하여 배열의 요소를 쉽게 처리할 수 있습니다. 이러한 방법들을 효과적으로 활용하면 자바스크립트 배열에서 원하는 항목들을 추출하여 다양한 작업을 수행할 수 있습니다.