In this article, you’ll learn how to append an item into an array in Javascript. Sometimes you need to append one or more new values at the end of an array. There are various ways to append an item to an array in Javascript.
Here, in this post, we used the 5 ways to append an item to the end of an array. Appending an item to the end of an array using push(), splice(), and array.length will mutate the original array, whereas concat() and spread(...) operator will not mutate the original array and instead, it will return a new array. Which is the best way Mutative or Non-Mutative depends on your use case.
Mutative: This will change the original array. using push(), splice(), and array.length will mutate the original array
Non- Mutative: This will create a new array and the original array remains unchanged. using concat() and spread(...) operator will mutate the original array
The simplest way to add items to the end of an array is to use the push() method. The push() method is used to add new items to the end of an array and change the length of the array and return the new length of an array.
const zoo = ['Fox', 'Cow'];
zoo.push('Lion');
console.log(zoo);
// Output ==> ["Fox", "Cow", "Lion"]
You can also append more than one item using a push() method.
const zoo = ['Fox', 'Cow'];
zoo.push('Lion','Tiger', 'Leopard');
console.log(zoo);
// Output ==> ["Fox", "Cow", "Lion", "Tiger", "Leopard"]
You can use ES6's spread feature. This allows us to pass an array. You can also append more than one item using a spread(...) operator with the push() method.
const zoo = ['Fox', 'Cow'];
const birds = ['Eagle', 'Parrot', 'Sparrow'];
zoo.push(...birds);
console.log(zoo);
// Output ==> ["Fox", "Cow", "Eagle", "Parrot", "Sparrow"]
The splice() method adds and/or removes array elements and it overwrites the original array.
Parameters:
const zoo = ['Fox', 'Cow'];
zoo.splice(
zoo.length, // We want add at the END of our array
0, // We do NOT want to remove any item
'Eagle', 'Parrot', 'Sparrow', // These are the items we want to add
);
console.log(zoo);
// Output ==> ["Fox", "Cow", "Eagle", "Parrot", "Sparrow"]
This way is a little bit tricky of all the methods. Arrays in JavaScript are zero-index. So the first item has an index of 0. The array.length returns us the total count of items in the array. This means that the length is always one number higher than the last item of our index in an array. So by assigning a value at the length index, it's essentially adding an item to the end of the array.
const zoo = ['Fox', 'Cow'];
const length = zoo.length; // Array Length ⇒ 2
zoo[length] = 'Dog';
console.log(zoo);
// Output ==> ["Fox", "Cow", "Dog"]
The concat() method is used to concatenate (joins) two or more arrays and it returns a new array, containing the joined arrays. This method does not change the existing arrays.
const animals = ['Fox', 'Lion'];
const birds = ['Eagle', 'Parrot', 'Sparrow'];
const forest = animals.concat(birds);
console.log(forest);
// Output ==> ["Fox", "Cow", "Eagle", "Parrot", "Sparrow"]
This method accepts arrays as well as value(s) as its parameters.
const animals = ['Fox', 'Lion'];
// Add a single value
const forest = animals.concat('Tiger');
console.log(forest);
// Output ==> ["Fox", "Lion", "Tiger"]
// Add a Multiple values
const zoo = animals.concat('Leopard', 'Black panther');
console.log(zoo);
// Output ==> ["Fox", "Lion", "Leopard", "Black panther"]
The spread(...) operator is introduced in JavaScript ES6 (ECMAScript 6). The JavaScript spread(...) operator allows us to quickly copy all or part of an existing array or object into another array or object. Using spread(...) operator is similar to the effects of concat() method.
const animals = ['Fox', 'Lion'];
const birds = ['Eagle', 'Parrot', 'Sparrow'];
const forest = [...animals, ...birds];
console.log(forest);
// Output ==> ["Fox", "Cow", "Eagle", "Parrot", "Sparrow"]
So you can use it to merge arrays, as well as you can also pass the individual value(s), just like we do in creating a regular array.
let animals = ['Fox', 'Lion'];
// Add a single value
let forest = [...animals, 'Tiger'];
console.log(forest);
// Output ==> ["Fox", "Lion", "Tiger"]
// Add a Multiple values
forest = [...animals, 'Leopard', 'Black panther'];
console.log(forest);
// Output ==> ["Fox", "Lion", "Leopard", "Black panther"]
What Should You Use? to mutate or not to mutate. Well, that really depends on your use case. When you're working with Redux or any state management architecture, then it's all about immutability. So the non-mutative methods will be your choices. And it's considered a good practice to avoid side effects.
I hope this article will help you to understand how to append an item into an array in Javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments