In JavaScript, arrays are a fundamental data structure used to store a collection of elements, such as numbers or strings. One of the most common tasks when working with arrays is inserting new elements into them. There are several different methods to insert elements into an array, each with its own advantages and use cases.
The push() and unshift() methods are the most basic ways to add elements to an array. The push() method adds one or more elements to the end of the array, while the unshift() method adds one or more elements to the beginning of the array. Both of these methods return the new length of the array.
The splice() method is another common method to insert elements into an array. This method can add or remove elements from an array at a specified index. The concat() method can also be used to combine two or more arrays, allowing for the addition of elements to an array.
In addition to these methods, the spread operator (...) can be used to insert elements into an array by spreading an existing array and adding new elements in between. Additionally, setting the length property of an array to a value larger than the current length can add empty elements to an array, which can then be filled with new elements.
Different methods to add to an Array in JavaScript
Here are a list of consolidated methods which can be used to insert into Array in JavaScript:
push()method - adds one or more elements to the end of an array and returns the new length of the array<strong>unshift()</strong>method - adds one or more elements to the beginning of an array and returns the new length of the array<strong>splice()</strong>method - adds or removes elements from an array at a specified index<strong>concat()</strong>method - returns a new array that combines two or more arrays, allowing for the addition of elements to an array- spread operator (
...) - allows for the addition of elements to an array by spreading an existing array and adding new elements in between - Using the length property - setting the length of an array to a value larger than the current length can add empty elements to an array, which can be filled with new elements.
1. Using the push() method
The push() method is used to append one or more elements to the end of an array. It returns the new length of the array after adding the element(s). For example, let's say we have an array arr with three elements: [11, 22, 33]. We can add an element 34 to the end of the array using the push() method like this:
const arr = [11, 22, 33];
arr.push(34);
console.log(arr);
Output
[ 11, 22, 33, 34 ]
2. Using the unshift() method
The unshift() method adds one or more elements to the beginning of an array. It returns the new length of the array after adding the element(s).
const arr = [11, 22, 33];
arr.unshift(10);
console.log(arr);
Output
[ 10, 11, 22, 33 ]
In the code example, we have an array arr with three elements. Then, we can add an element 10 to the beginning of the array using the unshift() method.
3. Using the splice() method
The splice() method can be used to insert one or more elements at any position in an array. It takes three arguments: the index at which to start adding elements, the number of elements to remove (if any), and the elements to add.
const arr = [1, 2, 3];
arr.splice(1, 0, 4);
console.log(arr);
Output
[ 1, 4, 2, 3 ]
In the example above, we start adding elements at index 1, remove 0 elements (because we're not removing any), and add the element 4 at index 1.
4. Using the concat() method
Another method to insert into array in JavaScript is the concat method. The concat() method returns a new array that includes the elements of the original array and additional elements that are specified. For example, let's say we have an array arrOne with three elements: ["wow", 31, true, "GoLinux"]. We can add an element "JavaScript" to the end of the array using the concat() method like this:
const arrOne = ["wow", 31, true, "GoLinux"];
const arrTwo = arrOne.concat("JavaScript");
console.log(arrOne);
console.log(arrTwo);
Output
[ 'wow', 31, true, 'GoLinux' ]
[ 'wow', 31, true, 'GoLinux', 'JavaScript' ]
In the example above, we create a new array arrTwo by concatenating arrTwo with the element JavaScript.
5. Using the spread operator(...)
The spread operator can be used to insert one or more elements anywhere in an array. It can be used with the original array to create a new array. Here is a code example to add a new element at index position 2 of the new array.
const arr = [11, 22, 33];
const newArr = [...arr.slice(0, 2), 44, ...arr.slice(2)];
console.log(arr);
console.log(newArr);
Output
[ 11, 22, 33 ]
[ 11, 22, 44, 33 ]
6. Using the length property
The length property of an array is a way to get or set the number of elements in an array. Setting the length property of an array can also be used to add or remove elements from an array.
When setting the length of an array to a value larger than the current length, empty elements will be added to the array, which can then be filled with new elements. Here's an example:
const numbers = [1, 2, 3, 4];
console.log(numbers.length); // Output: 4
numbers.length = 6;
console.log(numbers); // Output: [1, 2, 3, 4, undefined, undefined]
numbers[4] = 5;
numbers[5] = 6;
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]In this example, we define an array numbers with four elements. We use the length property to set the length of the array to 6, which adds two empty elements to the end of the array. We then fill these empty elements with the values 5 and 6 using bracket notation.
Alternatively, setting the length of an array to a value smaller than the current length will remove elements from the end of the array. Here's an example:
const numbers = [1, 2, 3, 4];
console.log(numbers.length); // Output: 4
numbers.length = 2;
console.log(numbers); // Output: [1, 2]In this example, we define an array numbers with four elements. We use the length property to set the length of the array to 2, which removes the last two elements from the array.
Summary
We can use the push(), unshift(), splice(), concat() methods and the spread operator to insert new elements into an array, Some of them allow us the flexibility to insert new elements at specific positions rather than at the beginning or the end of the array.
References
Array.prototype.push() - JavaScript | MDN (mozilla.org)
Array.prototype.unshift() - JavaScript | MDN (mozilla.org)
Array.prototype.splice() - JavaScript | MDN (mozilla.org)
Array.prototype.concat() - JavaScript | MDN (mozilla.org)
Array.prototype.copyWithin() - JavaScript | MDN (mozilla.org)
