javascript array performance to add new element by different methods

by laxman chavda on April 23, 2019 in Array performance, javascript

Generally we always uses the push method to assign a value to the end of an array, so I thought to investigate on it a little bit further to determine the performance of each of the methods. I used the following distinct ways to do this:

=> Array.push
Assigning an element at the end of the array, it defined on the native Array object.

=> Array[i]
Assigning an element to a specific index of the array. The requirement of this method is that you must have a pointer index to the last location. rather than it's a simple assignment.

=> Array[Array.length]
It is similar to the previous/above method, but this involves a lookup for situations where you need to get the last array element's index pointer/index.

=>EX : demo

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Demo to check which is faster for add new element to array by methods Array.push, Array[i], Array[Array.length-1] in javascript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<table>
<tr>
<td>Push time</td>
<td>:</td>
<td id="push_time" style="text-align: right;"></td>
<td>ms</td>
</tr>
<tr>
<td>Array [i]</td>
<td>:</td>
<td id="array_i" style="text-align: right;"></td>
<td>ms</td>
</tr>
<tr>
<td>Array [Array.length-1] </td>
<td>:</td>
<td id="array_i_length" style="text-align: right;"></td>
<td>ms</td>
</tr>
</table>

<input type="button" name="refresh" id="check_again" value="refresh">

<script type="text/javascript">
var ex1 = function () {
//========Start : code for Array.push=============
var result = 0;
var a = [];
var start = new Date().getTime(); // get the start time of the test

for (var i = 0; i < 500000; i++) {
a.push(i);
}

var end = new Date().getTime();
result += end - start; // and the result is the end time minus the start time

$("#push_time").text(result);

//========End : code for Array.push=============
};
var ex2 = function () {
//========Start : code for Array[i]=============
var result = 0;
var a = [];
var start = new Date().getTime(); // get the start time of the test

for (var i = 0; i < 500000; i++) {
a[i] = i;
}

var end = new Date().getTime();
result += end - start; // and the result is the end time minus the start time
$("#array_i").text(result);
//========End : code for Array[i]=============

};
var ex3 = function () {
//========Start : code for Array[Array.length-1]=============
var result = 0;
var a = [];
var start = new Date().getTime(); // get the start time of the test

for (var i = 0; i < 500000; i++) {
a[a.length - 1] = i;
}

var end = new Date().getTime();
result += end - start; // and the result is the end time minus the start time
$("#array_i_length").text(result);
//========End : code for Array[Array.length-1]=============
};

$(document).on("click","#check_again",function() {
ex1(); // Call for Array.push
ex2(); // Call for Array[i]
ex3(); // Call for Array[Array.length-1]
});

ex1(); // Call for Array.push
ex2(); // Call for Array[i]
ex3(); // Call for Array[Array.length-1]
</script>
</body>

</html>

=>Output : (Click on refresh button to check it live)

Push time	:	ms
Array [i]	:	ms
Array [Array.length-1]	:	ms

Test this in different browsers like as Google Chrome, Chromium, Firefox, Opera, etc and check it again and again to get the idea, which method execute very fast and improve performance.