Non-destructively reversing an array in Javascript

Question

Say I have a function:

function linesReverser(lines) {
  var localLines = lines.slice(); 
  localLines[1].reverse(); 
  return _.flatten(localLines);
}

And using it like so:

var input = [["Hello"],["Hello", "World"]["Attention", "Please"]];
var output1 = linesReverser(input); //["Hello", "World", "Hello", "Attention", "Please"]
var output2 = linesReverser(input); //["Hello", "Hello", "World", "Attention", "Please"]

Notice how the object reference is being shared. I am new to JS, but I thought copying the values would alleviate this issue (line.slice()), but it doesn't seem to work. Is this because of the nested arrays?

How can I non-destructively/immutably perform a reverse?

Ryan King · Accepted Answer · 2020-09-02 21:57:28Z

27

You can duplicate the array using ES6's spread operator, then destructively reverse the duplicate:

const arr1 = [1,2,3];
const arr2 = [...arr1].reverse();
// arr1 => [1,2,3]
// arr2 => [3,2,1]

edited Sep 2, 2020 at 21:57

answered Feb 13, 2020 at 17:20

Ryan King

3,70612 gold badges51 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joshua Pinter Over a year ago

This deserves far more upvotes. Cleanest solution, given the insanity that reverse() is destructive.

the system · Accepted Answer · 2013-01-22 01:43:40Z

6

You're making a shallow copy of the lines array. To copy the nested arrays, you need to slice each one.

var localLines = lines.map(function(arr) {
    return arr.slice();
});

The .map method will return a new Array of the return values, which are a slice of each nested Array.

FWIW, here's a shorter version that will work in modern browsers, though I'd probably stick with the first one.

var localLines = lines.map(Array.apply.bind(Array, null));

edited Jan 22, 2013 at 1:43

answered Jan 22, 2013 at 1:36

the system

9,35642 silver badges47 bronze badges

8 Comments

Dominic Bou-Samra Over a year ago

Thanks mate. Wasn't far off trying this. So new to JS.

the system Over a year ago

You're welcome. Since it seems you're using underscore, you may want to use its map method if you're targeting older browsers.

the system Over a year ago

@JosephSilber: Array is just the new Array constructor. The .apply is the normal Function.prototype.apply. Using .bind(), we're binding the this value of .apply() to the Array function, and the first argument of .apply() to null, so the function returned will effectively do Array.apply(null, ...). Since the first argument passed by .map is each member of the lines array, the call becomes Array.apply(null, ["foo", "bar"]), which is the same as doing Array("foo", "bar"), giving us a new Array with those members.

the system Over a year ago

@JosephSilber: Any function that won't get tripped up by the other arguments passed by .map(). In reality, each call to the callback will look more like Array.apply(null, ["foo", "bar"], 0, lines), where 0 is the current index, and lines is the original Array, but .apply() will ignore those extra args.

the system Over a year ago

Why did @JosephSilber delete all his comments???

|

SoEzPz · Accepted Answer · 2017-09-21 22:01:53Z

4

A non-destructive approach to reverse an array in Javascript

ES6

var array = [1,2,3];
array.reduce((ary, ele) => {ary.unshift(ele); return ary}, []);
// => [3,2,1];
// array => [1,2,3];

ES5

array.reduce(function(obj, ele){
  obj.unshift(ele);
  return obj;
},[]);

answered Sep 21, 2017 at 22:01

SoEzPz

16k8 gold badges64 silver badges67 bronze badges

Comments

Tomi · Accepted Answer · 2021-12-29 09:50:36Z

1

You can safely (deep) copy a nested array with JSON.parse and JSON.stringify, therefore the reference is not shared. Then destructively reverse the duplicate:

let array1 = [[1, 3], [50, 1]];
let arrayCopy = JSON.parse(JSON.stringify(array1));
arrayCopy.reverse(); //[[50,1],[1,3]]

checkout cloning of arrays for more info

answered Dec 29, 2021 at 9:50

Tomi

393 bronze badges

Collectives™ on Stack Overflow

Non-destructively reversing an array in Javascript

4 Answers 4

1 Comment

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related