Math.min(Array)를 넣었더니 NaN이 나왔다

갑작스레 찾아온 NaN(Not a Number) 숫자가 아니란다.

너무나도 당황스러웠지만 일단 문제가 무엇인지 찾아보도록 하자.

 

과거의 문제

const numbers = [5, 6, 2, 3, 7];

const min = Math.min(numbers);

console.log(min); // NaN

현재의 상황은 Math.max든 Math.min이든 최소, 최댓값을 구하는 함수를 사용했더니 숫자가 아니라는 값이 나왔다.

 

Math.min에 관한 공식문서를 살펴보자.

Math.min() 정적 메서드는 입력 매개변수로 주어진 숫자 중 가장 작은 수를 반환하거나, 매개변수가 없으면 Infinity를 반환합니다. 라고 적혀있습니다.

여기서 중요한 것은 공식문서에서는 주어진 글 그자체로 받아드려야 한다.

Math.min의 매개변수로 배열을 넣는 것이 아닌 주어진 숫자 중 가장 작은 수라는 것이다.

따라서, 배열을 숫자로 펼치는 기능을 가진 spread syntax를 이용해서 해야하는 것이다.

const numbers = [5, 6, 2, 3, 7];

const min = Math.min(...numbers); // 2

이렇게 하면 된다는 것이다.

 

지금까지 나는 다른 언어를 공부하면서 spread syntax라는 것을 배운 적이 없었고 이렇게 해야 메서드가 발생된다는 개념을 이해하지 못했다.

또한, 공식문서의 한글자 한글자가 얼마나 힘이 강한지 몰랐습니다.

 

여기서 spread syntax도 아닌 Math.min을 그대로 사용하기 위해서는 apply 메서드라는 것을 사용해야 합니다.

이것도 공식문서에 적힌 것을 보면 Function.prototype.apply()이라고 적혀 있고 apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments로 함수를 호출합니다.

사용하는 구문은 func.apply(this, [argsArray]); 입니다.

그럼 공식문서에 적힌 것을 보면 주어진 this 값과 배열로 제공되는 arguments 여기서 배열로 제공된다는 말은 배열을 넣어야 한다는 것 입니다.

그럼 func.apply(...)부분에서 func는 함수를 가르키니까

Math.min.apply(this, [argsArray]); 를 넣는 다는 것 입니다.

그럼 spread syntax를 이용하지 않고 코드를 작성해보면

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max); // 7

const min = Math.min.apply(null, numbers);

console.log(min); // 2

이렇게 작성을 할 수 있다는 것 입니다.

 

결론적으로, 사용하는 방법은 여러가지가 있지만 현재의 자바스크립트에서는 spread 문법이 더욱 간결하기 때문에 선호되는 방식이라고 합니다.

만약에 this부분에 넣을 것 이 있고 가리키는 객체의 어떠한 배열의 값이 단순 눈에 보이는 값과 다르게 쉽게 변하지 않는 성질을 가지고 있다면 apply를 사용하겠지만 그렇게까지 작성한 코드를 아직까지는 접해본적이 없습니다.