Blog for web developers

Reverse array Vanilla javascript

This article I am going to show you, the best way to reverse array vanilla javascript without using methods like reverse(),push(), etc..

In general reversing array with method like reverse() is very easy with 1 line code.

var x = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
console.log(x.reverse())
// output: 
// [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

But instead we can do this with more efficient code.

Reverse array with vanilla javascript

I have a plain array which is already sorted with natural numbers from 1 to 20. Variable x has been defined for the array.

var x = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var xlen = x.length;
var count = 0;
console.log(x)
for(var i=0; i<xlen/2; i++){
	count++;
	var temp = x[i];
	var endIndex = xlen - 1 - i;
	x[i] = x[endIndex];
	x[endIndex] = temp;
}
console.log({count}, {x});
// output : count = 10 
// x= [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

As you can see I have 20 items in my array and the loop count is only 10. So by iterating over only 10 items, this code reversed all 20 items in an array saving 50% of the iterating time. This way we can optimized our code to perform better in web browsers. The method I have used in this loop is a swapping variable value method. This is very common technique in JavaScript.

There are other methods of reversing an array. By creating a new array and push it into the that array with back ward loop also you can reverse it.

let x = [1,2,3,13,14,15,4,9,10,11,5,6,7,8,12,16,17,18,19,20];

var xlen = x.length;
//sorting start
for(var i=0; i<xlen-1; i++) {
	var min = x[i]
	for(var j=i+1; j<xlen; j++) {
		if(x[j] < min) {
			min = x[j];
			var temp = x[i];
			x[i] = min;
			x[j] = temp;
		}
	}
}
//sorting end

let x1 = [];
let len = x.length -1;
for(let i=len; i>=0; i--){
	x1.push(x[i]);
}
console.log({x1});
Reverse array Vanilla javascript
Sorting and reversing

Do not scared that the code is too much lengthy. The top part is only for sorting and the bottom 3 line is for reversing. You can see how its very easy to reverse an array with simple back ward loop.

In loop what I have done is, I simply started from the last index of an array and the end position is 0. Till then the loop will run negatively with the help of decrement operator.

There might be other many ways to reverse array. I showed you the best possible way to do it. These methods are totally plain javascript and it doesn’t affect the performance of your code.

I hope you like this article. This way you can reverse array with vanilla JavaScript.

Thank you reading.

Santosh Shah

I am a JavaScript developer having enthusiasm on most frontend skills like JavaScript, HTML, CSS, SASS, node, gulp, angular etc. I love exploring new techniques and like to learn new technologies to keep my self up to date.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.