JavaScript and JQuery Essentials Trainin... (16 Blogs) Become a Certified Professional

Unshift JavaScript : Know How to Use Unshift() Method in Array

89 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assement report and video recording

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

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:

 

output 2 - unshift javascript - edureka

 

  • 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:

output 3 - unshift javascript - edureka

 

  • 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:

Sl.NoMethod & Description

1.

concat() – This method is used for joining two or more array value(s) together

2.

every() – Used for validating the testing function.

3.

reverse() – The positions get reversed and changes in a definite order

4.

shift() – Eliminates the beginning element from an array and returns that particular element.

5.

unshift() – This method adds a new element to the beginning of an array, and unshifts previous elements

6.

push() – Adds one or more elements to the end of an array and returns the new length of the array.

7.

pop() – Removes the last element from an array and returns that element.

The difference between push, pop, shift and unshift can be visualized this way:

 

push-pop- unshift-javascript- edureka

 

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.

Now that you know about Event Bubbling and Event Capturing in JavaScript, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Got a question for us? Please mention it in the comments section of “Unshift JavaScript” and we will get back to you.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.