DEV Community

How to shift array position in vanilla JavaScript

Knut Melvær on December 19, 2018

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...

Read full post

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;
}

Jesse M. Holmes • Dec 20 '18

Everyone is talking about your code, and I'm stuck appreciating this beautiful gem:

Not ideal (unless you're Arya).

Knut Melvær • Dec 20 '18

Thank you for noticing!