자바스크립트(JavaScript) - filter() 배열의 내장함수 #2 [엄탱 개발일지]

안녕하세요. 숯같은 개발자가 되기를 원하는 엄탱이에요!

어제에 이어 배열 내장함수 2탄을 준비했습니다! 

제가 부족한 부분이 있다면 질타보다는 충고와 격려 그리고 사랑 및 저와의 토론을 해주시면 정말 감사하겠습니다 :)
항상 좋은 하루 되세요 :)

 

바로 시작하겠습니다!

filter() 간단 한줄 정리

filter는 배열의 값들중에 조건을 통과하는 값들을 모아 새로운 배열을 반환하는 함수입니다.

 

여기서 잠깐!!! 글쓴이의 생각!!!

읽기 좋고 깔끔한 코드를 작성하기 위해서는 각각의 역할을 담당하는 내장 함수는 그 역할에 충실해야 하며 반대로 구현하고자 하는 역할을 담당하는 내장 함수를 사용하는 것이 좋다고 생각합니다.
예를 들어 보겠습니다!
1. filter는 값을 필터링 하기 위해 사용되는 내장함수면 값을 필터링 하는 것에만 충실하는 것이 좋다고 생각합니다. 
2. 또한 반복문(for문 등등)을 통해 값을 필터링 할 수 있지만 filter를 사용해서 값을 변경하면 더 직관적으로 해당 코드의 역할을 알 수 있게 해 줍니다. 

 

filter() 정의

필터라는 단어의 사전적인 의미를 보면 "액체나 기체 속의 이물질을 걸러 내는 장치" 라는 의미를 갖고 있습니다.

filter 단어 그대로 무언가 필터링 될 것 같은 느낌이 드는 함수입니다 :)

정말 재밌지 않으신가요?? 사전적인 의미 그대로 filter라는 함수 역할이 한번에 파악되는 것 같습니다.

이처럼 함수명, 변수명 짓는게 어려우면서 중요하다고 생각합니다. 자, 그러면 MDN 사이트에서는 어떻게 설명을 하나 살펴보겠습니다!

 

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

MDN사이트에 따르면 filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다. 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다. filter()는 호출되는 배열을 변화시키지 않습니다.

 

위의 설명을 해석하자면, filter() 함수는 callback함수의 테스트(조건)를 통과하는 값들을 모아 새로운 배열로 반환하는 함수입니다.

 

위 예제를 해석해보면 words.filter()는 글자수가 6자 이상인 테스트를 통과한 글자만 모아서 기존 배열은 변화시키지 않고 새로운 배열을 반환한것을 확인 할 수 있다. 또는 아래와 같이 작성할 수도 있습니다.

 

filter 주의사항

 

MDN사이트에 의하면 filter() 에 의해 처리되는 요소의 범위는 callback의 첫 호출 전에 설정됩니다. fitler() 호출 시작 이후로 배열에 추가된 요소는 callback에 의해 방문되지 않습니다. 배열의 기존 요소가 변경 또는 삭제된 경우, callbakc에 전달된 그 값은 filter()가 그 요소를 방문한 시점에 값이 됩니다. 삭제된 요소는 반영되지 않습니다.

filter의 주의사항의 자세한 설명은 내장함수 map과 비슷하여 하나의 예만 들고 생략하도록 하겠습니다. 혹시나 필요하신분들은 배열 내장함수 map의 주의사항을 봐주시면 감사하겠습니다! -> 보러가기

 

---

filter는 호출한 배열은 변형되지 않지만, callback 함수에 의해서 변형될 수 있다. filter가 처리할 요소의 범위는 첫 callback을 호출하기 전에 정해집니다. filter가 시작한 이후 배열에 추가되는 요소 들은 callback을 호출하지 않습니다.

 

위 예제를 통해 호출한 배열이 콜백함수에 의해 값이 변형된것을 볼 수 있습니다. 하지만 처리할 요소는 callback함수가 호출 되기전, 즉 filte함수가 시작되는 동시에 ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'] 으로 정해져 있고 그 이후의 값들은 callbakc 함수가 호출되지 않습니다. [ 'exuberant', 'destruction', 'present' ]이 출력이 됩니다.

 

오늘 준비한 내용은 여기까지 입니다. 
읽어주셔서 감사합니다 :)

좋아요 및 댓글 달아주시면 감사하겠습니다 :) 

궁금하신 내용 및 잘못된 내용을 위한 댓글 혹은 토론하고 싶은 댓글은 백번, 만 번 환영입니다!!!