Javascript Spread Operator – Simple Examples

Welcome to a quick tutorial and examples on the Javascript spread operator. When the spread operator is first introduced, it lit some light bulbs and left some scratching their heads. Just what does it do?

In simple terms, the spread operator is used on arrays and objects to “expand” them.

  1. To “unpack” an array into individual values.
    • var darr = [1999, 8, 7];
    • var date = new Date(...darr);
  2. To combine arrays and objects.
    • var arrA = ["Job", "Jon"];
    • var arrB = [...arrA, "Joy"];
    • var arrC = [...arrA, ...arrB];
  3. It can also be used to collect multiple parameters into an array (this is called rest instead of spread).
    • function demo (...args) { console.log(args); }
    • demo(1, 2, 3, 4, 5);

That should cover the basics, but read on for more examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Spread Examples Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

SPREAD OPERATOR EXAMPLES

All right, let us now get into the examples of the Javascript spread operator.

 

1) “UNPACK” ELEMENTS INTO FUNCTION PARAMETERS

1-unpack.html
// (A) FUNCTION THAT TAKES IN 3 PARAMETERS
function demo (a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
  return a + b + c;
}

// (B) ARRAY WITH 3 NUMBERS
var arr = [99, 88, 77];

// (C) "UNPACK" ARRAY INTO FUNCTION PARAMETERS
var sum = demo(...arr);
console.log(sum);

Once upon a time in the dark ages, we have to pass array elements into a function in the long-winded way of FUNCTION (ARRAY[0], ARRAY[1], ARRAY[2]). But thanks to the spread operator, that has now been simplified to FUNCTION (...ARRAY).

 

2A) APPEND & COMBINE ARRAYS

2a-spread-array.html
 // (A) ORIGINAL ARRAYS
var arrA = ["Joa", "Job"];
var arrB = ["Joe", "Joi"];

// (B) APPEND ARRAY
var arrC = [...arrA, "Jon", "Joy"];
console.log(arrC);

// (C) COMBINE ARRAYS
var arrD =[...arrA, ...arrB];
console.log(arrD);

As in the introduction above, we apply the spread operator to arrays and objects to “take the individual elements apart”. So thanks to the spread operator, we can now “spread” an existing array/object to do various things:

  • Clone an array – var newArr = [ ...oldArr ];
  • Clone and append – var newArr = [ ...oldArr, VALUE, VALUE ];
  • Combine multiple arrays – var newArr = [ ...oldArrA, ...oldArrB ];

 

 

2B) APPEND & COMBINE OBJECTS

2b-spread-object.html
 // (A) ORIGINAL OBJECTS
var objA = {name : "Jon Doe"};
var objB = {email : "jon@doe.com"};
 
// (B) APPEND OBJECT
var objC = {
  ...objA,
  address : "123 Foo Street"
};
console.log(objC);
 
// (C) COMBINE OBJECTS
var objD = {...objA, ...objB};
console.log(objD);

Yes, the spread operator also works on objects.

 

3) REST

3-rest.html
// (A) FUNCTION WITH 3 PARAMETERS
function demo (first, ...second) {
  console.log(first);
  console.log(second); // ARRAY
}
 
// (B) CALL FUNCTION
// 88 WILL BE ASSIGNED TO FIRST
// ALL THE REST WILL BE COLLECTED INTO SECOND AS AN ARRAY
demo(88, "A", "B", "C");

Finally, remember how we can spread an array into function parameters? This is kind of the “opposite”, called rest instead – If we set a rest, the additional parameters will all be collected into an array.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Javascript Spread Operator (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *