Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Spread Operator

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Spread Operator

      What is a Spread Operator?

      The JavaScript spread operator (…) allows us to spread out elements of an iterable such as an array. The spread operator is represented with three dots (…). This is operator is introduced in ES6. The main use cases of the spread operator are to copy array elements, concatenate arrays or objects with rest parameters, etc.
      Let's take an example to expand the elements of an array
      let x = ["Tutorials", "Point"];
      console.log(x); // [ 'Tutorials', 'Point' ]
      console.log(...x); // Tutorials Point

      Spread Operator to Concatenate Arrays

      The JavaScript spread operator can be used to concatenate the arrays.

      Example

      In the below example, we have defined two different arrays. After that, we used the spread operator to concatenate these arrays.
      <html>
      <body>
         <div id = "output"></div>
         <script>
            const nums1 = [10, 20, 30];
            const nums2 = [40, 50, 60];
            const res = [...nums1, ...nums2];
            document.getElementById("output").innerHTML = res;
         </script>
      </body>
      </html>
      It will produce the following result
      10,20,30,40,50,60
      You can also change the concatenation order of the array.

      Spread Operator to Clone an Array

      In JavaScript, when we assign one array (object) to another array, it assigns the reference rather than cloning the array. So, whenever you update the original array, it also updates the cloned array. The assignement operator creates a deep copy of the array.

      Example: Without Using Spread Operator

      In this example, we defined an array named nums1. We defiend another array named nums2 and assigned the array nums1 to array nums2. Here, you can see that when you change nums1, it also updates the nums2.
      <html>
      <body>
         <div id = "result1"></div>
         <div id = "result2"></div>
         <script>
            const nums1 = [10, 20, 30];
            const nums2 = nums1;
            document.getElementById("result1").innerHTML = nums2;
            nums1.push(40);
            document.getElementById("result2").innerHTML = nums2;
         </script>
      </body>
      </html>
      It will produce the following result
      10,20,30
      10,20,30,40

      Example: Using Spread Operator to Clone Arrays

      Using the spread operator to clone the array creates an actual copy of the array, and the cloned array doesn't change when you make changes to the original array. Here, you can see that nums3 doesn't get updated even if you change the nums1.
      <html>
      <body>
         <div id = "result1"></div>
         <div id = "result2"></div>
         <script>
            const nums1 = [10, 20, 30];
            const nums3 = [...nums1];
            document.getElementById("result1").innerHTML = nums3;
            nums1.push(50);
            document.getElementById("result2").innerHTML = nums1 + "<br>";
            document.getElementById("result2").innerHTML += nums3;
         </script>
      </body>
      </html>
      It will produce the following result
      10,20,30
      10,20,30,50
      10,20,30

      Spread Operator to Concatenate Objects

      You can use the spread operator to copy object properties into another object. Here, consider the 'car' object as a parent object containing similar properties to all cars. After that, created the 'BMW' object, representing the particular car, and concatenated all properties of the 'car' object with the 'BMW' object's property.
      <html>
      <body>
         <div id = "result1"></div>
         <div id = "result2"></div>
         <script>
            const car = {
               gears: 6,
               color: "Black"
            }
            document.getElementById("result1").innerHTML = JSON.stringify(car);
          
            const BMW = {
               model: "X5",
               year: 2019,
               ...car,
            }
            document.getElementById("result2").innerHTML = JSON.stringify(BMW);
         </script>
      </body>
      </html>
      It will produce the following result
      {"gears":6,"color":"Black"}
      {"model":"X5","year":2019,"gears":6,"color":"Black"}

      Function Rest Parameters

      When you need to pass an unknown number of arguments to the function, you can use the spread operator with the function parameters, called the rest parameter.
      Here, you can see that we have passed multiple numbers as a function argument and collected all arguments in the nums[] array using the spread operator except the first argument.
      <html>
      <body>
         <div id = "result"></div>
         <script>
        
            function sum(a, ...nums) {
               let sum = a;
               for (let i = 0; i < nums.length; i++) {
                  sum += nums[i];
               }
               document.getElementById("result").innerHTML = sum;
            }
      
            sum(3, 6, 9, 8, 6, 5, 3, 3, 2, 1);
      
         </script>
      </body>
      </html>
      It will produce the following result 
      46
      You can also use the spread operator to expand the string into the array of characters, clone the string, or concatenate the string. Also, set, map, etc., are iterable objects in JavaScript. So, you can use the spread operator with them.