How can I reverse an array in JavaScript without using libraries?

JavascriptArrays

Javascript Problem Overview


I am saving some data in order using arrays, and I want to add a function that the user can reverse the list. I can't think of any possible method, so if anybody knows how, please help.

Javascript Solutions


Solution 1 - Javascript

Javascript has a reverse() method that you can call in an array

var a = [3,5,7,8];
a.reverse(); // 8 7 5 3

Not sure if that's what you mean by 'libraries you can't use', I'm guessing something to do with practice. If that's the case, you can implement your own version of .reverse()

function reverseArr(input) {
    var ret = new Array;
    for(var i = input.length-1; i >= 0; i--) {
        ret.push(input[i]);
    }
    return ret;
}

var a = [3,5,7,8]
var b = reverseArr(a);

Do note that the built-in .reverse() method operates on the original array, thus you don't need to reassign a.

Solution 2 - Javascript

> Array.prototype.reverse() is all you need to do this work. See compatibility table.

var myArray = [20, 40, 80, 100];
var revMyArr = [].concat(myArray).reverse();
console.log(revMyArr);
// [100, 80, 40, 20]

Solution 3 - Javascript

Heres a functional way to do it.

const array = [1,2,3,4,5,6,"taco"];

function reverse(array){
  return array.map((item,idx) => array[array.length-1-idx])
}

Solution 4 - Javascript

20 bytes

let reverse=a=>[...a].map(a.pop,a)

Solution 5 - Javascript

The shortest reverse method I've seen is this one:

let reverse = a=>a.sort(a=>1)

Solution 6 - Javascript

reveresed = [...array].reverse()

Solution 7 - Javascript

const original = [1, 2, 3, 4];
const reversed = [...original].reverse(); // 4 3 2 1

Concise and leaves the original unchanged.

Solution 8 - Javascript

**

Shortest reverse array method without using reverse method:

**

 var a = [0, 1, 4, 1, 3, 9, 3, 7, 8544, 4, 2, 1, 2, 3];

 a.map(a.pop,[...a]); 
// returns [3, 2, 1, 2, 4, 8544, 7, 3, 9, 3, 1, 4, 1, 0]

a.pop method takes an last element off and puts upfront with spread operator ()

MDN links for reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

Solution 9 - Javascript

This is what you want:

array.reverse();

DEMO

Solution 10 - Javascript

I've made some test of solutions that not only reverse array but also makes its copy. Here is test code. The reverse2 method is the fastest one in Chrome but in Firefox the reverse method is the fastest.

var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

var reverse1 = function() {
  var reversed = array.slice().reverse();
};

var reverse2 = function() {
  var reversed = [];
  for (var i = array.length - 1; i >= 0; i--) {
    reversed.push(array[i]);
  }
};

var reverse3 = function() {
  var reversed = [];
  array.forEach(function(v) {
    reversed.unshift(v);
  });
};

console.time('reverse1');
for (var x = 0; x < 1000000; x++) {
  reverse1();
}
console.timeEnd('reverse1'); // Around 184ms on my computer in Chrome

console.time('reverse2');
for (var x = 0; x < 1000000; x++) {
  reverse2();
}
console.timeEnd('reverse2'); // Around 78ms on my computer in Chrome

console.time('reverse3');
for (var x = 0; x < 1000000; x++) {
  reverse3();
}
console.timeEnd('reverse3'); // Around 1114ms on my computer in Chrome

Solution 11 - Javascript

Here is a version which does not require temp array.

function inplaceReverse(arr) {
  var i = 0;
  while (i < arr.length - 1) {
    arr.splice(i, 0, arr.pop());
    i++;
  }
  return arr;
}

// Useage:
var arr = [1, 2, 3];
console.log(inplaceReverse(arr)); // [3, 2, 1]

Solution 12 - Javascript

You can do

var yourArray = ["first", "second", "third", "...", "etc"]
var reverseArray = yourArray.slice().reverse()

console.log(reverseArray)

You will get

["etc", "...", "third", "second", "first"]

Solution 13 - Javascript

> var arr = [1,2,3,4,5,6];
> arr.reverse();
  [6, 5, 4, 3, 2, 1]

