An element can be added to an array at three places:
- Start/First element
- End/Last element
- Anywhere else
Let's get started by adding elements to the beginning of an array!
Adding Elements to the Start of an Array
unshift() method in array objects adds one or more elements to the start of an array. When executed, it also returns the new length of an array:
const startArray = [3, 4, 5]; const newLength = startArray.unshift(2); console.log(newLength); console.log(startArray); startArray.unshift(-1, 0, 2); console.log(startArray);
Which gives us the expected output:
4 [ 2, 3, 4, 5 ] [ -1, 0, 2, 2, 3, 4, 5 ]
Adding Elements to the End of an Array
Using the Last Index of the Array
To add an element to the end of an array, we can use the fact that the length of an array is always one less than the index.
Say, the length of an array is 5, then the last index at which the value will be 4. So, we can directly add the element at the
last+1 index. Let us take a look:
const indexArray = [1, 2, 3]; console.log(indexArray.length); console.log(indexArray); console.log(indexArray); indexArray[indexArray.length] = 4 console.log(indexArray);
Running this in a JS console displays:
3 3 undefined [ 1, 2, 3, 4 ]
The array is
3 in length, and the 2nd element is
3. There is no 3rd element, so we're greeted with
undefined. Finally, at that position, we insert the value of
The push() Method
push() method of an array appends one or more elements to the end of it. Just like
unshift(), it also returns the new length of the array:
const pushArray = [1, 2, 3] const newLength = pushArray.push(4, 5, 6, 7); console.log(newLength); console.log(pushArray);
Running the above code will display this:
7 [ 1, 2, 3, 4, 5, 6, 7 ]
The concat() Method
Merging or joining of two or more arrays is achieved by an array's
concat() method. It creates a new copy of the output and does not affect the original arrays. Unlike the previous methods, it returns a new array. The values being concatenated always come at the end of the array using the method.
We can concatenate an array with another array:
const example1Array1 = [1, 2, 3]; const valuesToAdd = [4, 5, 6]; const example1NewArray = example1Array1.concat(valuesToAdd); console.log(example1NewArray); console.log(example1Array1);
Which prints this output:
[ 1, 2, 3, 4, 5, 6 ] [ 1, 2, 3 ]
We can concatenate an array with a sequence of values:
const array = [1,2,3]; const newArray = array.concat('12', true, null, 4,5,6,'hello'); console.log(array); console.log(newArray);
Running the above code will log this to our consoles:
[ 1, 2, 3 ] [ 1, 2, 3, '12', true, null, 4, 5, 6, 'hello' ]
We can concatenate an array with multiple arrays:
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [7, 8, 9]; const oneToNine = array1.concat(array2, array3); console.log(oneToNine);
Free eBook: Git Essentials
Check out our hands-on, practical guide to learning Git, with best-practices, industry-accepted standards, and included cheat sheet. Stop Googling Git commands and actually learn it!
When executed, the above code prints a list of numbers from 1 to 9:
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Adding Elements Anywhere in an Array
Now we will discuss a masterstroke method that can be used to add an element anywhere in an array - start, end, middle, and anywhere else in-between.
splice() method adds, removes and replaces elements in an array. It is commonly used for array management. This method does not create a new array but updates the one that called it.
splice() in action. We're going to take an array of weekdays, and add a "wednesday" element between "tuesday" and "thursday":
const weekdays = ['monday', 'tuesday', 'thursday', 'friday'] const deletedArray = weekdays.splice(2, 0, 'wednesday'); console.log(weekdays); console.log(deletedArray);
The above code logs this to the console:
[ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ] 
Let's break down the above code. We wanted to add 'wednesday' in the
weekdays array at the 2nd position. No element needs to deleted here. The code
weekdays.splice(2, 0, 'wednesday') is read as at the second position, do not remove any element and add
Here's the general syntax for using
let removedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start- The index at which to begin modifying the array.
deleteCount- The optional number of items in the array to remove from
start. If omitted, then all the items after
startwill be deleted.
item1, item2, ...- The optional items to append to the array from
start. If omitted, it will only remove elements from the array.
Let's see another example of
slice() where we add and delete to the array at the same time. We'll be adding "wednesday" in the second position, however we'll also remove erroneous weekend values there:
const weekdays = ['monday', 'tuesday', 'saturday', 'sunday', 'thursday', 'friday'] const deletedArray = array.splice(2, 2, 'wednesday'); console.log(weekdays); console.log(deletedArray);
The above code will print:
[ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ] [ 'saturday', 'sunday' ]
In the above example,
array.splice(2, 2, 'wednesday') removes two elements from the second position (start) and adds 'wednesday' there. That right there is the power of
unshift(). We can add them to the end using their index, the
pop() method and the
concat() method. We get even more control of where we place them with the