Spread operator in function calls JavaScript

JavascriptWeb DevelopmentObject Oriented Programming

The spread syntax allows us to spread an array or any iterable to be expanded across zero or more arguments in a function call.

Following is the code for spread operator in function calls in JavaScript −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Spread operator in function calls</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to use spread operator to pass parameters to add() function</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   function add(a, b, c, d) {
      return a + b + c + d;
   }
   let arr = [1, 2, 3, 4];
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML = add(...arr);
   });
</script>
</body>
</html>

Output

On clicking the ‘CLICK HERE’ button −

raja
Published on 20-Jul-2020 08:34:32
Advertisements