Solution 14 - Javascript

array.reverse() 

Above will reverse your array but modifying the original. If you don't want to modify the original array then you can do this:

var arrayOne = [1,2,3,4,5];

var reverse = function(array){
    var arrayOne = array
    var array2 = [];

    for (var i = arrayOne.length-1; i >= 0; i--){
      array2.push(arrayOne[i])
    } 
    return array2
}

reverse(arrayOne)

Solution 15 - Javascript

function reverseArray(arr) {
	let reversed = [];
	for (i = 0; i < arr.length; i++) { 
    reversed.push((arr[arr.length-1-i]))
	}
  return reversed;
}

Solution 16 - Javascript

Using .pop() method and while loop.

var original = [1,2,3,4];
var reverse = [];
while(original.length){
	reverse.push(original.pop());
}

Output: [4,3,2,1]

Solution 17 - Javascript

I'm not sure what is meant by libraries, but here are the best ways I can think of:

// return a new array with .map()
const ReverseArray1 = (array) => {
    let len = array.length - 1;

    return array.map(() => array[len--]);
}

console.log(ReverseArray1([1,2,3,4,5])) //[5,4,3,2,1]

// initialize and return a new array
const ReverseArray2 = (array) => {
    const newArray = [];
    let len = array.length;

    while (len--) {
        newArray.push(array[len]);
    }

    return newArray;
}

console.log(ReverseArray2([1,2,3,4,5]))//[5,4,3,2,1]

// use swapping and return original array
const ReverseArray3 = (array) => {
    let i = 0;
    let j = array.length - 1;

    while (i < j) {
        const swap = array[i];
        array[i++] = array[j];
        array[j--] = swap;
    }

    return array;
}
console.log(ReverseArray3([1,2,3,4,5]))//[5,4,3,2,1]

// use .pop() and .length
const ReverseArray4 = (array) => {
    const newArray = [];

    while (array.length) {
        newArray.push(array.pop());
    }

    return newArray;
}
console.log(ReverseArray4([1,2,3,4,5]))//[5,4,3,2,1]

Solution 18 - Javascript

53 bytes

function reverse(a){
    for(i=0,j=a.length-1;i<j;)a[i]=a[j]+(a[j--]=a[i++],0)
}

Just for fun, here's an alternative implementation that is faster than the native .reverse method.

Solution 19 - Javascript

Pure functions to reverse an array using functional programming:

var a = [3,5,7,8];

// ES2015
function immutableReverse(arr) {
  return [ ...a ].reverse();
}

// ES5
function immutableReverse(arr) {
  return a.concat().reverse()
}

Solution 20 - Javascript

As others mentioned, you can use .reverse() on the array object.

However if you care about preserving the original object, you may use reduce instead:

const original = ['a', 'b', 'c'];
const reversed = original.reduce( (a, b) => [b].concat(a) );
//                                           ^
//                                           |
//                                           +-- prepend b to previous accumulation

// original: ['a', 'b', 'c'];
// reversed: ['c', 'b', 'a'];

Solution 21 - Javascript

It can also be achieved using map method.

[1, 2, 3].map((value, index, arr) => arr[arr.length - index - 1])); // [3, 2, 1]

Or using reduce (little longer approach)

[1, 2, 3].reduce((acc, curr, index, arr) => {
    acc[arr.length - index - 1] = curr;
    return acc;
}, []);

Solution 22 - Javascript

reverse in place with variable swapping (mutative)

const myArr = ["a", "b", "c", "d"];
for (let i = 0; i < (myArr.length - 1) / 2; i++) {  
    const lastIndex = myArr.length - 1 - i; 
    [myArr[i], myArr[lastIndex]] = [myArr[lastIndex], myArr[i]] 
}

Solution 23 - Javascript

two ways:

  1. counter loop

    function reverseArray(a) { 
         var rA = []
         for (var i = a.length; i > 0; i--) {
             rA.push(a[i - 1])
         } 
    
         return rA;
      }
    
  2. Using .reverse()

     function reverseArray(a) {  
         return a.reverse()  
      }
    

Solution 24 - Javascript

Reverse by using the sort method

  • This is a much more succinct method.

