JavaScript 배열 메소드 filter() 쉽게 배우기 - 예시 코드 제공

JavaScript 배열 메소드 filter() 쉽게 배우기 - 예시 코드 제공

 

 

JavaScript에서 배열을 조작하고 원하는 조건을 충족하는 요소만 추출하는 데 사용하는 강력한 배열 메소드 중 하나가 filter()입니다. 이 글에서는 filter() 메소드의 사용법과 예시 코드를 통해 이해해보겠습니다.

 

 

filter() 메소드란?

 

 

filter() 메소드는 주어진 조건에 맞는 배열 요소만을 추출하여 새로운 배열을 생성합니다. 이 메소드는 원본 배열을 변경하지 않고, 조건을 충족하는 요소만을 선택할 때 주로 사용됩니다.

 

// 기본 문법
const newArray = array.filter(function(currentValue, index, array) {
    // 조건을 충족하는 경우에만 true를 반환
    return condition;
});

 

• currentValue: 현재 반복 중인 요소의 값
• index: 현재 요소의 인덱스
• array: 원본 배열

 

JavaScript 바닐라 자바스크립트 개념, 장점, 사용법, 예시 코드

 

filter() 메소드 사용 예시

 

이제 filter() 메소드의 사용 예시를 통해 실제 동작을 살펴보겠습니다.

 

// 예시 배열
const numbers = [1, 2, 3, 4, 5];

// 짝수만 추출
const evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

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

 

위 코드에서 filter()를 사용하여 numbers 배열에서 짝수만을 추출하여 evenNumbers 배열을 생성합니다.

 

 

filter()를 사용한 배열 요소 걸러내기

 

 

filter() 메소드를 사용하여 배열 요소를 걸러낼 수 있습니다. 예를 들어, 숫자 배열에서 특정 범위 내의 숫자만을 추출할 수 있습니다.

 

// 예시 배열
const scores = [85, 92, 78, 90, 88, 96];

// 90 이상의 점수만 추출
const highScores = scores.filter(function(score) {
    return score >= 90;
});

console.log(highScores); // [92, 90, 96]

 

위 코드에서 filter()를 사용하여 scores 배열에서 90 이상의 점수만을 추출하여 highScores 배열을 생성합니다.

 

 

filter()의 반환 값

 

filter() 메소드는 조건을 충족하는 요소로 이루어진 새로운 배열을 반환합니다. 원본 배열은 변경되지 않으며, 조건을 충족하지 않는 요소는 새 배열에 포함되지 않습니다.

 

const numbers = [1, 2, 3, 4, 5];

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

console.log(evenNumbers); // [2, 4]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

 

 

끝으로

 

filter() 메소드는 배열에서 조건을 충족하는 요소만을 추출하여 새로운 배열을 생성하는 유용한 배열 메소드입니다. 이를 통해 배열의 요소를 원하는 조건에 따라 걸러내거나 필터링할 수 있으며, 원본 배열을 변경하지 않습니다. filter()를 활용하여 JavaScript 코드를 보다 효율적으로 작성하고 필요한 데이터만을 추출하세요.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 배열 메소드 map() 쉽게 배우기 - 예시 코드 제공

 

JavaScript 배열 메소드 forEach() 쉽게 배우기 - 예시 코드 제공