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:
- 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>
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.No | Method & 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:
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.
Transform your designs and boost your career with our UI UX Design Course.
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).
Check out the Angular certification training course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven, indirectly driving better job opportunities.
If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the React Certification Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.
Got a question for us? Please mention it in the comments section of “Unshift JavaScript” and we will get back to you.