자바스크립트 Filter()함수

filter()함수는

• 배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수입니다.
  필터링된 배열을 반환합니다.

JavaScript
arr.filter(callbackFn[, thisArg])
arr: filter() 함수를 적용할 배열입니다.

매개변수

callbackFn
배열의 각 요소를 처리하는 콜백 함수입니다. 콜백 함수는 배열의 요소를 전달 인자로 받고, 결과로 true 또는 false를 반환합니다. true를 반환하면 해당 요소가 필터링된 배열에 포함되고, false를 반환하면 해당 요소가 필터링된 배열에 포함되지 않습니다.
콜백 함수의 매개변수:
callbackFn(element[, index[, array]])
element: 현재 처리 중인 배열 요소
index: 옵션. 현재 처리 중인 배열 요소의 인덱스
array: 옵션. filter()를 호출한 배열 자체

thisArg : 옵션. callbackFn 함수 내부에서 사용할 this 값으로 사용할 값입니다.

filter() 함수의 작동 순서입니다.

1. filter() 함수를 호출할 때, 필터링할 배열을 콜백 함수에 전달합니다.
2. filter() 함수는 필터링할 배열의 첫 번째 요소를 선택하고, 이 요소를 콜백 함수의 첫 번째 매개변수(element)로 전달합니다.
3. 콜백 함수가 호출되고, 전달된 요소는 콜백 함수 내에서 사용할 수 있습니다. 이 콜백 함수 내에서 필요한 조건을 적용하고, return 키워드를 사용하여 해당 요소가 필터링 조건을 충족하는지 여부를 판단합니다.
4. 콜백 함수가 true를 반환하면, 현재 요소는 필터링된 배열에 포함됩니다. false를 반환하면 현재 요소는 필터링된 배열에 포함되지 않습니다.
5. filter() 함수는 다음 배열 요소를 선택하고 이와 같은 과정을 반복합니다.
6. 모든 배열 요소에 대한 콜백 함수 호출이 완료되면, filter() 함수는 필터링된 결과를 포함하는 새로운 배열을 반환합니다.
7. 반환된 배열에는 콜백 함수에서 true를 반환한 요소들만 포함됩니다.

자바스크립트 코드

console.log("==원본==");
const arr = [10, 20, 30, 40, 50];
console.log(arr);

console.log("==Filter(index)==");
const afterFilter = arr.filter((et, index) => index != 2);
console.log(afterFilter);

console.log("==Filter(et)==");
const afterFilter2 = arr.filter((et, index) => et != 30);
console.log(afterFilter2);

실행 Consol창

"==원본=="
// [object Array] (5)
[10,20,30,40,50]

"==Filter(index)=="
// [object Array] (4)
[10,20,40,50]

"==Filter(et)=="
// [object Array] (4)
[10,20,40,50]

Filter를 이용한 중복제거 예시

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

const uniqueNumbers = numbers.filter((element, index, arr) => {
    // 현재 요소가 이전에 등장하지 않은 경우만 true를 반환
    return arr.indexOf(element) === index;
});

console.log(uniqueNumbers); // 출력: [1, 2, 3, 4, 5]

2차배열에서의 Filter 예시

// 2차원 배열 생성
const students = [
    ["Alice", 25],
    ["Bob", 30],
    ["Charlie", 22],
    ["David", 35]
];

// 나이가 30 이상인 학생들만 필터링
const filteredStudents = students.filter(student => {
    // student 배열의 두 번째 요소(나이)가 30 이상인 경우만 true 반환
    return student[1] >= 30;
  });

console.log(filteredStudents); // 출력: [["Bob", 30], ["David", 35]]