Unshift JavaScript | Unshift() Array Methods in JavaScript
JavaScript (JS) was originally developed by Netspace for the objective of fulfilling the need for dynamic elements of websites. It is one of the most essential technologies for web development. This Unshift JavaScript article will provide details about the unshift() methods and how it is used in JavaScript Arrays in the following sequence:
- JavaScript Arrays
- Methods of Array Manipulation
- Unshift JavaScript
JavaScript Arrays
The purpose of using an array is to store multiple values in a single entity of a declared variable. Arrays are used when we want to access elements in an orderly fashion using a single variable. It contains different types of elements. One can store strings, Boolean and numbers in a single array.
There are two different syntaxes for declaring an empty array:
let arr = new Array();
let arr = [];
The 2nd syntax is generally used, and the values can be passed too. The code is written as follows:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays | Edureka</h2>
<p id= "edu"></p>
<script>
var learn = ["Edureka", "Online", "MOOC"];
document.getElementById("edu").innerHTML = learn;
</script>
</body>
</html>
Output:
Array elements have index values starting from 0. Before diving deeper, we also need to understand about the various properties of the array object like constructor, index, length, input and prototype.
- Constructor: It returns the remark which is created by JavaScript instance’s prototype.
Syntax :
array.constructor
Code:
<html>
<head>
<title>JavaScript Array constructor | Edureka</title>
</head>
<body>
<script type = "text/javascript">
var edu = new Array( 10, 20, 30 );
document.write("edu.constructor is:" + edu.constructor);
</script>
</body>
</html>
- Output: edu.constructor is:function Array() { [native code] }
Index:
It represents position of elements in the array, starting from 0.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays | Edureka</h2>
<h2>JavaScript Arrays | Edureka</h2>
<p id="edu"></p>
<script>
var technologies = ["HTML5", "CSS3", "JavaScript"];
document.getElementById("edu").innerHTML = technologies[0];
</script>
</body>
</html>
Output:
- Input: This property is used when an array is created using a regular match expression.
- Length: It returns a 32-bit integer which tells us about the no. of elements in an array.
Syntax:
array.length
Code:
<html>
<head>
<title>JavaScript Array length | Edureka</title>
</head>
<body>
<script type = "text/javascript">
var edu = new Array( 10, 20, 30 );
document.write("edu.length is : " + edu.length);
</script>
</body>
<pre></html>
Output:
edu.length is : 3
Also, the length property can be displayed by calling with an id:
<button onclick="edurekaFunction()">Try it</button>
<script>
function edurekaFunction() {
var techniques = ["push", "pop", "splice", "unshift"];
document.getElementById("edu").innerHTML = techniques.length;
}
</script>
Output:
- Prototype : The prototype property allows us to add methods and properties to any object (Number, Boolean, String and Date, etc). It is a global property.
Syntax :
object.prototype.name = value
Code :
<html>
<head>
<title>Edureka Objects</title>
<script type = "text/javascript">
function Online(course, platform) {
this.course = course;
this.platform = platform;
}
</script>
</head>
<body>
<script type = "text/javascript">
var myOnline = new Online("R programming", "Edureka");
Online.prototype.price = null;
myOnline.price = 2400;
document.write("Online course is : " + myOnline.course + "<br>");
document.write("Online platform is : " + myOnline.platform + "<br>");
document.write("Online price is : " + myOnline.price + "<br>");
</script>
</body>
</html>
Output :
Online course is : R programming
Online platform is : Edureka
Online price is : 2400
Methods of Array Manipulation
Exploring arrays is always fun. Now there are many methods of array manipulation, some of them are mentioned below:
The difference between push, pop, shift and unshift can be visualized this way:
This picture helps us get a clear picture that whenever we need to perform addition and deletions in the beginning of an array, unshift() and shift() serves the purpose. The elements shift towards right when we use unshift() and the elements shift towards left when we use shift().
On the other hand, when we need to perform additions and deletions in the trailing part of an array, pop() and push() helps us get through. In case of push() and pop() operations, no elements are shifted, only the additions and removal increases or decreases the number of index values of the entire array.
So that brings us to one basic question of curiosity, why do we need “unshift JavaScript”? First of all, it’s important to know what it means and what we can do with this method.
Unshift JavaScript
Unshift() method takes values, adds them to the beginning of an array and returns the new modified length of the array.
Since it’s a client-side thing, the browser plays a major role in the functionality of such methods. In the case of Internet Explorer 8 and earlier versions, the values will be inserted but the return value remains undefined.
Syntax :
<!DOCTYPE html>
<html>
<body>
Click on the button
<button onclick="edurekaFunction()">Button</button> <!--Defining Onclick Button Function-->
<!--id for reference-->
<script>
var technologies = ["HTML5", "CSS3", "JS", "C++"]; //Declaring the array
document.getElementById("edu").innerHTML = technologies;
function edurekaFunction() {
technologies.unshift("R", "C#"); //using unshift
document.getElementById("edu").innerHTML = technologies; //returning the new modified array
}
</script>
</body>
</html>
Whenever an addition takes place with the “unshift()” method, the indices of the original array elements increase by a factor of 1.
With this, we have come to the end of our article. I hope you understood unshift JavaScript method works in Array.
Got a question for us? Please mention it in the comments section of “Unshift JavaScript” and we will get back to you.
