[javascript] 자바스크립트 배열에서 최대/최소 구하는 방법 (min, max)

참고: https://stackabuse.com/javascript-get-min-and-max-element-of-array/

JavaScript를 쓰다보면 사용자에게 통계를 보여줘야 하거나 슬라이더의 경계를 설정할 경우 배열에서 최소 값과 최대 값을 알아내야 할 때가 있습니다. 이 글에서는 JavaScript 배열에서 최소/최대 값을 알아내는 방법을 알아볼 것이고 이들 사이의 속도를 비교해 보겠습니다.

Math 객체를 이용해 Min, Max 얻기

Math는 수학적 계산을 위해 필요할만한 많은 유용한 메소드와 상수를 가지고있는 JavaScript의 내장 객체입니다. 이 글에서는 두개의 메소드를 살펴볼 것인데 Math.min()과 Math.max() 입니다. 두 메소드 다 매개변수로 숫자의 목록을 받고 메소드 이름에서 알 수 있듯이 하나는 목록의 가장 작은 값을 반환하고 다른 하나는 목록의 가장 큰 값을 반환하는 기능을 합니다.

console.log(Math.min(20, 23, 27)); // 20
console.log(Math.max(20, 23, 27)); // 27

console.log(Math.min(-20, -23, -27)); // -27
console.log(Math.max(-20, -23, -27)); // -20

만일 매개변수 중 하나라도 숫자가 아니거나 숫자로 변환할 수 없다면 Math.min()과 Math.max()는 NaN을 반환합니다.

console.log(Math.min('-20', -23, -27)); // -27
console.log(Math.max('number', -23, -27)); // NaN

비슷하게 Math.min() 메소드에 매개변수로 숫자의 배열인 객체를 전달하면 NaN을 반환합니다. 왜냐하면 이는 배열 단일 항목으로 취급되고 이 객체를 숫자 값으로 변환할 수 없기 때문입니다.

const myArray = [2, 3, 1];
console.log(Math.min(myArray)); // NaN

그러나 ... 연산자를 이용하여 배열 객체를 풀어서 전달하면 올바른 결과를 얻을 수 있습니다.

const myArray = [2, 3, 1];
console.log(Math.min(...myArray)); // 1

reduce()를 활용해 Min, Max 얻기

reduction 연산은 함수 프로그래밍에서 다양한 분야에서 쓸 수있는 가장 강력한 연산일 것 입니다. reduce() 함수는 각 배열 요소에 대해 리듀서 함수(콜백으로 정의)를 실행하고 마지막에 단일 값을 반환합니다. 이 방법은 여러 부분에 보편적으로 적용할 수 있기 때문에 다루어 볼 가치가 있습니다.

const myArray = [20, 23, 27];

let minElement = myArray.reduce((a, b) => {
    return Math.min(a, b);
});

console.log(minElement); // 20

apply()로 Min, Max 찾기

apply() 메소드는 매개변수로 this 값과 배열을 받아 함수를 실행하는데 사용합니다. 이를 통해 Math.min() 정적 함수에 배열을 입력할 수 있습니다.

const myArray = [20, 23, 27];

let minElement = Math.min.apply(Math, myArray);
console.log(minElement); // 20
// Or
let minElement = Math.min.apply(null, myArray);
console.log(minElement); // 20

기본 for loop 사용

루프는 JavaScript에서 조건에 따라 반복되는 작업을 수행하기 위해 사용되고 이는 true 또는 false를 반환합니다. 정의된 조건이 false를 반환할 때 까지 루프는 계속 실행됩니다. 우리의 경우 코드를 반복적으로 사용하기 위해 for loop를 사용하겠습니다.

최소값 구하기:

먼저 최소 요소로 배열의 첫 번째 값으로 설정하고 전체 배열을 반복하여 다른 요소의 값이 현재 최소 값보다 작은지 확인합니다. 다른 요소의 값이 최소 값보다 작은 경우 최소 값을 요소의 값으로 변경합니다.

const myArray = [20, 23, 27];

let minElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] < minElement) {
        minElement = myArray[i];
    }
}

console.log(minElement); // 20

최대값 구하기:

최대 값을 배열의 첫 번째 값으로 초기화합니다. 그 다음 전체 배열을 반복하여 초기화된 값 보다 큰 요소가 있는지 확인합니다.

const myArray = [20, 23, 27];

let maxElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
    if (myArray[i] > maxElement) {
        maxElement = myArray[i];
    }
}

console.log(maxElement); // 27

속도 비교

벤치마크 사이트를 이용해 각 코드에 100개의 항목에서 1000000개 항목의 배열을 입력했습니다. 성능은 배열의 길이에 따라 상대적입니다.

• 작은 크기의 배열(100): reduce() 메소드가 가장 나았습니다. 그다음 표준 for loop, 스프레드 연산, apply() 메소드 순서입니다. 이들의 시간차 성능은거의 비슷비슷합니다.
• 중간 배열(1000): 표준 for loop가 최고입니다. 다음으로 reduce() 메소드, 스프레드 연산, apply() 메소드 순 입니다. 이 부분에서는 표준 for loop가 reduce() 보다 월등히 빨랐습니다.
• 아주 큰 배열(1000000): 표준 루프가 다른 모든 방법보다 월등히 뛰어났습니다.

표준 루프는 확장성이 뛰어나고 소형 배열에 적용할 때만 조금 밀렸습니다. 작은 항목이나 더 작은 배열을 다룰 경우 모든 방법이 원활히 작동합니다. 배열이 커질 수록 표준 for loop를 사용에 이점이 커집니다.

정리

이 가이드에서는 JavaScript 배열에서 최소/최대 값을 찾는 방법을 알아봤습니다. 구체적으로 Math.min()과 Math.max() 메소드, reduce() 메소드, apply() 메소드, for loop를 알아봤습니다. 마지막으로 벤치마크를 해봤는데 작은 배열에서는 별다른 속도 차이가 없었는데 큰 배열에서는 기본 for loop가 가장 나은 결과를 보였습니다.

관련 글

자바스크립트 스프레드 연산자(...) 사용 방법