JavaScript에서 상한·하한 범위를 기준으로 배열 요소 필터링하기

이번 글에서는 숫자 배열을 첫 번째 인수로 받고, 두 번째 인수로 상한(upper limit), 세 번째 인수로 하한(lower limit)을 받는 JavaScript 함수를 작성해 보겠습니다.

이 함수의 역할은 주어진 배열을 필터링하여, 상한과 하한으로 지정된 범위에 속하는 요소들만 모아 새로운 배열로 반환하는 것입니다. 이때 상한값과 하한값 자체도 결과에 포함됩니다(경계값 포함).

예제 코드

const array = [18, 23, 20, 17, 21, 18, 22, 19, 18, 20];
const lower = 18;
const upper = 20;

const filterByLimits = (arr = [], upper, lower) => {
    let res = [];
    res = arr.filter(el => {
        return el >= lower && el <= upper;
    });
    return res;
};

console.log(filterByLimits(array, upper, lower));

코드 설명

핵심은 자바스크립트 배열의 내장 메서드인 filter()입니다. filter()는 콜백 함수가 true를 반환하는 요소들만 골라 새로운 배열을 만들어 줍니다.

여기서 콜백 함수는 각 요소 el이 하한값(lower)보다 크거나 같고, 동시에 상한값(upper)보다 작거나 같은지를 검사합니다. 즉, el >= lower && el <= upper 조건을 만족하는 요소만 결과 배열에 남게 됩니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

[ 18, 20, 18, 19, 18, 20 ]

원본 배열에서 18 이상 20 이하인 값들만 추출되어 새 배열로 반환된 것을 확인할 수 있습니다. 원본 배열인 array는 변경되지 않으며, filter()가 항상 새 배열을 생성하기 때문에 기존 데이터를 안전하게 유지할 수 있다는 장점도 있습니다.