JavaScript - 유용한 내장 메서드(find, filter, every, some, reduce, repeat)

 

 

코드리뷰에서 리뷰어 분들이 사용을 추천해주셨거나, 페어 프로그래밍을 하며 유용하다고 느꼈던 Array와 String 내장 메서드 몇 가지의 사용법을 다시 정리해보자.

 

find

find()는 주어진 테스트를 만족하는 첫번째 요소의 '값'을 반환한다. 테스트를 만족하는 값이 여러 개 이더라도 가장 첫번째 값만 확인할 수 있다. 테스트를 만족하는 요소가 없다면 undefined를 반환한다. 

const arr = [2, 4, 6, 8, 10];
const isOdd = (num) => num % 2;

const firstBigEnough = arr.find((element) => element > 7); // 8
const firstOdd = arr.find(isOdd); // undefined

 

filter

filter()는 주어진 테스트를 통과하는 모든 요소로 이루어진 '새로운 배열'을 반환한다.

const arr = [2, 4, 6, 8, 10];
const isOdd = (num) => num % 2;

const newArrBigEnough = arr.filter((element) => element > 7); // [8, 10]
const newArrOdd = arr.filter(isOdd); // []

 

every

every()는 주어진 테스트를 배열 안의 모든 요소가 통과하는지 여부를 불리언 값으로 반환한다. 참고로 빈 배열에서 호출하면 무조건 true를 반환한다.

const arr = [2, 4, 6, 8, 10];
const isEven = (num) => num % 2 === 0;

const isAllBigEnough = arr.every((element) => element > 7); // false
const isAllEven = arr.every(isEven); // true

const isAlwaysTrue = [].every((element) => element > 7); // true

 

some

some()은 주어진 테스트를 배열 안의 어떤 요소라도 통과하는지 테스트하고 그 결과를 불린 값으로 반환한다. 참고로 빈 배열에서 호출하면 무조건 false를 반환한다.

const arr = [2, 4, 6, 8, 10];
const isOdd = (num) => num % 2;

const isPartlyBigEnough = arr.some((element) => element > 7); // true
const isPartlyOdd = arr.some(isOdd); // false

const isAlwaysFalse = [].some((element) => element > 7); // false

 

reduce

reduce()는 배열 안의 모든 요소에 대해 주어진 함수(reducer)를 실행하고 최종적으로 하나의 결과값을 반환한다.

const arr = [2, 4, 6, 8, 10];

const sum = arr.reduce((acc, curr) => acc + curr, 0); // 30
const max = arr.reduce((prev, curr) => Math.max(prev, curr)); // 10

 

 

repeat

repeat()는 배열이 아닌 '문자열'에 대해 지정한 횟수만큼 반복해서 붙인 새로운 문자열을 반환한다. 반복횟수를 소수를 입력하더라도 자동으로 내림 처리되어 에러가 발생하지 않는다. 0보다 작은 수 또는 양의 무한대로 지정하면 Range Error가 발생한다.

'<div></div>'.repeat(0); // ''
'<div></div>'.repeat(1); // '<div></div>'
'<div></div>'.repeat(2); // '<div></div><div></div>'
'<div></div>'.repeat(2.9); // '<div></div><div></div>'

'<div></div>'.repeat(-365);  // RangeError;
'<div></div>'.repeat(1 / 0); // RangeError

 

 

참고자료

Array.prototype.find() - JavaScript | MDN

Array.prototype.filter() - JavaScript | MDN

Array.prototype.every() - JavaScript | MDN

Array.prototype.reduce() - JavaScript | MDN

String.prototype.repeat() - JavaScript | MDN