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 an 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.
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.
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.
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.
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 an array.
- The first parameter of
splice()
takes an array index where you want to add or remove an item. - The second parameter takes the 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 blank. We can add as many values as we want.
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
const marvel = ['Avengers', 'Thor']; const DC = ['Batman', 'Joker']; const movies = marvel.concat(DC); console.log(movies); // ["Avengers", "Thor", "Batman", "Joker"]
Passing value as parameter
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 the spread operator.
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.
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 the array, then the left out places in the middle will be filled with undefined values.
const number = [15, 40]; number[3] = 65; number[6] = 80; console.log(number); // [15, 40, undefined, 65, undefined, undefined, 80]
Related
5 ways to remove items from an array
Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next | Angular | Vue | HTML | CSS