6 Ways to add items to an Array in JavaScript
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-12-10 12:13:03

There are various ways to add or append an item to an array. We will make use of `push`, `unshift`, `splice`, `concat`, `spread` and `index` to add items to array. Let’s discuss all the 6 different methods one by one in brief.

##The push() method
This method is used to add elements to the end of an array. This method returns the new array length.
```javascript
const movies = ['Avengers', 'Iron-man', 'Thor'];

const newLength = movies.push('Hulk'); 

console.log(movies); // ['Avengers', 'Iron-man', 'Thor', 'Hulk'];

console.log(newLength); //4
```
We can also add multiple values with push method.
```javascript
const movies = ['Iron-man', 'Thor'];

movies.push('Avengers', 'Deadpool', 'Hulk');

console.log(movies); // ["Iron-man", "Thor", "Avengers", "Deadpool", "Hulk"]
```

##The unshift() method
The `unshift()` method is used to add elements at the beginning of an array. This method returns the new array length.
```javascript
const cars = ['Audi', 'BMW', 'Jaguar'];

const newLength = cars.unshift('Mercedes'); 

console.log(newLength ); // 4

console.log(cars); // ['Mercedes', 'Audi', 'BMW', 'Jaguar']
```
We can also add multiple values with `unshift()` method.

```javascript
const cars = ['Audi', 'Jaguar'];

cars.unshift('Mercedes', 'Tesla'); 

console.log(cars); // ['Mercedes', 'Tesla', 'Audi', 'Jaguar']
```
##The splice() method
This method can both add and remove items at a specified index of array.
* The first parameter of `splice()` takes an array index where you want to add or remove item.
* The second parameter takes number of elements to be removed from the specified index. If not removing any item then this can be 0.
* The third parameter takes items to be added at the specified index. If we are only removing then this can be left as blank. We can add as many values as we want.

```javascript
const language = ['Java', 'PHP'];

language.splice(1, 0, 'Android', 'Swift'); 
//['Java', 'Android', 'Swift' , 'PHP']
```
##The concat() method
The `concat()` method is used to merge two or more arrays and returns a new array containing the merged values. This method does not change the existing arrays.
###Passing array as parameter
```javascript
const marvel = ['Avengers', 'Thor'];

const DC = ['Batman', 'Joker'];

const movies = marvel.concat(DC);

console.log(movies);  // ["Avengers", "Thor", "Batman", "Joker"]
```
###Passing value as parameter
```javascript
const marvel = ['Avengers', 'Thor'];

const movies = marvel.concat('Batman', 'Joker');

console.log(movies);  // ["Avengers", "Thor", "Batman", "Joker"]
```
##The spread(…) operator
The spread operator(...) is used to expand and spread array elements. We can spread and merge an array with new values using spread operator.
```javascript
const animals = ['Tiger', 'Horse'];

const zoo = [...animals, 'Elephant', 'Lion', 'Deer']

console.log(zoo);  // ['Tiger', 'Horse', 'Elephant', 'Lion', 'Deer']
```
##Adding element with index
We can add a new value to the array by accessing the particular index and assign the new element.
```javascript
const number = [15, 40];

number[2] = 65;

number[3] = 80;

console.log(number); //  [15, 40, 65, 80]
```
If we leave some of the indexes in the middle and assign values to array, then the left out places in the middle will be filled with undefined values.

```javascript
const number = [15, 40];

number[3] = 65;

number[6] = 80;

console.log(number); //  [15, 40, undefined, 65, undefined, undefined, 80]
```
So we have discussed 6 different ways to append items to an array. You can use any of the 6 methods to add an item to array.

##You May Also Like
* [5 ways to remove items from an array](https://jscurious.com/how-to-remove-items-from-array-in-javascript/)
* [6 ways to find items in an Array in JavaScript](https://jscurious.com/how-to-find-elements-in-array-in-javascript/)
* [Promises in JavaScript](https://jscurious.com/a-brief-guide-to-promises-in-javascript/)
* [20 JavaScript Shorthand Techniques that will save your time](https://jscurious.com/20-javascript-shorthand-techniques-that-will-save-your-time/)

***Thanks for you time***
Find more web development blogs on [jscurious.com](https://jscurious.com)