Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add new array elements at the beginning of an array in JavaScript?
We will learn how to add new array elements at the beginning of an array in JavaScript. To achieve this in JavaScript we have multiple ways, a few of them are following.
Using the Array unshift() Method
Using the Array splice() Method
Using ES6 Spread Operator
Using the Array unshift() Method
The array unshift() method in JavaScript is used to add new elements at the start of the array. This method changes the original array by overwriting the elements inside it.
Syntax
arr.unshift(element1, element2, . . . . . . , elementN)
Parameter
element1, element2, …, elementN − The elements to be inserted. If you have multiple elements, enter them as comma-separated parameters.
arr − It is the original array to which we add new element/s.
Returns − It returns the length of the updated array.
Example
In this example, we are adding 0 at the start of the array using the Array unshift()method.
<html> <body> <h2>Adding new array elements at the beginning of an array.</h2> <p><b>Array:</b> <span id="oldArray"> </span> </p> <p><b>Updated Array: </b> <span id="updatedArray"></span></p> <button id="btn" >Click to Add</button> </body> <script> // Get the button element let btn = document.getElementById("btn") // Get the element where old array situated let oldArray = document.getElementById("oldArray") // Get the element where a new array will be assigned let updatedArray = document.getElementById("updatedArray") // The old array let array = [1, 2, 3, 4, 5] // Show the old array oldArray.innerText = array; btn.onclick = () => { // Insert 0 at the starting of the array array.unshift(0) updatedArray.innerText = array } </script> </html>
Using the Array splice() Method
The array splice() method in JavaScript is used to add or remove elements from the array. This method changes the original array by overwriting the elements inside it.
Syntax
Following is the syntax for Array splice() method −
arr.splice(index, howmany, element1, element2, . . . . . elementN)
Here arr is the original array to which the elements will be added.
Parameter
index − This is a required parameter that specifies at which index you want to add or remove the element(s).
howmany − This is an optional parameter that specifies the number of items to be removed.
Element1, element2, . . . . . . elementN − Elements(s) to be added.
It returns the complete updated array.
Approach
To add an element at the starting of the element we pass the first parameter 0 because we are adding an element at the 0th index and the second parameter also 0 because we are not removing any element from the array. The third parameter will be the element to be added to the array.
Example
In this example, we are adding “22” at the starting of the array using the Array.splice method.
<html> <body> <h2>Adding new array elements at the beginning of an array.</h2> <p><b>Array:</b> <span id="oldArray"> </span> </p> <p><b>Updated Array: </b> <span id="updatedArray"></span></p> <button id="btn" >Click to Add</button> </body> <script> // Get the button element let btn = document.getElementById("btn") // Get the element where old array situated let oldArray = document.getElementById("oldArray") // Get the element where new array will be assigned let updatedArray = document.getElementById("updatedArray") // The old array let array = [1, 2, 3, 4, 5] // Show the old array oldArray.innerText = array; btn.onclick = () => { // Insert 22 at the starting of the array array.splice(0, 0, 22) updatedArray.innerText = array } </script> </html>
Using the ES6 Spread Operator
In this method we will create a new array and assign its first element as the element we want to add and the second element will be all the elements of the old array which we will access using the spread operator.
Example
In this example, we are adding “22” at the starting of the array using the ES6 spread operator.
<html> <body> <h2> Adding new array elements at the beginning of an array. </h2> <p> <b>Array:</b> <span id="oldArray"> </span> </p> <p> <b>Updated Array: </b> <span id="updatedArray"> </span> </p> <button id="btn" >Click to Add</button> </body> <script> // Get the button element let btn = document.getElementById("btn") // Get the element where old array situated let oldArray = document.getElementById("oldArray") // Get the element where new array will be assigned let updatedArray = document.getElementById("updatedArray") // The old array let array = [1, 2, 3, 4, 5] // Show the old array oldArray.innerText = array; btn.onclick = () => { // Create a new Array let newArr = [22, ...array] updatedArray.innerText = newArr } </script> </html>
287 Views
