5 Ways To Add Elements To Javascript Array – Simple Examples

Welcome to a quick tutorial on how to add elements to a Javascript array. New to Javascript and the whole array thing? Yes, creating a new array is straightforward, but it can be quite confusing when it comes to adding elements to an existing one.

There are a couple of different ways to add elements to an array in Javascript:

  1. ARRAY.push("ELEMENT") will append to the end of the array.
  2. ARRAY.unshift("ELEMENT") will append to the start of the array.
  3. ARRAY[ARRAY.length] = "ELEMENT" acts just like push, and will append to the end.
  4. ARRAYA.concat(ARRAYB) will join two arrays together.
  5. ARRAY.splice(INDEX, 0, "ELEMENT") will insert a new element at the specified index.

But just how does each of these methods work exactly? Let us walk through more examples, read on to find out!

ⓘ I have included a zip file with all the example 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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Append Examples Useful Bits & Links
Video Tutorial The End

 

 

DOWNLOAD & NOTES

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

 

EXAMPLE CODE DOWNLOAD

Click here to download the 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.

 

APPEND EXAMPLES

All right, let us now get into the ways to append elements to an array.

 

1) PUSH FUNCTION

1-push.html
// Push
var thearray = ["First", "Second"];
thearray.push("Third");
console.table(thearray); // First, Second, Third

// We can also add multiple at once
thearray.push("Forth", "Fifth");
console.table(thearray); // First, Second, Third, Forth, Fifth

As in the introduction above, the push() function is used to append elements to the end of an existing array. Yes, take note that we can append multiple elements at once.

 

 

2) UNSHIFT FUNCTION

2-unshift.html
// Push
var thearray = ["First", "Second"];
thearray.unshift("Third");
console.table(thearray); // Third, First, Second

// We can also add multiple at once
thearray.unshift("Forth", "Fifth");
console.table(thearray); // Forth, Fifth, Third, First, Second

The unshift() function is the cousin of push(). It adds elements to the front of the array instead of the end. Same story, we can use it to append multiple elements at once.

 

3) ASSIGN STATEMENT

3-statement.html
var thearray = ["First", "Second"];
thearray[thearray.length] = "Third";
console.table(thearray); // First, Second, Third

This is an “alternative” to the push() function. As you already know, we can use ARRAY[N] = VALUE directly to replace or insert an element. Thus, ARRAY[ARRAY.length] = VALUE will simply append a new element to the end of the array.

 

 

4) CONCAT FUNCTION

4-concat.html
var arrayA = ["First", "Second"];
var arrayB = ["Third", "Forth"];
var combined = arrayA.concat(arrayB);
console.table(combined); // First, Second, Third, Forth

As you guys already know, we can combine two strings together – By either using the + operator, or concat() function. Yes, we can use the concat() function on arrays to combine them as well.

P.S. Short note that we can also use the + operator on arrays as well, ARRAY A + ARRAY B. But this will result in a string with the “flattened array” instead. In the above example, that will end up with First,SecondThird,Forth.

 

EXTRA) ARRAY TO STRING, JOIN WITH STRING

While we are still on the topic of “array to string”, here is a small extra. If you want to “combine” an array into a string, use the join() function. Very handy if you want to turn an array into a string, then concatenate with a string.

e-join.html
var elements = ["Wind", "Water", "Fire", "Earth"];
var line = "Long ago, the four nations lived together in harmony.";

var quote = elements.join(" ");
console.log(quote); // Wind Water Fire Earth

// We can also specify the "joints"
// quote = elements.join("-");
// console.log(quote); // Wind-Water-Fire-Earth
// quote = elements.join("*");
// console.log(quote); // Wind*Water*Fire*Earth

quote += ". " + line;
console.log(quote); // Wind Water Fire Earth. Long ago...

 

5) SPLICE

5-splice.html
// One parameter - Remove, not append
var thearray = ["First", "Second", "Third", "Forth", "Fifth"];
thearray.splice(2);
console.table(thearray); // First, Second

// Two parameters - Also remove, not append
thearray = ["First", "Second", "Third", "Forth", "Fifth"];
thearray.splice(1, 2);
console.table(thearray); // First, Forth, Fifth

// Three or more parameters
// We can use this to insert an element in-between
thearray = ["First", "Second", "Third"];
thearray.splice(1, 0, "INSERTED!"); 
console.table(thearray); // First, INSERTED, Second, Third

// Yes, we can append many as well
thearray = ["First", "Second", "Third"];
thearray.splice(1, 0, "FOO", "BAR"); 
console.table(thearray); // First, FOO, BAR, Second, Third

Finally, the splice() function is a rather confusing one, but it is also very useful.

  • When we input one parameter, splice(N) will keep N number of elements from the start of the array. This is, only ARRAY[0] to ARRAY[N-1] will remain. Not what we want though.
  • When we input two parameters, splice(N, M) will remove M number of elements from the array, starting from ARRAY[N]. Not what we want here either.
  • Finally, splice(N, M, O, O, ...) is what we are looking at. Same as above, this will remove M number of elements starting from ARRAY[N], then replace it with O. But if we set M to 0, no elements will be removed – This will act as an “insert in-between” instead. Pretty cool.

 

 

USEFUL BITS & LINKS

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

 

THE SUMMARY

Function/Statement Description Reference Link
push() Add new elements to the end of the array. Click Here
unshift() Add new elements to the start of the array. Click Here
ARRAY[ARRAY.length] = VALUE The statement way of adding a new element to the end.
concat() Joins two arrays together. Click Here
splice() Remove, replace, or insert elements. Click Here

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Add Elements To Javascript Array (click to enlarge)

 

THE END

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

3 thoughts on “5 Ways To Add Elements To Javascript Array – Simple Examples”

  1. Hi there,
    I found your article really interesting but I think there’s something you need to fix at the beginning of it. It is the first reference to *shift* that should be *unshift* instead, and as it is the first one. That’s what I took first and tried it and failed in my case. The rest of the article is correct, only the first reference to the method is incorrect.
    Thank you for this article, it’s really good.

  2. Hello there!
    I love your work, I love your way of coding, precise, concise, really neat. Thank you so much for this wonderful site. Everything is understandable at first sight, or almost in my case 🙂
    Reading you is also a pleasure. Take good care of you and keep on the fun side. You’re great.

Leave a Comment

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