[javascript] filter 사용법 정리

javascript 에서 for 문 외에 반복문이 많이 있다.

forEach, filter, some, map 등 이 중에서 filter 에 대해 이야기 해보자

 

filter 는 말그대로 filtering 된 데이터만 반환해서 사용하는 것이다.

filter 를 사용되는 매개변수는 다음과 같다.

arr.filter(callback(element, index, array), thisArg)
element	처리할 현재 요소
index	처리할 현재 요소의 인덱스
array	filter 를 호출한 배열
thisArg	callback 을 실행할 때 this 로 사용하는 값

사용예제는 아래와 같다.

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

console.log(arr.filter(onFiltering));

function onFiltering(item){
	return item > 2;
}

filter 를 사용하면 내부적으로 루프를 돌면서 변수를 하나하나 확인하고 그 과정에 function 안에 넣어둔 조건에 맞으면 return 을 해주는 형태이다.

 

이렇게 사용하는것이 가장 기본적이다.

 

ES6 로 넘어오면서 아래처럼 변경하여 간소화 할 수 있기는 하다. 

console.log(arr.filter(onFiltering));

// 아래와 같이 변경도 가능 ES6 부터

console.log(arr.filter(item => item > 2);

하지만 아직 많은 기업에서는 ES5......스타트업들은 크게 상관이 없는데 공기업, 대기업, 기존부터 있었던 기업들은...장비들의 최신화 비율이 높지않아서.....상황에 맞춰서 쓰기를......

 

위와 같이 단순히 하나의 값을 바로 확인하고 return 하는 방법도 있지만 하나의 객체 형태로 여러 값을 비교하고 return 할 수 도 있다.

var aData = [
	{a : "Apple", 		b : "Red",		c: true },
    {a : "Banana", 		b : "Yellow",	c: false },
    {a : "Pineapple", 	b : "Yellow",	c: false },
    {a : "Melon", 		b : "Green",	c: true },
    {a : "Orange", 		b : "Orange",	c: false }
]

console.log(aData.filter(onPickYellow));

function onPickYellow(fruit){
	return fruit.b == "Yellow" || fruit.c == false;
}

위와 같이 Array 안에 Object 가 들어 있으면 여기에 있는 여러 변수를 비교하여 return 할 수 있다.

 

만약 for 문을 썼다면

var aData = [
	{a : "Apple", 		b : "Red",		c: true },
    {a : "Banana", 		b : "Yellow",	c: false },
    {a : "Pineapple", 	b : "Yellow",	c: false },
    {a : "Melon", 		b : "Green",	c: true },
    {a : "Orange", 		b : "Orange",	c: false }
]

var rValue = [];
for(var i = 0; i < aData.length; i++){
	if(aData[i].b == "Yellow" || aData[i].c == false){
    	rValue.push(aData[i]);
    }
}

console.log(aData.filter(rValue));

위와 같이 if 문을 사용하고 결과를 담을 변수를 선언해야하는 경우가 더 많으니 

엄청 복잡한 형태가 아니면 filter 를 사용하는 것도 깔끔하니 좋을 것같다.

좀 더 정확한 설명을 원한다면

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter