JavaScript Array Filter

자바 스크립트에서 배열안의 특정한 조건에 맞는 값을 찾으려면 대부분 for문을 사용하는데

반복문을 통해 순회하여 해결할 수 있지만 권장하지 않는다

 

 

ex) for문을 사용하여 배열에서 5보다 큰 수 찾기

const condition = [];
const numbs = [1,2,3,4,5,6,7,8];

for ( x = 0; x < numbs.length; x++) {
	const target = numbs[x];
    
    if ( target > 5 ) {
    	condition.push( target );
	}
}

console.log(condition); // [ 6, 7, 8 ] 출력

 

ex) filter를 사용한 5보다 큰 수 찾기

const numbs = [1,2,3,4,5,6,7,8];
const condition = numbs.filter(numbs => numbs > 5);

console.log(condition); // [ 6, 7, 8 ] 출력

---

filter 활용 방법

const numbs = [1,2,3,4];

numbs.filter((number, index, source) => {
    console.log( 'number : ' + number ); //array에서의 순회 중인 현재 값
    console.log( 'index : ' + index ); //array에서의 해당 값의 index
    console.log( 'source : ' + source ); //filter하는 대상의 array
    return number > 2;
});

//결과
/*
number : 1
index : 0
source : 1,2,3,4

number : 2
index : 1
source : 1,2,3,4

number : 3
index : 2
source : 1,2,3,4

number : 4
index : 3
source : 1,2,3,4

[3, 4]
*/

const level = 2;
const items = [
    { name: 'HP포션', price: 50, level: 1},
    { name: 'MP포션', price: 100, level: 3},
    { name: '갑옷', price: 300, level:2},
    { name: '신발', price: 300, level:5}
];

const list = items.filter(items => items.level <= level);

console.log(list);

//결과
//[{name: 'HP포션', price: 50, level: 1}, {name: '갑옷', price: 300, level: 2}]

 

filter 코드에 대한 이해

ex) 100보다 큰 수를 반환하는 콜백함수

// ORIGINAL 코드
// const numbs = [1, 10, 100, 1000, 10000];
// function callback (element) {
// 	return element > 100;
// }
// const condition = numbs.filter(callback);
// console.log(condition);
// 결과
// [1000, 10000]


// 그러나 일반적으로 익명함수를 이용하여 사용
// const numbs = [1, 10, 100, 1000, 10000];
// const condition = numbs.filter(function(element) {
//	return element > 100;
// });
// console.log(condition);
// 결과
// [1000, 10000]


// 그러나 익명함수 마저도 arraw function 사용
// const numbs = [1, 10, 100, 1000, 10000];
// const condition = numbs.filter((element) => {
//	return element > 100;
// });
// console.log(condition);
// 결과
// [1000, 10000]

// 그러나 parameter가 하나인 경우는 괄호 생략 가능, 코드가 한줄이므로 중괄호, return 생략 가능
const numbs = [1, 10, 100, 1000, 10000];
const condition = numbs.filter(element => element > 100 );
console.log(condition);
// 결과
// [1000, 10000]

 

나만의 filter 함수를 만들기

const numbs = [10, 100, 1000, 10000];

function customFilter(origin, callback){
    const result = [];
    for(var i=0; i<origin.length; i++){
        if(callback(origin[i])){
            result.push(origin[i]);
        }
    }
    return result;
}

const condition = customFilter(numbs, element => element > 100);
console.log(condition); // [ 1000, 10000]