자바스크립트 filter 메서드

[역할]

filter 메서드는 JavaScript의 배열 메서드 중 하나로, 주어진 조건에 따라 배열의 요소들을 필터링하여 새로운 배열을 반환한다. 이 메서드는 원본 배열을 변경하지 않고, 조건에 맞는 요소들로 이루어진 새로운 배열을 생성하는 특징이 있다.

 

[구조] 

let newArray = array.filter(callback(element[, index[, array]])[, thisArg]);

 

매개변수

• callback(element[, index[, array]]): 배열의 각 요소에 대해 호출되는 함수.
• element: 현재 처리 중인 요소.
• index (선택적): 현재 처리 중인 요소의 인덱스.
• array (선택적): filter 메서드가 호출된 배열 자체.
• thisArg (선택적): callback 함수 내부에서 this로 사용할 값.

 

반환 값

filter 메서드는 조건을 만족하는 요소들로만 구성된 새로운 배열(newArray)을 반환한다.

콜백 함수의 반환 값

callback 함수는 true (새로운 배열에 포함) 또는 false(새로운 배열에 포함X) 를 반환해야 한다.

 

 

[예시1]

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

const evenNumbers = numbers.filter(number => number % 2 === 0);

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

 

[예시2]

const ui = {
  rpData: {
    OutRec1: {
      RCRD_C: 5 // 예제 데이터
    },
    OutRec2: [
      { HNGL_ISNM: "John" },
      { HNGL_ISNM: null },
      { HNGL_ISNM: "Doe" },
      { HNGL_ISNM: null },
      { HNGL_ISNM: "Smith" }
    ]
  }
};

// HNGL_ISNM이 null이 아닌 항목만 필터링하여 새로운 배열 생성
const filteredOutRec2 = ui.rpData.OutRec2.filter(item => item.HNGL_ISNM !== null);

// 필터링된 배열 확인
console.log(filteredOutRec2);

//배열을 돌면서 필터링 된 항목  출력 
filteredOutRec2.forEach(item => {
  console.log(item.HNGL_ISNM); 
});