[JavaScript] filter()

📖리액트를 다루는 기술📖을 공부하면서 컴포넌트의 반복을 공부하면서 배열 객체의 내장함수를 많이 사용하였는데, 이를 좀 더 자세하게 알아보고 싶었다.

---

 

리다기에서 filter()메소드를 사용하는 예제가 있었다. 데이터를 제거하는 기능을 필터함수를 사용했다.

 

const onRemove = id => {
	const nextNames = name.filter(name => name.id !== id);
    	setNames(nextNames);
};

 

이 함수는 입력된 id를 받아서 그 id와 다른 즉, 해당된 id를 제외한 나머지 id에 해당되는 name들을 모아놓은 배열이 nextNames가 되는것이다.

그러고나서 setNames(nextNames)를 통해서 names값을 업데이트해주는것이다.

그렇다면, 여기서 filter()함수가 어떻게 적용이 되고, 어떻게 쓰이는 것일까?

한번 알아보도록 하겠다.

 

---

 

filter()

filter()메서드는 주어진 함수의 조건에 부합하는 요소들을 모아 새로운 배열로 반환하는 메소드이다.

말 그대로 해당 배열을 필터링하는 것이다.

 

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

 

filter메소드는 위의 구문처럼 작성하면된다.

여기서  callback은 각 요소를 시험할 함수이다.  true가 반환되면 유지되고,  false가 반환되면 버려진다.

callback함수는 boolean값을 가진다. 그렇기 때문에, 리턴값이 true인 요소만 모아서 새로운 배열을 만드는 것이다.

이는 조건을 통과한 요소들로 이루어진 새로운 배열을 반환(true인 값)하거나 어떠한 원소도 그 조건에 부합하지 않는다면(리턴이 undefined이므로), 빈 배열을 반환한다.

그리고, filter()는 배열을 변화시키지 않는다.

 

먼저, 간단한 예시에 적용해보자.

 

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

 

함수에서의 조건이 10이상의 수만 true로 반환해주고, true인 값들만 모아서 새로운 배열을 만들어 filtered에 넣어준다.

따라서, 조건에 부합하는 12, 130, 44를 원소로 가지는 배열을 반환해주었다.

 

filter함수는 이렇게 배열의 값들을 걸러내는 것 뿐만 아니라,

• JSON에서 걸러진 json을 만들기 위해
• 배열 내용을 검색하기 위해

등등 사용된다.

이 부분들은 아직 나도 많이 다뤄보지 못해서 내가 깊숙히 이해를 못했기 때문에 이 부분이 궁금한 분들은 이 문서를 읽어보는것을 추천한다.