In JavaScript, there are numerous methods available for incorporating elements into an array or list. Each technique offers distinct advantages and is easily accessible. All approaches are beneficial, and selecting the most appropriate one can lead to an optimized solution for the problem at hand.
Let us see the methods that are used to add elements to the array in JavaScript in 10 different ways.
- push: This technique appends elements to an array's end.
- unshift: appended at beginning
- concat: Consolidates arrays without changing the source arrays.
- Spread Operator (...): It adds elements to an array quickly and briefly.
- splice: It Changes an array at a given list by adding or eliminating individuals.
- slice: This strategy adds elements by consolidating with different methods.
- Array.from: This technique develops another array with additional parts.
- Apply: Integrates numerous elements into an array.
- reduce: An adaptable technique for extending an array.
- map: It develops another array by adding and changing parts.
Understanding these techniques equips you to navigate various scenarios with ease and guarantees that you can handle arrays effectively to meet your requirements. Below is a deeper exploration of some additional factors to consider when implementing each approach.
1. push
The push method modifies the size of an array by adding a minimum of one element to its conclusion.
let fruits = [ 'apple', 'banana' ];
fruits.push( 'orange', 'grape' );
console.log( fruits );
Output:
[ 'apple', 'banana', 'orange', 'grape' ]
2. unshift
The unshift method modifies the size of an array by adding one or more elements to the front.
let fruits = [ 'apple', 'banana' ];
fruits.unshift( 'mango', 'pineapple' );
console.log( fruits );
Output:
[ 'mango', 'pineapple', 'apple', 'banana' ]
3. concat
The concat function merges a minimum of two arrays into a single array. This method yields a new array instead of altering the original arrays that were combined.
let fruits = [ 'apple', 'banana' ];
let moreFruits = fruits.concat([ 'cherry', 'strawberry' ]);
console.log( moreFruits );
Output:
[ 'apple', 'banana', 'cherry', 'strawberry' ]
4. Spread Operator
An effective and succinct technique for incorporating elements into an array is by utilizing the spread operator.
let fruits = [ 'apple', 'banana' ];
let moreFruits = [ 'cherry', 'strawberry' ];
let allFruits = [ ...fruits, ...moreFruits ];
console.log( allFruits );
Output:
[ 'apple', 'banana', 'cherry', 'strawberry' ]
5. splice
The splice method modifies the contents of an array by inserting new elements in place of existing ones or by removing them entirely.
let fruits = [ 'apple', 'banana' ];
fruits.splice( 1, 0, 'cherry', 'strawberry' );
console.log( fruits );
Output:
[ 'apple', 'cherry', 'strawberry', 'banana' ]
6. slice
While the slice method does not directly append elements to an array, it can be employed in conjunction with various techniques to increase the length of an array.
let fruits = [ 'apple', 'banana' ];
let start = fruits.slice( 0, 1 ); // [ 'apple' ]
let end = fruits.slice( 1 ); // [ 'banana' ]
let moreFruits = [ 'cherry', 'strawberry' ];
let newFruits = start.concat( moreFruits, end );
console.log( newFruits );
Output:
[ 'apple', 'cherry', 'strawberry', 'banana' ]
7. Array.from
By employing an array-like or iterable object, the method Array.from generates a new instance of an array. This approach allows for the creative addition of elements, leveraging the capabilities of this function.
let fruits = [ 'apple', 'banana' ];
let moreFruits = [ 'cherry', 'strawberry' ];
let allFruits = Array.from([ ...fruits, ...moreFruits ]);
console.log( allFruits );
Output:
[ 'apple', 'banana', 'cherry', 'strawberry' ]
8. apply
Multiple items can be inserted into an array utilizing the apply method.
let fruits = [ 'apple', 'banana' ];
let moreFruits = [ 'cherry', 'strawberry' ];
Array.prototype.push.apply( fruits, moreFruits );
console.log( fruits );
Output:
[ 'apple', 'banana', 'cherry', 'strawberry' ]
9. reduce
Every item within the array is subjected to a reducer function through the use of the reduce method, which generates a single output value. It is important to note that additional elements can be accommodated within an array.
let fruits = [ 'apple', 'banana' ];
let moreFruits = [ 'cherry', 'strawberry' ];
let allFruits = moreFruits.reduce(( acc, fruit ) => {
acc.push( fruit );
return acc;
}, fruits );
console.log( allFruits );
Output:
[ 'apple', 'banana', 'cherry', 'strawberry' ]
10. map
The map function can be employed to generate a new array that includes additional elements, despite the fact that it is fundamentally used to modify existing array elements.
let fruits = [ 'apple', 'banana' ];
let moreFruits = [ 'cherry', 'strawberry' ];
let allFruits = fruits.map( fruit => fruit ).concat( moreFruits );
console.log( allFruits );
Output:
[ 'apple', 'banana', 'cherry', 'strawberry' ]