사용자에게 통계를 보여주거나 슬라이더의 경계를 설정할 때 배열에서 최대값, 최소값을 알아내야합니다.
이 포스트에서는 자바스크립트 배열에서 최소/최대 값을 알아내는 여러가지 방법을 알아보고 이들 사이의 속도를 비교해 보겠습니다.
Table of Contents
Math를 이용해 최대값, 최소값 얻기
Math 객체는 수학적 계산을 위한 유용한 메소드와 상수를 포함하는 자바스크립트의 빌트인 객체입니다.
여기서는 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
개발자 도구에서 각각의 메소드를 console.log() 메소드로 출력하면 위와 같은 화면을 볼 수 있습니다.
만일 매개변수 중 하나라도 숫자가 아니거나 숫자로 변환할 수 없다면 Math.min()과 Math.max()는 NaN을 리턴합니다.
console.log(Math.min('-20', -23, -27)); // -27
console.log(Math.max('number', -23, -27)); // NaN여기서 매개변수에 숫자의 배열을 전달하면 NaN을 리턴합니다. 왜냐하면 이는 숫자로 변환할 수 없는 배열 객체이기 때문입니다.
const myArray = [2, 3, 1];
console.log(Math.min(myArray)); // NaN하지만 스프레드 연산자를 사용하여 배열 객체를 풀어서 전달하면 올바른 결과를 얻을 수 있습니다.
const myArray = [2, 3, 1];
console.log(Math.min(...myArray)); // 1reduce()로 최대값, 최소값 얻기
reduction 연산은 함수 프로그래밍의 다양한 분야에서 쓸 수있는 가장 강력한 연산일 것 입니다.
reduce() 메소드는 각 배열 요소에 대해 리듀서 함수(콜백으로 정의)를 실행하고 마지막에 단일 값을 리턴합니다.
이 방법은 여러 상황에 보편적으로 적용할 수 있기 때문에 다루어 볼 가치가 있습니다.
const myArray = [20, 23, 27];
const minElement = myArray.reduce((a, b) => {
return Math.min(a, b);
});
console.log(minElement); // 20
apply()로 최대값, 최소값 찾기
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); // 20for loop 사용
루프는 조건에 따라 반복되는 작업을 수행하며, 이는 true 또는 false를 리턴합니다.
정의된 조건이 false를 리턴할 때 까지 루프는 계속 실행됩니다.
여기서는 코드를 반복적으로 사용하기 위해 for loop를 사용하겠습니다.
최소값 구하기:
먼저 minElement에 배열의 첫 번째 요소를 설정하고 전체 배열에 루프를 돌아, 다른 요소의 값이 현재 값보다 작은지 확인합니다. 다른 요소의 값이 현재 값보다 작은 경우 더 작은 값을 요소의 값으로 변경합니다.
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최대값 구하기:
이번에는 maxElement에 배열의 첫 번째 값을 넣습니다. 그 다음 전체 배열을 루프돌아 maxElement의 값 보다 큰 요소가 있는지 확인합니다.
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 성능이 좋았습니다.
정리
이 포스트에서는 자바스크립트 배열에서 최대값, 최소값을 찾는 방법을 알아봤습니다.
Math.min() 메소드, Math.max() 메소드, reduce() 메소드, apply() 메소드, for loop에 대해 알아봤으며, 각각의 방법에 대한 벤치마크를 해봤습니다.
작은 배열에서는 모든 방법에 별다른 속도 차이가 없었는데 큰 배열에서는 기본 for loop가 가장 나은 결과를 보였습니다.