In this article, we will look into JavaScript’s arrays and the use of the unshift() function to manipulate the arrays. It is mostly used with arrays. It’s important to look into various functionalities of the function. Let us get started.
What is unshift() Method in JavaScript?
Let’s first revise what are Arrays! Arrays are linear data structures that store homogenous data, i.e. same type of data. An array can contain all integers, all characters, or all strings as the elements. An array can not be a combination of integers and characters, or integers or strings.
Let us look at how to declare and use arrays in Javascript:
//declaring an integers array
let marks = [98, 75, 62, 82, 97, 53];
//declaring a characters array
let grades=['A', 'B', 'A', '0'];
//declaring a strings array
let favtutors=["John", "Joshua", "Alex", "Kate"];
//declaring a boolean array
let present=[true, false, false, true];
In JavaScript, we do not need to specify the type of the array at the compile time as it is a dynamically typed language. Hence, We are not required to specify the data type explicitly while declaring an array.
The unshift() function is primarily used for adding elements to the beginning of an array. When new elements are added, the elements present at higher indices shift towards the right vacating indices for the newly added elements.
You just have to remember, that whenever we want to add single or multiple elements at the beginning of an array, we use this method.
This operation is an in-place operation, i.e. the changes are reflected in the same array. A new copy of the array is not created.
The syntax is as follows:
array_name.unshift(element1, element2, element3,….)where,
array_name: the name of the array variable to which the elements are to be added
element/element2,element3..: single or multiple elements that are to be added to the beginning of the array
It returns the modified length of the array after adding the elements. Let us take an example to understand it better:
//declaring an array let arr=[1,2,3,4]; //checking return value let unshiftReturn=arr.unshift(5,6); //printing the variable unshiftReturn console.log(unshiftReturn);
Output:
6As we are using the function to add the sequence 5,6 at the beginning of the array, the new array becomes [5,6,1,2,3,4]. The new array has a length of 6 which the function returns.
The time complexity to add elements using it is O(n + m), where n is the number of existing elements in the array, and m is the number of elements being added to the beginning.
It can be used in multiple ways which we will explore in further sections. Also, check JavaScript Array splice() method.
Case 1) Adding Multiple Elements at Once
We can provide multiple parameters (a list of elements) in the unshift() function. Let us observe through an example:
//declaring an array let arr=[1,2,3,4]; //printing array before adding new elements console.log(arr); //using unshift() function arr.unshift(5,6,7); //printing the array console.log(arr);
Output:
[1,2,3,4]
[5,6,7,1,2,3,4]
The elements provided as parameters are as it is added to the beginning of the array in the same sequence. As we can see, the order of elements remains the same (5,6,7) at the beginning of the array.
Case 2) Adding Elements One by One
Let us understand through an example, what happens when we add the elements one by one.
//declaring an array let arr=[1,2,3,4]; //printing array before adding new elements console.log(arr); //using unshift() function arr.unshift(5); arr.unshift(6); arr.unshift(7); //printing the array console.log(arr);
Output:
[ 1, 2, 3, 4 ]
[ 7, 6, 5, 1, 2, 3, 4]
Let us understand with the help of a dry run of the same.
Initial array:
Array after first unshift(5) function:
Array after second unshift(6) function:
Array after third unshift(7) function:
We have obtained the desired result.
Reversing the Array using unshift() Function
One of the most used functionalities of this method is to reverse an array. Let us see how we can reverse the array using it:
- We will iterate over every array element and use the unshift() function for every element from first to last.
- At every iteration, the current element of the original array will be pushed at the beginning of the reversed array.
- At the final iteration, we will observe that the last element of the original array will come at first of the reversed array.
//declaring an array
let ogArray=[4,5,6,7];
//printing the array
console.log(ogArray);
//creating a new array to store elements in reverse order
let reversedArray=[];
//using the unshift() loop
for(let i=0;i<ogArray.length;i++){
//adding elements in the reversedArray using
reversedArray.unshift(ogArray[i]);
}
//printing the reversed ogArray
console.log(reversedArray)Output:
[ 4, 5, 6, 7 ]
[ 7, 6, 5, 4 ]
We have obtained the desired result.
Remember that while unshift() is useful, it may not be the most performant choice for large arrays, as shifting elements requires reindexing the entire array. Careful consideration of your application’s requirements will help you determine when to leverage its benefits in your JavaScript projects.
Conclusion
In this article, we learned that unshift() allows us to add elements to the beginning of an array efficiently, without creating a new array. We discussed the syntax, the return value, and various ways the elements can be added to the beginning of an array. It becomes easier to manipulate the arrays with this method. If this is a question that you got in your school, you might want some help with JavaScript homework.
