JavaScript “Add to Array” Function: 5 Main Methods

javascript-add-to-array

JavaScript is a programming language that is commonly used in web development, and an array is a variable that can have several values at the same time in JavaScript.

JavaScript developers have to deal with arrays every day.

Like the objects that allow you to store keyed collections of values, you simply cannot insert “new property” between existing ones. However, there are several ways you can use JavaScript to add to array functions. Alternatively, if you're looking for a tutorial on how to remove an element from array - we've got you covered

Here are the main 5 ways of how to add to array in JavaScript:

1. Add using the push() method (JavaScript push array method)
2. Add using the unshift() method
3. Add using the splice() method
4. Add using the concat() method
5. Add using index notation

1. Add using the push() method (JavaScript push array method)

The JavaScript push array method is used to make an addition to the end of an array. It is possible to use JavaScript push array to add multiple elements to an array using the push() method.

For instance, if you want to use JavaScript push array to add a hotdog to a list of foods, all you have to do is type it like this:

var foods = ["fries", "wings"];

'Foods' in this case is an initial list of foods available in the JavaScript push array. You could also add hotdog to the end of the list in the JavaScript push array:

foods.push("hotdog");
["fries", "wings", "hotdog"]

If you want to add multiple items to the JavaScript push array, write the following code. It will add a couple of elements to the end of the list:

var foods = ["fries", "wings"];
foods.push("hotdog", "burger", "pizza", "chocolate"); 

The push() method is one of the simplest and easiest ways used in js to add to array. Another method of the JavaScript push array is pop(), which does the complete opposite - it is used to remove elements from the end of an array.

2. Add using the unshift() method

The unshift() method is used in JavaScript add to array to insert additional elements to the beginning of an array. It is the opposite of the shift() method, which is used in JavaScript add to array to remove elements from the beginning of the array. To add more foods to my already existing array using the unshift() method, I would implement the following code:

var foods = ["fries", "wings"];
foods.unshift("hotdog", "burger", "pizza", "chocolate");

Here's how the output - a list of foods with additional elements that I've added at the front:

["hotdog", "burger", "pizza", "chocolate","fries", "wings "]

3. Add using the splice() method

The splice() method is used in JavaScript to change the current state of the array by removing an item and replacing it with another one. The arrangement for js add to array using splice() method is as follows:

array.splice( start, deleteCount [, firstitem [, seconditem [, thirditem ] ] ] )

If I want to replace an element with another one in my list of foods, all I have to do is:

var foods = ["fries", "wings"];
foods.splice(1, 0, "hotdog", "burger", "pizza", "chocolate");

At index 1, remove 0 elements, then JavaScript add to array hotdog, burger, pizza, and chocolate to that position;

These elements will take indexes 1, 2, 3, and 4 like that: 

["fries", "hotdog", "burger", "pizza", "chocolate", "wings"]

Wings will automatically be moved to index 5 in js array.

Remember: Items in a js add to array start from index 0.

4. Add using the concat() method

The concat() method in JavaScript introduces a new array to an existing array. The initial array is combined with a new one. If you want to add elements into the new array using the method concat(), here's an example:

var foods = ["fries", "wings"];
var newfoods = foods.concat( ["hotdog", "burger", "pizza", "chocolate"] );

The result would look like this:

["fries", "wings", "hotdog", "burger", "pizza", "chocolate"]

You can also use the concat() method to directly add to list JavaScript items that are not in the array as shown below:

var foods = ["fries", "wings"];
var newfoods = foods.concat( "hotdog", "pizza", "chocolate" );

5. Add using index notation

You can also directly add to array in JavaScript without using any of the previous methods. Javascript "Add to array" could be achieved by referring to the index of the items in the array itself.

For instance, let’s say you want to add two types of food at specific positions. The code for that will be:

var foods = ["fries", "wings"];
foods[2] = "hotdog";
foods[3] = "burger"; 

Here's how the output would look:

["fries", "wings", "hotdog", "burger"]

Assuming I want to add an element at the end of the array, I will use the following code:

var foods = ["fries", "wings"];
foods[ foods.length ] = "hotdog";
["fries", "wings", "hotdog"]

The index notation is useful when you need to add an item to a specific position regardless of where it is located. 

Adding to Array in JavaScript: Pick Your Option

All the methods that are used to add elements to an array in JavaScript are easy to implement, making JavaScript one of the most functional programming languages.

Adding an element to a Javascript array is simple and straightforward, as it should be. There is no single method that is always the best to use. Learn by trying the different ways and hopefully, you can feel confident when using a specific array in various code contexts.

Have you found an alternative method to add an element from an array in Javascript? Let me know down below!

Paul joined the Hosting.Review team right from the start as a content writer and marketer. He was the person responsible for establishing a trademark for in-depth web hosting evaluation and superb review articles. Before joining Hosting.Review, Paul was working on various projects as a freelancer. Paul spends his free time reading fantasy books and graphic novels.
Leave a Comment

Get new blog posts by email: