배열에서 최댓값을 찾는 방법에는 논리적인 접근 방식과 여러 가지 내장 메서드가 있지만, 스프레드(spread) 연산자를 활용하면 훨씬 더 간편하게 최댓값을 구할 수 있습니다. 배열의 최댓값을 찾을 때 가장 널리 사용되는 내장 메서드는 Math.max()입니다. 그러나 이 메서드는 모든 요소를 개별적으로 인자로 전달해야 하기 때문에 작업이 번거로워질 수 있습니다. 이러한 문제를 해결하기 위해 스프레드 연산자가 활용됩니다.
예제 1: 스프레드 연산자 없이 Math.max() 사용하기
다음 예제는 Math.max() 함수에 스프레드 연산자를 함께 사용하지 않은 경우입니다. 배열의 각 값을 일일이 수학 함수에 전달해야 하는데, 값이 몇 개 되지 않을 때는 큰 문제가 없지만 값의 개수가 많아지면 모든 요소를 하나씩 전달하기가 매우 어려워집니다.
<html>
<body>
<script>
var array = [1,2,3];
var Max1 = Math.max(array);
var Max2 = Math.max(array[1],array[1],array[2]) ;
document.write(Max1);
document.write("<br>");
document.write(Max2);
</script>
</body>
</html>출력 결과
NaN 3
첫 번째 결과가 NaN(Not a Number)으로 나오는 이유는 배열 객체 자체를 Math.max()에 전달했기 때문입니다. Math.max()는 숫자형 인자만 처리할 수 있으므로 배열을 직접 전달하면 NaN을 반환합니다. 반면 두 번째처럼 요소를 개별적으로 나열하여 전달하면 정상적으로 최댓값 3이 계산됩니다.
예제 2: 스프레드 연산자(...)를 사용한 방법
다음 예제에서는 각 값을 일일이 전달하는 대신 스프레드 연산자(...)를 사용했습니다. 스프레드 연산자는 배열의 요소들을 자동으로 펼쳐서 개별 인자로 전달해 주므로, 현대 JavaScript에서 배열의 최댓값을 구하는 가장 깔끔하고 권장되는 방법입니다.
<html>
<body>
<script>
var array = [1,2,3];
var Max1 = Math.max(array);
var Max2 = Math.max(...array) ;
document.write(Max1);
document.write("<br>");
document.write(Max2);
</script>
</body>
</html>출력 결과
NaN 3
Math.max(...array)는 배열을 펼쳐서 Math.max(1, 2, 3)과 동일하게 동작하므로 최댓값 3을 반환합니다. 코드도 훨씬 짧아지고, 배열의 크기에 관계없이 동일한 방식으로 적용할 수 있다는 장점이 있습니다.
참고: 대용량 배열에서의 주의점
스프레드 연산자는 편리하지만, 요소 수가 수만 개 이상인 매우 큰 배열을 펼칠 경우 함수 호출 인자 개수 제한으로 인해 스택 오버플로 오류가 발생할 수 있습니다. 이런 경우에는 reduce() 메서드를 사용하는 것이 안전합니다.
var max = array.reduce(function(a, b) {
return Math.max(a, b);
});요약하면, 일반적인 크기의 배열에서는 Math.max()와 스프레드 연산자의 조합이 가장 간결하고 가독성 좋은 최댓값 찾기 방법이며, 초대형 배열에서는 reduce()를 활용하는 것이 좋습니다.