javascript filter 사용법 - 삽질중인 개발자

- JAVASCRIPT filter 사용법 - 

 

자바스크립트의 filter 메서드는 조건을 주고 해당 조건이 참인 요소를 모아 새로운 배열로 반환하는 메서드이다.

 

배열에서 원하는 데이터만 추출 하고 싶을 때 자주 사용하는 사용성이 좋은 메서드이다. 

 

여기서 잘 기억하고 있어야 하는 부분은 새로운 배열을 반환해준다는 점이다.

 

또한 filter는 중복값을 제거해주지 않는다. 따라서 중복값이 나올 수 있다.

 

 

기본 구문

arr.filter(callback(element[, index[, array]])[, thisArg])

callback : 각 요소에 대한 조건값

element : 처리할 현재 요소

index : 현재 인덱스

array : filter를 호출한 배열

thisArg : callback을 생행 할 때 this로 사용하는 값

 

위와 같은 인자 값을 받는데 보통 아래와 같은 형태로 많이 쓴다. ( =>는 지원이 안 되는 브라우저도 있어서 function(){}을 사용하는 게 좋다.)

 

사용방법 3가지 예시

list.filter(function(word){
  return word.length >= 6 ;
})

// 혹은 ---------------------------------------

list.filter(word => word.length >= 6);

// 혹은 ---------------------------------------
function filterCallbackFunction(word){
	return word.length >= 6;
};

list.filter(filterCallbackFunction);

 

일반 배열 사용법

let list = ["apple","persimmon","mandarin","strawberry","lemon","melon","banana","pear","peach", "persimmon"];


let result = list.filter(word => word.length >= 6);
// 글자수가 6자 이상이면 새로운 배열에 요소로 들어간다.

console.log(result);
// ["persimmon", "mandarin", "strawberry", "banana"]

 

중복 제거가 필요하다면 Set을 사용하면 편하다.

new Set(result);
// {"persimmon", "mandarin", "strawberry", "banana"}

 

 

JSON 배열 사용법

 

let jsonData = [
	{"name" : "apple"},
	{"name" : "persimmon"},
	{"name" : "mandarin"},
	{"name" : "strawberry"},
	{"name" : "lemon"},
	{"name" : "melon"},
	{"name" : "banana"},
	{"name" : "pear"},
	{"name" : "peach"},
	{"name" : "persimmon"}
]

let result3 = jsonData.filter(function(word){
  return word.name.length >= 6 ;
})


console.log(result3);
// [ 
//	{ "name": "persimmon" },
//	{ "name": "mandarin" },
//	{ "name": "strawberry" },
//	{ "name": "banana" }
//	{ "name": "persimmon"}
// ]

 

중복 제거가 필요하다면 중복의 기준이 상황에 따라 다르기에 메소드를 따로 만들어서 사용해야 한다. ( ex ) name 이 기준? age가 기준?  모든 값이 같을때? 등등 상황이 다름)