Arrays are an essential part of any programming language, and JavaScript is no exception. Arrays in JavaScript are used to store multiple values in a single variable. One common requirement when working with arrays is to add new elements to the array. In this article, we will discuss various methods to append to an array in JavaScript.
Using the push() Method to Append to Array
One of the most commonly used methods to append to an array in JavaScript is the push() method. The push() method is a built-in JavaScript method that allows developers to append elements to the end of an array. This method adds one or more elements to the end of an array and returns the new length of the array.
Before we go on, let’s know the syntax of the push() method
array.push(element1, ..., elementN);
where the array is the array we want to append elements to, and element1 and elementN are the elements we are append to array. Now, let’s illustrate using the push() method to append to array in JavaScript.
Example 1: Appending Elements to Arrays
let fruits = ["apple", "banana", "orange"];
fruits.push("tangerine");
console.log(fruits);
Output
[ 'apple', 'banana', 'orange', 'tangerine' ]
In the example above, we first declared an array of fruits. Then, we used the push() method to append the string 'tangerine' to the end of the array. Finally, we logged the updated array to the console using console.log().
Example 2: Appending Array Elements to Arrays
let numbers = [13, 72, 93]
let newNumbers = [88, 45, 70];
numbers.push(...newNumbers);
console.log(numbers);
Output
[ 13, 72, 93, 88, 45, 70 ]
In this example, we have two arrays: numbers and newNumbers. We used the spread operator (...) to append the elements of the newNumbers array to the end of the numbers array. Finally, we logged the updated numbers array to the console.
Using the unshift() Method to Append to Array
The unshift() method is another built-in JavaScript method that allows developers to append elements to the beginning of an array.
Here is the syntax of the unshift() method
array.unshift(element1, ..., elementN);
where the array is the element we want to append elements to and the element1 and elementN are elements we will append to the beginning of the array.
Now, using the same examples as in the push() section, we will append a new element to the array.
let fruits = ["apple", "banana", "orange"];
fruits.unshift("tangerine");
console.log(fruits);
Output
[ 'tangerine', 'apple', 'banana', 'orange' ]
In this example, we used the unshift() method to append the string 'mango' to the beginning of the fruits array. In the other example, we can use the spread operator with the unshift() method to append elements to the beginning of the array.
let numbers = [13, 72, 93];
let newNumbers = [88, 45, 70];
numbers.unshift(...newNumbers);
console.log(numbers);
Output
[ 13, 72, 93, 88, 45, 70 ]
In this example, we used the spread operator (...) to append the elements of the newNumbers array to the beginning of the numbers array.
Using the Spread Operator to Append to Array
The spread operator (...) is a powerful feature in JavaScript that allows developers to expand an array into individual elements.
Here is the syntax of using the spread operator (…) to append to array
array = [...array, element1, ..., elementN];
Where the array is the element we want to append to, and the elements are what we want to append to the array. Now to some examples.
let fruits = ["apple", "banana", "orange"];
fruits = [...fruits, "tangerine"];
console.log(fruits);
Output
[ 'apple', 'banana', 'orange', 'tangerine' ]
In this example, we used the spread operator (...) to expand the fruits array into individual elements. Then, we appended the string 'mango' to the end of the array. Finally, we assigned the updated array back to the fruits variable. Unto another example.
let numbers = [1, 2, 3];
let newNumbers = [4, 5, 6];
numbers = [...numbers, ...newNumbers];
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]
In this example, we used the spread operator (...) to expand the numbers and newNumbers arrays into individual elements. Then, we concatenated the arrays using the spread operator again. Finally, we assigned the updated array back to the numbers variable.
Using the concat() Method to Append to Array
The concat() method is another built-in JavaScript method that allows developers to concatenate arrays. Before, we go on, let’s see the syntax of using the concat() method
array.concat(value1, ..., valueN);
Here is example to show how to use the concat() method
let fruits = ["apple", "banana", "orange"];
let newFruits = ["tangerine", "watermelon"];
let allFruits = fruits.concat(newFruits);
console.log(allFruits);
Output
[ 'apple', 'banana', 'orange', 'tangerine', 'watermelon' ]
In this example, we used the concat() method to concatenate the fruits and newFruits arrays. Finally, we assigned the concatenated array to the allFruits variable and logged it to the console.
Summary
In this article, we explored different methods to append elements to arrays using JavaScript. We covered the push() method, the unshift() method, the spread operator, and the concat() method. Each method has its own advantages and disadvantages, and the choice of which method to use depends on the specific requirements of the project.
References
Array - JavaScript | MDN (mozilla.org)
Array.prototype.push() - JavaScript | MDN (mozilla.org)
Spread syntax (...) - JavaScript | MDN (mozilla.org)
Array.prototype.concat() - JavaScript | MDN (mozilla.org)
