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 −


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
<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>
   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);


On clicking the ‘CLICK HERE’ button −

Updated on 20-Jul-2020 08:34:52