Filter & Map & Every

Array.prototype.filter()

: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

// result = ["exuberant", "destruction", "present"]

MDN 공식 구문

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

• array: filter를 호출한 배열
• thisArg : callback을 실행할 때 this로 사용하는 값
  Callback과 element는 필수지만 나머지는 옵션이다.

흔한 사용 방식

arr.filter((element, index) => 조건식)

• 어떠한 요소도 테스트를 통과하지 못했다면 빈 배열을 반환한다.

• 해당 요소를 찾는 검색방식으로도 사용이 가능하다.

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

Array.prototype.map()

: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 경과를 모아 새로운 배열을 반환한다.

MDN 구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

• currentValue: 처리할 현재 요소
• index: 처리할 현재 요소의 인덱스 (Optional)
• array: map()을 호출한 배열 (Optional)
• thisArg: callback을 실행할 때 this로 사용되는 값 (Optional)

• 흔히 for문 대신에 forEach나 map을 자주 사용한다.

  arr.map((el) => 조건)

까다로운 사례
: 하나의 인자로 호출하지만 두 개 이상의 인자를 사용하는 경우 혼란을 야기할 수 있다.

['1', '2', '3'].map(parseInt);
// 결과를 [1, 2, 3] 으로 기대할 수 있습니다.
// 그러나 실제 결과는 [1, NaN, NaN] 입니다.

// parseInt 함수는 보통 하나의 인자만 사용하지만, 두 개를 받을 수 있습니다.
// 첫 번째 인자는 변환하고자 하는 표현이고 두 번째는 숫자로 변환할 때 사용할 진법입니다.
// Array.prototype.map은 콜백에 세 가지 인자를 전달합니다.
// 배열의 값, 값의 인덱스, 그리고 배열
// 세 번째 인자는 parseInt가 무시하지만 두 번째 인자는 아닙니다.
// 따라서 혼란스러운 결과를 도출할 수 있습니다. 자세한 내용은 블로그 포스트를 참고하시길 바랍니다.

Array.prototype.every()

: 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하여 Boolean 값을 리턴한다.

• 모든값이 참이면 true, 그 외에는 false
• 빈 배열에서 호출시 무조건 true

MDN 구문

// 화살표 함수
every((element) => { ... } )
every((element, index) => { ... } )
every((element, index, array) => { ... } )

// 콜백 함수
every(callbackFn)
every(callbackFn, thisArg)

// 인라인 콜백 함수
every(function callbackFn(element) { ... })
every(function callbackFn(element, index) { ... })
every(function callbackFn(element, index, array){ ... })
every(function callbackFn(element, index, array) { ... }, thisArg)

• callbackFn: 각 요소를 시험할 함수, 다음 세가지 인수를 받는다.
  - element: 배열에서 처리되는 현재 요소
  • index (Optional)
    : 처리할 현재 요소의 인덱스
  • array (Optional)
    : every를 호출한 배열
  • thisArg (Optional)
    : callbackFn을 실행할 때 this로 사용하는 값

• 삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않는다.
• every는 호출한 배열을 변형하지 않는다.
• every 호출 이후 배열에 추가하는 요소는 방문하지 않는다.
• 배열의 요소가 변경된 경우, callbackFn에 every가 실행되는 시점의 값을 전달한다.