Quick Reach
Adding elements to array
In JavaScript, elements can be added to an array by using the built-in methods of arrays. These methods are “push“ and “unshift“.
These methods append given elements to an existing array. Both of these methods are explained below with online examples.
The array push method
The array push method adds the given elements at the end of an existing array. The push JavaScript method also returns the length of an array after adding the given elements. So basically, JavaScript push changes the existing array.
An example of push method
Following are a few examples of using array push method but let us first look at its syntax:
JavaScript array push syntax
The syntax of array push method is:
Arrayname.push (element_to_add1, element_to_add2, …..)
As such, the array push returns length after adding new elements, you can assign this to a numeric variable to get the returned value.
A basic example of using push method
For this example, we have created a simple numeric array of four elements. We will display it in an HTML paragraph.
After that, we will use array push method to add two more numbers in the array and again display array elements. See demo by clicking the link or image:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<p id=“p2”></p>
<script type=“text/javascript”>
var NumArr = [1,2,3,4];
var i,j;
var arrdisplay = “The array before array push: <BR>”;
//Array before array push
for (i=0; i < NumArr.length; i++){
arrdisplay += NumArr[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
//Array after push method
var Arrlength;
var arrdisplay2 = “The array after array push: <BR>”
arrlength = NumArr.push(5,6);
for (j=0; j < arrlength; j++){
arrdisplay2 += NumArr[j] + “<BR>”;
}
document.getElementById(“p2”).innerHTML = arrdisplay2;
</script>
</body>
</html>
|
You can see, NumArr before and after using the push method. A few things about the example:
- First of all, an array NumArr of four elements is created.
- Then we displayed array by using the for loop. Inside the for loop, we used the length property of array to get total elements.
- Then we used array push method and added two more numbers in the NumArr array. We assigned the returned value to the arrlength variable.
- Point to be noticed is, we used the arrlength variable rather length property in second for loop to display array elements after using the array push JavaScript method.
- Finally, you can see two elements are added in the array at the end, by using push array method.
See another example, this time with strings.
Javascript array append example with strings
In this example, JavaScript array append will be done at the strings array. We have an array of US states with three State names initially.
We will use the JS push method to append one more State name at the end of an array. In this example, we simply used push method to add array element and have not assigned returned value to a variable.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<script type=“text/javascript”>
var USStates = [“New York”, “Texas”, “Florida”];
var i;
var arrdisplay = “The State names after array push: <BR>”;
USStates.push(“Alaska”)
for (i=0; i < USStates.length; i++){
arrdisplay += USStates[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
</script>
</body>
</html>
|
Javascript unshift array method
The push method is used to add array elements at the end of an array. If you need to add new elements at the beginning of the array then use the JavaScript array unshift method. The unshift is just like the array push method that adds new elements and returns the
The unshift is just like the array push method that adds new elements and returns the length of the array after adding elements. See the following example of using unshift method.
Add to array by using unshift method example
Following is an add to array example by using the unshift method. The elements will be added at the beginning of the array. See by yourself, as we display array before and after using the unshift method. Click the link or image below to see the demo online.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<p id=“p2”></p>
<script type=“text/javascript”>
var NumArr = [1,2,3,4];
var i,j;
var arrdisplay = “The array before array unshift: <BR>”;
//Array before array unshift
for (i=0; i < NumArr.length; i++){
arrdisplay += NumArr[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
//Array after unshift method
var Arrlength;
var arrdisplay2 = “The array after array unshift: <BR>”
arrlength = NumArr.unshift(5,6);
for (j=0; j < arrlength; j++){
arrdisplay2 += NumArr[j] + “<BR>”;
}
document.getElementById(“p2”).innerHTML = arrdisplay2;
</script>
</body>
</html>
|
You can see in above example, the JavaScript array append is done with the unshift method. We displayed array before and after using the unshift method.
You can also see the difference in two arrays and also newly added elements are displayed before existing elements, i.e. unshift method added array elements at the beginning of the array.
You should also read: Javascript Array
Leave A Comment?