[JS] 배열 메서드 map, filter, every

map()

map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백함수의 반환값들로 구성된 새로운 배열을 반환한다. 이 때 원본 배열은 변경되지 않는다!

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

구문

배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴!

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

callback : 새로운 배열 요소를 생성하는 함수이며 아래 인수들을 가진다.

currentValue : 처리할 현재 요소
index : 처리할 현재 요소의 인덱스
array : map()을 호출할 배열

예제

const numbers = [1, 4, 9];

const roots = numbers.map(item => Math.sqrt(item));
// 위 코드는 const roots = numbers.map(Math.sqrt); 와 같다.

// map메서드는 새로운 배열을 반환한다.
console.log(roots);   // [1, 2, 3]
// map메서드는 원본 배열을 변경하지 않는다.
console.log(numbers);    // [1, 4, 9]

🚨여기서 Math.sqrt() 함수는 숫자의 제곱근을 반환한다!!

---

filter()

filter() 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 false이면 요소를 버리고, true인 요소로만 구성된 새로운 배열을 반환한다! 이 때 마찬가지로 원본 배열은 변경되지 않는다!

그리고 어떤 요소도 true를 반환하지 못했으면 빈 배열을 반환한다!!

예제

const numbers = [1, 2, 3, 4, 5];

// 다음의 경우 numbers 배열에서 홀수인 요소만 필터링한다.(1은 true로 평가된다.)

const odds = numbers.filter(item => item % 2);
console.log(odds);  // [1, 3, 5]

every()

every() 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다. 이 때 콜백 함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이면 false를 반환한다.
즉, 배열의 모든 요소가 콜백 함수를 통해 정의한 조건을 모두 만족하는지 확인하여 그 결과를 불리언 타입으로 반환한다.
단, every 메서드를 호출한 배열이 빈 배열인 경우 언제나 true를 반환하므로 주의해야 한다!!

예제

// 배열의 모든 요소가 3보다 큰지 확인
[5, 10, 15].every(item => item > 3);  // true

// 배열의 모든 요소과 10보다 큰지 확인
[5, 10, 15].every(item => item > 10);  // false

// every메서드를 호출한 배열이 빈 배열인 경우 언제나 true 반환
[].every(item => item > 3);  // true