[Javascript] filter 함수 사용하기

안녕하세요. 자바스크립트의 filter 함수를 사용해보겠습니다.

 

filter() 함수는 배열의 요소들 중에서 조건에 부합하는 모든 요소를 모아서 새로운 배열로 반환하는 함수입니다.

 

filter 함수의 구문은 아래와 같습니다.

const newArray = arr.filter(callbackFunction(element, index, array), thisArg);

filter 함수의 매개변수는 callbackFunction, 그리고 thisArg 입니다.

 

callbackFunction 에는 3개의 매개변수를 사용할 수 있습니다.

- element : 현재 요소 (필수)

- index : 요소의 인덱스 (선택)

- array : filter 함수를 호출한 배열 (선택)

 

thisArg는 callback을 실행 할 때 this로 사용하는 값입니다. (선택)

 

 

아래의 간단한 예제를 통해 filter 함수 사용법을 익혀보겠습니다.

    <script>
        var array = [
            { name: '김길동', age: 76, },
            { name: '김말이', age: 38, },
            { name: '한나라', age: 13, },
            { name: '김민수', age: 21, },
            { name: '이차돈', age: 28, },
            { name: '박준식', age: 62, },
            { name: '박수박', age: 16, },
        ]

        // ES6 문법인 화살표 함수를 사용했습니다.

        console.log("name 키의 값이 '김'으로 시작하는 객체만 뽑아서 다시 새로운 'newArray1' 라는 배열로 만듭니다.");
        var newArray1 = array.filter(item => item.name.startsWith('김'))
        for (var element of newArray1) {
            console.log(element)
        }

        console.log("age 키의 값이 10 이상 30 미만인 객체만 뽑아서 다시 새로운 'newArray2' 라는 배열로 만듭니다.");
        var newArray2 = array.filter(item => item.age < 30 && item.age >= 10)
        for (var element of newArray2) {
            console.log(element)
        }

        console.log('원래의 array 배열은 변하지 않았습니다.');
        for (var element of array) {
            console.log(element)
        }
        
    </script>

 

예제 코드에서도 알 수 있듯이, filter 함수의 가장 특징은 기존 배열의 값을 변경하지 않는다는 것입니다.

또한 filter 함수는 중복값을 제거하지 않기 때문에 중복값이 나올 수 있습니다.

 

이렇게 filter 함수에 대해 알아보았습니다.