Knut Melvær

Posted on Dec 19, 2018

How to shift array position in vanilla JavaScript

#javascript #node #programming #webdev

I was helping a user over at sanity.io yesterday doing some content migration, where they wanted to take the last element of an array and put it in the first position. Every time I get a question like this, I like to see if I manage to solve it without going to any libraries. Both because I don't want to introduce more dependencies for the person with the question, but most of all, it's an opportunity for some mental exercise.

So, how to change an array like this:

["Cersei", "Joffrey", "Ilyn", "The Mountain", "The Hound", "Melisandre", "Beric", "Thoros", "Tywin", "Meryn", "Walder"]

to this?

["Walder", "Cersei", "Joffrey", "Ilyn", "The Mountain", "The Hound", "Melisandre", "Beric", "Thoros", "Tywin", "Meryn"]

My first instinct was to make a new array just targeting the last element with the list length subtracted by 1, and then spreading the rest of the array using splice. Push the green run button to run the code:

Some of you will already have guessed why this is a bad idea, and some of you will be like me and always mix up splice and slice. Let’s see what happens with theList when we run the code above:

Not ideal (unless you're Arya). Replacing splice with slice leaves the original array intact, and will not mutate it (which can lead to a mountain of problems):

This leaves us with exactly what we want.

Another way to go about it is to use the Array.prototype.reduce-method, which to me feel a bit cleaner. Also, .reduce is worth investing time into learning.

This can, of course, be made into a function. Tempting as it may be, I don't recommend using an anonymous arrow (=>) function for this, as it doesn't show up with a name in the console stack trace if something wrong occurs:

Now, I'm certain there are many smarter ways of doing this. And the reason I'm writing this up and putting it here is that I want to learn about them.

How would you go about solving this?

Top comments (19)

Alex Lohr • Dec 19 '18

Why not use a really simple solution with plain ES5?

function lastToFirst(array) {
  const result = array.slice(0);
  result.unshift(result.pop());
  return result;
}

Basti Ortiz • Dec 19 '18

I mean it would be ES5 if const was var. 😂

Anyway, I like how concise it is. Three lines of code sure does look more satisfying than whatever I did, despite their similarities.

Andrew Bone • Dec 20 '18

I agree this is readable.

If you handed this to a new developer and asked them what it did they might be lost for a little while.

const lastToFirst = _ => [_.pop(), ..._];

Alex Lohr • Dec 20 '18

Also, that would change the original array, which is not the intended functionality.

Andrew Bone • Dec 20 '18 • Edited

Good point, you'd have to do something like

const lastToFirst = _ => {const $ = _.slice(); return [$.pop(), ...$]};

which is even more convoluted.

Alex Lohr • Dec 20 '18

How about const lastToFirst = _ => ($ => [$.pop(), ...$])(_.slice()) as even more convoluted example?

Andrew Bone • Dec 20 '18

Yikes...

I kinda love it.

Michael De Abreu • Dec 20 '18

This was literally my first thought when I was reading the problem.

Xander • Dec 19 '18

Yeah that is it.
This article is lol though. I feel like the article author is trolling.
Especially when I read: "Every time I get a question like this, I like to see if I manage to solve it without going to any libraries".

Knut Melvær • Dec 19 '18

It wasn't trolling! 😁

It's more like “I got serious about JavaScript when the first features of ES6 and every problem seem like a nail”. And that's exactly why I asked for other approaches and learned something.

…and some meta-point about how feeling super JS savvy because I know .reduce, and being humbled because I don't know some super obvious ES5 features that have been around for a long while.

But thanks for the input!

Xander • Dec 19 '18

haha ok, but anyways I did not want to offend or anything. You took the scenic route :D
And that delivers value for future endeavours. Happy holidays to you and your family.

Basti Ortiz • Dec 19 '18 • Edited

I think this will do just fine.

function shiftArray(arr) {
  // Get the last element in the array
  const lastElement = arr[arr.length - 1];

  // Prepend the `lastElement` to the start of the array
  arr.unshift(lastElement);

  // Remove the duplicate element at the end of the array
  arr.pop();

  // Hooray! We party! 🎉
  return arr;
}

// Plop in `theList`
shiftArray(theList);

Thomas Junkツ • Dec 19 '18 • Edited

I would go for

const lastToFirst = (arr) => [arr.pop(), ...arr]

ltf= function(arr){ return [arr.pop()].concat(arr) }

Joe Zack • Dec 20 '18

ES6 FTW!

Adrian B.G. • Dec 19 '18

Probably that array is not going to be accessed using the index, it looks like an unordered collection.

If this is true you need a linked list not an array, making the move operation 2N more efficient and resulting in a simpler code.

Joe Zack • Dec 20 '18

Great point! Array Data Structures aren't very efficient at arbitrarily inserting or plucking (even though JS provides convenient shift/deshift methods.)

With this small of a dataset it doesn't matter, but it's a great point. :)

Kenneth Truyers • Dec 20 '18

I very much like the plain ES5 solution by @lexlohr . Here's another, more generic version that lets you rotate an array by a variable number of positions:

const rotateArray = (array, count) => {
  const arr = [...array];

  count = (count || 0) % arr.length;
  if (count < 0)  count += arr.length;

  var removed = arr.splice(0, count);
  arr.push.apply(arr, removed);

  return arr;
}