Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트에서 배열을 함수 인수로 전달하는 방법 – apply() vs 스프레드 연산자

배열을 함수 인수로 전달하기

예전에는 자바스크립트에서 배열을 함수의 인수로 전달하려면 apply() 메서드와 null을 함께 사용해야 했습니다. 그러나 null을 사용하면 코드가 지저분해지고 의미를 파악하기 어려워지는 단점이 있었습니다. 이러한 문제를 해결하고 코드를 더욱 깔끔하게 작성할 수 있도록 ES6에서 스프레드(spread) 연산자가 도입되었습니다. 스프레드 연산자를 사용하면 apply() 함수 없이도 배열을 함수 인수로 간편하게 전달할 수 있습니다.

예제 1: apply()와 null을 사용하는 구식 방법

다음 예제는 null과 apply()를 사용하여 배열을 함수 인수로 전달하는 전통적인 방식입니다. 현재는 권장되지 않는 구식 방법이며, 아래에서 소개할 스프레드 연산자를 활용한 최신 방식으로 대체되었습니다.

<html>
<body>
<script>
   function shareMar(a, b, c) {
      document.write(a);
      document.write("</br>");
      document.write(b);
      document.write("</br>");
      document.write(c);
   }
   var names = ['NSE', 'BSE', 'NIFTY'];
   shareMar.apply(null, names);
</script>
</body>
</html>

출력 결과

NSE
BSE
NIFTY

위 예제에서 볼 수 있듯이, 첫 번째 인수로 null을 넘겨야 하는 점이 번거롭고 직관적이지 않습니다.

예제 2: ES6 스프레드 연산자를 사용하는 현대적인 방법

아래 예제에서는 apply() 함수와 null을 사용하지 않고, 대신 ES6 스프레드 연산자(...)를 활용했습니다. 스프레드 연산자를 사용하면 불필요한 null 값 없이 훨씬 더 세련되고 가독성 높은 코드를 작성할 수 있습니다.

<html>
<body>
<script>
   function shareMar(a, b, c) {
      document.write(a);
      document.write("</br>");
      document.write(b);
      document.write("</br>");
      document.write(c);
   }
   var names = ['NSE', 'BSE', 'NIFTY'];
   shareMar(...names);
</script>
</body>
</html>

출력 결과

NSE
BSE
NIFTY

두 방식 모두 동일한 결과를 출력하지만, 스프레드 연산자를 사용한 방법이 코드가 간결하고 명확하며 유지보수 측면에서도 훨씬 유리합니다. 따라서 최신 자바스크립트(ES6 이상) 환경에서는 배열을 함수 인수로 전달할 때 스프레드 연산자를 사용하는 것이 가장 좋은 선택입니다.