Adding, Updating, and Removing Array Elements

Code Playground is only enabled on larger screen sizes.

Adding elements

Besides at(), there are two other methods, push() and unshift(), that enable you to add new elements to the array.

The push() method adds new items to the end of the array, and returns the length of the new array.

javascript

let arr = ["Apple", "Orange", "Banana"];
 
const a = arr.push("Plum");
 
console.log(arr); // -> [ 'Apple', 'Orange', 'Banana', 'Plum' ]
console.log(a); // -> 4

It is also possible to add multiple items with push():

javascript

let arr = ["Apple", "Orange", "Banana"];
 
const a = arr.push("Plum", "Peach");
 
console.log(arr); // -> [ 'Apple', 'Orange', 'Banana', 'Plum', 'Peach' ]
console.log(a); // -> 5

The unshift() method moves all elements to higher indexes, adds a new item to the beginning of the array, and finally returns the length of the new array.

javascript

let arr = ["Apple", "Orange", "Banana"];
 
const a = arr.unshift("Plum");
 
console.log(arr); // -> [ 'Plum', 'Apple', 'Orange', 'Banana' ]
console.log(a); // -> 4

Similarly, you can add multiple items with unshift():

javascript

let arr = ["Apple", "Orange", "Banana"];
 
const a = arr.unshift("Plum", "Peach");
 
console.log(arr); // -> [ 'Plum', 'Peach', 'Apple', 'Orange', 'Banana' ]
console.log(a); // -> 4

Updating elements

You can update an array element using the assignment operator (=).

javascript

let a = [5, 6, 7, 8];
 
a[1] = 100;
 
console.log(a); // -> [ 5, 100, 7, 8 ]

Removing elements

The pop() method removes the last item from the end of the array, and returns the removed item.

javascript

let arr = ["Apple", "Orange", "Banana"];
 
const a = arr.pop();
 
console.log(arr); // -> [ 'Apple', 'Orange' ]
console.log(a); // -> "Banana"

The shift() method removes the first element from the beginning of the array, shifts all other elements to lower indexes, and returns the removed item.

javascript

let arr = ["Apple", "Orange", "Banana"];
 
const a = arr.shift();
 
console.log(arr); // -> [ 'Orange', 'Banana' ]
console.log(a); // -> "Apple"

In practice, the shift() and unshift() methods are much slower compared to pop() and push(), due to the shifting of the array elements.

If possible, you should avoid working at the beginning of the array, and only use pop() and push() in your code.

Concatenating arrays

You can join multiple arrays together into one array using the concat() method. For example,

javascript

let arr1 = ["Apple", "Orange", "Banana"];
let arr2 = ["Plum", "Peach", "Pear"];
 
arr1 = arr1.concat(arr2);
 
console.log(arr1);

text

[ 'Apple', 'Orange', 'Banana', 'Plum', 'Peach', 'Pear' ]

The concat() method also enables you to join more than two arrays.

javascript

let arr1 = ["Apple", "Orange", "Banana"];
let arr2 = ["Plum", "Peach"];
let arr3 = ["Pear"];
 
arr1 = arr1.concat(arr2, arr3);
 
console.log(arr1);

text

[ 'Apple', 'Orange', 'Banana', 'Plum', 'Peach', 'Pear' ]

Alternatively, you can use the spread syntax (...).

javascript

let arr1 = ["Apple", "Orange", "Banana"];
let arr2 = ["Plum", "Peach"];
let arr3 = ["Pear"];
 
let arr = [...arr1, ...arr2, ...arr3];
 
console.log(arr);

text

[ 'Apple', 'Orange', 'Banana', 'Plum', 'Peach', 'Pear' ]

Removing/updating with splice()

Besides the ones we discussed above, there are a few more methods related to manipulating elements in an array.

Some of these methods are mutating, meaning they change the original array, while others are non-mutating, meaning they'll return an new array instead of performing tasks directly on the original.

splice() is a mutating method. It can remove, replace, or insert items at any position in the array.

javascript

splice(index, deleteCount, ...items);

Both index and deleteCount are integers.

It removes deleteCount number of items starting from index and returns an array containing all removed items.

javascript

let arr = [1, 2, 3, 4, 5];
 
// remove 2 items starting at index 1
const removed = arr.splice(1, 2);
console.log(arr); // -> [1, 4, 5]
console.log(removed); // -> [2, 3]

If you supply additional items, they are inserted at index.

javascript

let arr = [1, 2, 3, 4, 5];
 
// insert (2, 3) at index 1 without removing
arr.splice(1, 0, 2, 3);
console.log(arr); // -> [1, 2, 3, 2, 3, 4, 5]

You can replace elements in the array by deleting them and then insert new ones at that location.

javascript

let arr = [1, 2, 3, 4, 5];
 
// delete 1 item at index 2, then insert (99)
arr.splice(2, 1, 99);
console.log(arr); // -> [1, 2, 99, 4, 5]

Filling array with fill()

fill() is a mutating method that overwrites a range of elements with value.

javascript

fill(value, start?, end?)

The range is set by the start and end indexes.

javascript

let arr = [1, 2, 3, 4, 5];
 
arr.fill(0, 1, 4); // fill indexes 1..3
console.log(arr); // -> [1, 0, 0, 0, 5]

If no start and end indexes provided, fill() will fill the entire array with value.

javascript

let arr = [1, 2, 3, 4, 5];
 
arr.fill(0); // fill the whole array
console.log(arr); // -> [0, 0, 0, 0, 0]

If end is not provided, it will overwrite all elements from start to the end of the array.

javascript

let arr = [1, 2, 3, 4, 5];
 
arr.fill(0, 2); // fill index 2 to the end
console.log(arr); // -> [1, 2, 0, 0, 0]

Copying parts of array with slice()

slice() is non-mutating, and it returns a portion of the original array, from index start to the end.

javascript

slice(start?, end?)

javascript

const arr = ["a", "b", "c", "d"];
const sub = arr.slice(1, 3);
 
console.log(sub); // -> ['b', 'c']
console.log(arr); // -> ['a', 'b', 'c', 'd'] (unchanged)

let arr = ["Apple", "Orange", "Banana"];

const a = arr.push("Plum");

console.log(arr); // -> [ 'Apple', 'Orange', 'Banana', 'Plum' ]
console.log(a); // -> 4

Open Sandbox