const resultN = document.querySelector('.resultN');
const resultL = document.querySelector('.resultL');

const dataNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const dataLetters = ['a', 'b', 'c', 'd', 'e'];

const revBySort = (array) => array.sort((a, b) => a < b);

resultN.innerHTML = revBySort(dataNum);
resultL.innerHTML = revBySort(dataLetters);

<div class="resultN"></div>
<div class="resultL"></div>

Solution 25 - Javascript

Using ES6 rest operator and arrow function.

const reverse = ([x, ...s]) => x ? [...reverse(s), x] : [];
reverse([1,2,3,4,5]) //[5, 4, 3, 2, 1]

Solution 26 - Javascript

Use swapping and return the original array.

const reverseString = (s) => {
  let start = 0, end = s.length - 1;
  while (start < end) {
    [s[start], s[end]] = [s[end], s[start]]; // swap
    start++, end--;
  }
  return s;
};

console.log(reverseString(["s", "t", "r", "e", "s", "s", "e", "d"]));

Solution 27 - Javascript

Infact the reverse() may not work in some cases, so you have to make an affectation first as the following

let a = [1, 2, 3, 4];
console.log(a);  // [1,2,3,4]
a = a.reverse();
console.log(a); // [4,3,2,1]

or use concat

let a = [1, 2, 3, 4];
console.log(a, a.concat([]).reverse());  // [1,2,3,4], [4,3,2,1]

Solution 28 - Javascript

What about without using push() !

Solution using XOR !

var myARray = [1,2,3,4,5,6,7,8];

function rver(x){
	var l = x.length;
	for(var i=0; i<Math.floor(l/2); i++){
		
		var a = x[i];
		var b = x[l-1-i];

		a = a^b;
		b = b^a;
		a = a^b;

		x[i] = a;
		x[l-1-i] = b;
	}

	return x;

}

console.log(rver(myARray));

Solution 29 - Javascript

JavaScript already has reverse() method on Array, so you don't need to do that much!

Imagine you have the array below:

var arr = [1, 2, 3, 4, 5];

Now simply just do this:

arr.reverse();

and you get this as the result:

[5, 4, 3, 2, 1];

But this basically change the original array, you can write a function and use it to return a new array instead, something like this:

function reverse(arr) {
  var i = arr.length, reversed = [];
  while(i) {
    i--;
    reversed.push(arr[i]);
  }
  return reversed;
}

Or simply chaning JavaScript built-in methods for Array like this:

function reverse(arr) {
  return arr.slice().reverse();
}

and you can call it like this:

reverse(arr); //return [5, 4, 3, 2, 1];

Just as mentioned, the main difference is in the second way, you don't touch the original array...

Solution 30 - Javascript

How about this?:

  function reverse(arr) {
    function doReverse(a, left, right) {
      if (left >= right) {
        return a;
      }
      const temp = a[left];
      a[left] = a[right];
      a[right] = temp;
      left++;
      right--;
      return doReverse(a, left, right);
    }

    return doReverse(arr, 0, arr.length - 1);
  }

  console.log(reverse([1,2,3,4]));

https://jsfiddle.net/ygpnt593/8/

Solution 31 - Javascript

This function will work with arrays that may have gaps between their indices.

function reverse( a ) {
	var b = [], c = [] ;
	a.forEach( function( v ) { b.push( v ) } ) ;
	a.forEach( function( v, i ) { c[i] = b.pop() } ) ;
	return c ;
}

var a= [] ; a[1] = 2 ; a[3] = 4 ; a[7] = 6 ; a[9] = 8 ;
a = reverse( a ) ;
var s = '' ;
a.forEach( function( v, i ) { s += 'a[' + i + '] = ' + v + '  ' } ) ;
console.log( s ) ;
// a[1] = 8  a[3] = 6  a[7] = 4  a[9] = 2

Solution 32 - Javascript

Below is a solution with best space and time complexity

function reverse(arr){
let i = 0;
let j = arr.length-1; 
while(i<j){
arr[j] = arr[j]+arr[i];
arr[i] = arr[j] - arr[i];
arr[j] = arr[j] - arr[i];
i++;
j--;
}
return arr;
}
var arr = [1,2,3,4,5,6,7,8,9]
reverse(arr);

