[Javascript] 배열 함수 filter(feat.리액트 불변성 유지)

자바스크립트의 배열 내장 함수 filter는 말그대로 '필터'를 씌워 조건에 맞지 않는 원소를 걸러내는 함수입니다.

 

간단한 예로 알아보겠습니다.

 

const array = [1, 2, 3];
const filterArray = array.filter(num => num > 3);

 

filter의 파라미터에는 조건을 확인해주는 '함수'가 들어가야만 합니다. 파라미터로 넣는 함수는 true or false를 return해야 하고,

 

false인 원소는 걸러지게 됩니다.

 

 

리액트의 불변성 유지와 무슨 관련이 있는지?

리액트의 state에서 가장 중요한 점은 불변성을 유지해 주어야 한다는 것입니다.

 

filter 함수는 기존의 배열을 수정하는 것이 아니라, 새로운 배열을 만들어 주기 때문에 리액트의 불변성을 효율적으로 유지할 수 있습니다.

 

물론, 리소스 상으로 굳이 새로운 배열을 만드는 게 손해일 수 있지만, 리액트에서는 화면을 업데이트하는 과정에서 수정 불가능한 변수를 사

 

용하는 것이 훨씬 효율적이기 때문에 모든 경우에서 filter가 효율적이라고 할 수는 없겠습니다.