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.

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

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-add-elements-to-javascript-array/” title=”How To Add Elements To Javascript Array” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

METHOD 1) PUSH (ADD TO END)

// (A) PUSH - ADD TO END
var arr = ["First", "Second"];
arr.push("Third");
console.table(arr); // First, Second, Third

// (B) WE CAN ALSO ADD MULTIPLE AT ONCE
arr.push("Forth", "Fifth");
console.table(arr); // 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.

 

 

METHOD 2) UNSHIFT (ADD TO FRONT)

// (A) UNSHIFT - ADD TO FRONT
var arr = ["First", "Second"];
arr.unshift("Third");
console.table(arr); // Third, First, Second

// (B) WE CAN ALSO ADD MULTIPLE AT ONCE
arr.unshift("Forth", "Fifth");
console.table(arr); // 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.

 

METHOD 3) ASSIGN STATEMENT

var arr = ["First", "Second"];
arr[arr.length] = "Third";
console.table(arr); // 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.

 

 

METHOD 4) CONCAT (JOIN ARRAYS)

// (A) TWO DIFFERENT ARRAYS
var arrA = ["First", "Second"];
var arrB = ["Third", "Forth"];
 
// (B) CONCAT COMBINE
var combined = arrA.concat(arrB);
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) JOIN ARRAY INTO STRING

// (A) AN ARRAY
var elements = ["Wind", "Water", "Fire", "Earth"];

// (B) JOIN ARRAY INTO STRING
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

// (C) COMPLETE THE STORY
quote += ". Long ago, the four nations lived together in harmony.";
console.log(quote); // Wind Water Fire Earth. Long ago...

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.

 

METHOD 5) SPLICE

// (A) ONE PARAMETER
var arr = ["First", "Second", "Third", "Forth", "Fifth"];
arr.splice(2); // keep first 2 elements
console.table(arr); // First, Second

// (B) TWO PARAMETERS
arr = ["First", "Second", "Third", "Forth", "Fifth"];
arr.splice(1, 2); // remove 2 elements from index 1
console.table(arr); // First, Forth, Fifth

// (C) THREE OR MORE PARAMETERS
// (C1) INSERT SINGLE
arr = ["First", "Second", "Third"];
arr.splice(1, 0, "FOO"); // insert "foo" at index 1
console.table(arr); // First, FOO, Second, Third
 
// (C2) INSERT MULTIPLE
arr = ["First", "Second", "Third"];
arr.splice(1, 0, "FOO", "BAR"); // insert "foo", "bar" at index 1
console.table(arr); // First, FOO, BAR, Second, Third
 
// (C3) REPLACE
arr = ["First", "Second", "Third"];
arr.splice(0, 2, "FOO"); // remove 2 elements from index 0, then insert "foo"
console.table(arr); // FOO, 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.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

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