output => [9,8,7,6,5,4,3,2,1]

Solution 33 - Javascript

reverse array and sub-array (in place) with ES6.

function reverse(array, i=0, j=array.length-1){
  while (i < j){
    [array[i], array[j]] = [array[j], array[i]];
    ++i;
    --j;
  }
}

Solution 34 - Javascript

We have reverse() function to reverse the given array in JS.

var a = [7,8,9];
a.reverse(); // 9 8 7

function reverseArr(input) 
{
var ret = new Array;
for(var i = input.length-1; i >= 0; i--) 
{
    ret.push(input[i]);
}
return ret;
}

Solution 35 - Javascript

I also faced the same problem. Thank you for this question. I did the code like the below snippet. It works nicely. I used ES6.

const Array = ["a", "b", "c", "d"];
let revArray = [].concat(Array).reverse();

when I console.log it I got the output like below

console.log(revArray)
// output: ["d","c","b","a"]

Solution 36 - Javascript

I just rewrote the haskell implementation to js.

const rev = (list, reversed) => {
	if (list.length == 0) return reversed
	
	reversed.unshift(list[0])
	return rev(list.slice(1), reversed)
}

const reverse = (list) => rev(list, [])

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDerek 朕會功夫View Question on Stackoverflow
Solution 1 - JavascriptAndreas WongView Answer on Stackoverflow
Solution 2 - JavascriptRohit ShelhalkarView Answer on Stackoverflow
Solution 3 - JavascriptJake BoylesView Answer on Stackoverflow
Solution 4 - JavascriptTorkel VelureView Answer on Stackoverflow
Solution 5 - JavascriptElia GradyView Answer on Stackoverflow
Solution 6 - JavascriptAli MirzaeiView Answer on Stackoverflow
Solution 7 - JavascriptNick BView Answer on Stackoverflow
Solution 8 - Javascriptparag patelView Answer on Stackoverflow
Solution 9 - JavascriptqwertymkView Answer on Stackoverflow
Solution 10 - JavascriptŁukasz JagodzińskiView Answer on Stackoverflow
Solution 11 - Javascriptuser2914136View Answer on Stackoverflow
Solution 12 - JavascriptKangudie Muanza - KillmongerView Answer on Stackoverflow
Solution 13 - JavascriptJoe FrambachView Answer on Stackoverflow
Solution 14 - JavascriptenjareyesView Answer on Stackoverflow
Solution 15 - JavascriptTrung TranView Answer on Stackoverflow
Solution 16 - JavascriptAbhishekView Answer on Stackoverflow
Solution 17 - JavascriptWesleyACView Answer on Stackoverflow
Solution 18 - JavascriptDerek 朕會功夫View Answer on Stackoverflow
Solution 19 - JavascriptFaisal AliView Answer on Stackoverflow
Solution 20 - JavascriptMichael P. BazosView Answer on Stackoverflow
Solution 21 - JavascriptJaspreet SinghView Answer on Stackoverflow
Solution 22 - Javascriptdaino3View Answer on Stackoverflow
Solution 23 - JavascriptRashid IqbalView Answer on Stackoverflow
Solution 24 - JavascripttechmsiView Answer on Stackoverflow
Solution 25 - JavascriptAnkit SinhaView Answer on Stackoverflow
Solution 26 - JavascriptPenny LiuView Answer on Stackoverflow
Solution 27 - JavascriptSmaillnsView Answer on Stackoverflow
Solution 28 - JavascriptErcanEView Answer on Stackoverflow
Solution 29 - JavascriptAlirezaView Answer on Stackoverflow
Solution 30 - Javascripttechguy2000View Answer on Stackoverflow
Solution 31 - JavascriptbarncatView Answer on Stackoverflow
Solution 32 - Javascriptsaransh mehraView Answer on Stackoverflow
Solution 33 - JavascriptQuentinUKView Answer on Stackoverflow
Solution 34 - JavascriptApps MavenView Answer on Stackoverflow
Solution 35 - JavascriptSabesanView Answer on Stackoverflow
Solution 36 - JavascriptTaoJSView Answer on Stackoverflow