Home Web DevelopmentJavaScript How to add elements into an array in JavaScript

How to add elements into an array in JavaScript

An array is a unique variable capable of holding more than one value. It is one of the most common datatypes used when working with an ordered list of values. It can hold many values under a single name, which can be accessed by referring to an index number.

Strings, numbers, mixed data types, functions, and other arrays can be stored inside an array. The arrays can be modified even after they have been declared. JavaScript array offers many built-in methods to access, alter and manipulate the data stored inside them. An example of an array is shown below:

const fruits = ["mango", "apple", "lemon", "berry"];
console.log(fruits) ;
['mango,' 'apple', 'lemon', 'berry']

Sometimes, after creating an array, you might need to add an element(s) to the array as either the first element, the last element, or an element at any specified position in the array. This article has been tailored to guide you as you learn how to insert an element using JavaScript.

Adding elements into an array in JavaScript

  1. How to add an element(s) at the start of an array.
  2. How to add an element(s) to the end of an array.
  3. How to add an element to a specified position in an array.
  4. How to add an element using the concat method without mutating the original array.

1. How to add an element(s) to the start of an array

If you want to add an element at the beginning of your array, use the unshift() method. When you use this method to add one or more elements to the beginning of an array, it will return the array’s new elements after some elements have been added.
For example, if you develop an array of cars and want to add another car before “BMW,” which is currently at the first index, 0, you can do so with the unshift() method as shown below:

const cars = ["BMW", "Mazda", "Audi", "Benz"];
cars.unshift("Ferrari");
console.log(cars);
['Ferrari, 'BMW', 'Mazda', 'Audi', 'Benz']

As said above, you can also add more than one element using the unshift() method, as shown below:

const countries = ["Sudan", "Morocco", "Mali"];
countries.unshift ("Kenya" , "Uganda", "Ghana"); 
console.log(countries);
['Kenya', 'Uganda', 'Ghana', 'Sudan', 'Morocco', 'Mali']

The unshift() method is also used to return the length of the array’s elements. An instance of such a case is shown below:

const names = ["Astra", "Angelo", "Asia", "Ryan"];
let nameslength = names.unshift ("Grace", "Faith");
console.log(nameslength); 
6

2. How to add an element(s) to the end of an array

The push() method is like the unshift method, only adding an element or element to the end of the array and not to the beginning. It also returns the length of the new array. Like the unshift() method, it can also be used to add more than one element.
Let us redo the example we used with the unshift() method but in this case, we will add the elements to the end of the array.

const cars = ["BMW", "Mazda", "Audi", "Benz"];
cars.push("Ferrari");
console.log(cars);
[ 'BMW', 'Mazda', 'Audi', 'Benz', 'Ferrari' ]

We can also add more than one element to the end of the array, as shown in the syntax below:

const countries = ["Sudan", "Morocco", "Mali"];
countries.unshift ("Kenya" , "Uganda", "Ghana"); 
console.log(countries);
[ 'Sudan', 'Morocco', 'Mali', 'Kenya', 'Uganda', 'Ghana' ]

The push() method can also be used to get the length of the new array, as shown below:

const names = ["Astra", "Angelo", "Asia", "Ryan"];
let nameslength = names.push("Grace", "Faith");
console.log(nameslength); 
6

3. How to add elements to a specified location in an array

So far, we have seen how to add elements to the arrays’ beginning or end. You might wonder how you can add elements to a specific position in the array. Well, you can do this by using the splice() method. The splice() method is an all-purpose method used to change the contents in the array by removing, replacing, or adding elements to a specified array position. Let us get into a detailed illustration of how to use this method to add elements to a specific location in the array.

For instance, consider the following array of countries that contains three elements (countries) arranged alphabetically:

const countries = ["Angola", "Botswana", "Ethiopia"];

Suppose we want to add “Chad”, which, according to the alphabetical order, should be placed in position three, index 2 (after Botswana but before Ethiopia). In such a case, we will use the splice() method with the syntax below:

Array.splice(start_position, 1, new_element…); 

The syntax above consists of the following instructions:
start_position – this instruction specifies the index of where the new elements to be inserted in the array are placed. It also specifies where the elements inserted will start if there are multiple elements.
We set the second argument to zero if you want to add an element to the array. This will instruct the splice() method not to delete any element in the array.
The element may be more than one since they are the extra elements that need to be added to the array at a specified position.
For instance, let’s place “Chad” before “Botswana,” as shown in the syntax below:

const countries = ["Angola", "Botswana", "Ethiopia"];
countries.splice(1,0, "Chad");
console.log(countries);
[ 'Angola', 'Chad', 'Botswana', 'Ethiopia' ]

Similarly to what we have been doing in the other methods (unshift() and push() methods), we can also add more than one element:

const countries = ["Angola", "Botswana", "Ethiopia"];
countries.splice(1,0, "Chad","Denmark","Djibouti");
console.log(countries);
[ 'Angola', 'Chad', 'Denmark', 'Djibouti', 'Botswana', 'Ethiopia' ]

Remember that the previous methods, unshift() and push() methods, returned the lengths of the new array. Despite the splice() method being able to change the original array, it cannot remove any element but only returns an empty array.
Let us look at what happens when you want to find the length of the new array while using the splice() method. The syntax is as shown below:

const names = ["Astra", "Angelo", "Asia", "Ryan"];
let nameslength = names.splice("Grace", "Faith");
console.log(nameslength);
[]

4. How to add elements in an array using the concat() method

The concat method is used to add elements to an array without mutating or altering the original array. Therefore, this method is used when you want to create a new array but don’t want the original array to be affected in any way.
You can use this method to add elements to the beginning or to the end of the array based on where you want to place the elements.
The syntax below is an example of how the concat() method works:

const countries = ["Kenya", "Uganda", "Tanzania"];
let newCountries = [].concat("Rwanda", countries, "Burundi");
console.log(newCountries);

The syntax above will return to “Rwanda,” followed by the countries you had first named, and finally, “Burundi”.

[ 'Rwanda', 'kenya', 'Uganda', 'Tanzania', 'Burundi' ]

The concat() method also allows us to join two or more arrays into a single new array. The example below shows the syntax for such a case.

const girlsnames = ["Essy", "Joy", "Winny", "Grace"];
const boysnames = ["Jesse", "Joel", "Job","Josh"];
let names = [].concat(girlsnames, boysnames);
console.log(names);
[ 'Essy', 'Joy', 'Winny', 'Grace', 'Jesse', 'Joel', 'Job', 'Josh' ]

Conclusion

In this article, we have looked at four different ways of adding elements to an array. Elements can be appended at the array’s start, end, or position. The unshift() and push() methods add elements to an array’s start and end, respectively.

We have also learned that the concat() method allows us to add elements to an array without altering the original array.
The splice() method gives the most control over the index at which we want to add the new elements.

You may also like

Leave a Comment