[자바스크립트] javascript filter() 사용하기

[자바스크립트] javascript filter() 사용하기

 

 

 

 

 

 

 

 

 

자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수!

 

배열 요소 중, 어떠한 조건에 상응하는 모든 요소를 골라내고 싶다면 가장 알맞는 함수!

단, 결과 값은 배열로 리턴한다!

 

 

 

 

 

 

 

 

 

[사용법]

 

//화살표 함수 표기법
array.filter((element, index, array) => { ...});


//콜백함수로 호출하는 법
array.filter(callbackFn, thisArg);


//익명함수로 표기 법
array.filter(function(element, index, array) {

}, thisArg);

 

 

 

 

 

 

 

 

 

[간단설명]

 

array.filter() 는 배열을 순환하면서

콜백함수의 조건 "true" 인 모든 요소를 새로운 배열로 반환한다.

만약 조건에 맞는 요소가 없다면, 비어있는 배열을 리턴!

 

 

 

 

 

 

 

 

 

 

 

[특징]

 

• 값이 존재하지 않거나, delete 된 요소는 테스트하지 않는다.
• filter() 자체는 원본배열을 변형시키지 않는다.
• filter() 의 적용범위는 콜백함수의 첫 호출 시 정해진다.

 

 

 

 

 

 

 

 

 

 

[주의]

 

• 배열함수이므로, 객체에는 사용이 불가하다.
• 객체를 배열화하는 Object.keys() / Object.values() / Object.entries() 를 사용한다면 filter() 가능! 

 

 

 

 

 

 

 

 

 

 

파라미터(parameter) : 

 

 

callback함수 :
배열의 모든 요소를 test 할 함수. 조건에 "true" 인 요소는 새로운 배열로 리턴된다.

 

 

element : 
(순환 중) 현재 처리중인 요소 그 자체

 

index (optional) : 
(순환 중) 현재 처리중인 요소의 index

 

array (optional) : 
filter() 가 실행되고 있는 원본배열

 

thisArg (optional) : 
callback 함수가 실행중일 때 this로 사용될 값

 

 

 

 

 

 

 

 

 

 

 

 

---

[예제1]

 

var names = ['Son', 'Kane', 'Salah', 'Mane', 'Messi', 'Holland'];

//화살표 함수
var player = names.filter(el => el.toLowerCase().indexOf('s') >= 0)

//이름에 's' 가 들어간 선수는
//player = ['Son', 'Salah', 'Messi']

 

 

 

 

 

 

[예제2]

 

var array = [3, 7, 10, 17, 33];


//함수를 정의함
function getValues(value) {
    return value > 12
}


//미리 정의된 함수를 콜백함수로 사용
var cluster = array.filter(getValues)


//cluster = [17, 33]

 

 

 

 

 

 

[예제3]

 

var names = ['Son', 'Kane', 'Salah', 'Mane', 'Messi', 'Holland'];


// 사용자로부터 query 를 받아서 검색하는 함수
function searchNames(arr, userQuery) {
    return arr.filter(el => el.toLowerCase().indexOf(userQuery.toLowerCase()) >= 0)
}


console.log(searchNames(names, 's');  
// ['Son', 'Salah', 'Messi']

 

 

---

 

 

 

 

 

 

 

 

 

 

 

Object 에 Array.filter() 를 사용하고 싶다면?

https://devinserengeti.tistory.com/27?category=901017

[자바스크립트] javascript Object.values() 사용하기