filter, map, every

filter

 

 

filter() 메서드

 

• 자바스크립트 배열의 내장 함수
• 주어진 함수의 테스트를 통과하는 모든 요소를 모아(true면 요소를 유지, false면 버림) 새로운 배열을 반환함
• callback 함수는 호출되는 배열을 변화시키지 않음
• 따라서, 내가 원하는 값들을 필터링 할 수 있음

※ callback 함수는 3개의 인수와 함께 호출됨

┌ ⑴ 처리할 현재(대상) 요소값

├ ⑵ 처리할 현재(대상) 요소의 인덱스

└ ⑶ filter을 호출한 배열 객체(=순회되는 배열 객체)

 

 

기본 사용법

 

 

 

filter()을 활용한 검색 예시

 

└ profiles 배열에 들어있는 profile.detail이 age를 포함하고 있으면 profiles 배열로 구성

 

 

filter()을 활용한 삭제 예시

 

└ profiles 배열에서 profile.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬

    = profile.id 가 id인 것을 제거

 

 

 

---

 

 

map

 

 

map() 메서드

 

• 자바스크립트 배열 객체의 내장함수
• 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성하며, 반복되는 컴포넌트를 렌더링 할 수 있게 해주는 함수

 

 

기본 형태

 

 

 

파라미터

 

• callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지
          ┌ currentValue : 현재 처리하고 있는 요소
          ├ index : 현재 처리하고 있는 요소의 index 값
          └ array : 현재 처리하고 있는 원본 배열
          └ thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스

 

 

예시

 

 

 

예시 (ES6 문법)

 

 

 

활용 예시

 

 

 

 

 

---

 

 

Every

 

 

Every() 메서드

 

• 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트함
• Boolean 값을 반환함

 

 

기본 형태

 

 

 

파라미터

 

• callbackFunc : 각 요소를 시험할 함수로 파라미터는 다음 세가지
          ┌ element : 배열에서 처리되는 현재 요소
          ├ index (선택항목) : 처리할 현재 요소의 인덱스
          ├ array (선택항목) : every를 호출한 배열
          └ thisArg (선택항목) : callbackFunc을 실행할 때 this로 사용하는 값

 

 

반환 값

 

• callbackFunc이 모든 배열 요소에 대해 참인 값을 반환하는 경우 true, 그 외엔 false

 

 

예시