loading...
Cover image for How to shift array position in vanilla JavaScript

How to shift array position in vanilla JavaScript

kmelve profile image Knut Melvær ・2 min read

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:

const theList = ["Cersei", "Joffrey", "Ilyn", "The Mountain", "The Hound", "Melisandre", "Beric", "Thoros", "Tywin", "Meryn", "Walder"] const newList = [theList[theList.length - 1], ...theList.splice(0, theList.length - 1)] console.log(newList)

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:

const theList = ["Cersei", "Joffrey", "Ilyn", "The Mountain", "The Hound", "Melisandre", "Beric", "Thoros", "Tywin", "Meryn", "Walder"] const newList = [theList[theList.length - 1], ...theList.splice(0, theList.length - 1)] // check output console.log(newList) // check output console.log(theList)

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):

const theList = ["Cersei", "Joffrey", "Ilyn", "The Mountain", "The Hound", "Melisandre", "Beric", "Thoros", "Tywin", "Meryn", "Walder"] const newList = [theList[theList.length - 1], ...theList.slice(0, theList.length - 1)] console.log(newList) console.log(theList)

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.

const theList = ["Cersei", "Joffrey", "Ilyn", "The Mountain", "The Hound", "Melisandre", "Beric", "Thoros", "Tywin", "Meryn", "Walder"] const newList = theList.reduce( (accumulatedArray, currentItem, index, originalArray) => index < originalArray.length - 1 ? [...accumulatedArray, currentItem] : [currentItem, ...accumulatedArray], [] ) console.log(newList) console.log(theList)

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:

const theList = ["Cersei", "Joffrey", "Ilyn", "The Mountain", "The Hound", "Melisandre", "Beric", "Thoros", "Tywin", "Meryn", "Walder"] function shiftLastToFirst (theArray) { return theArray.reduce( (accumulatedArray, currentItem, index, originalArray) => { return index < originalArray.length - 1 ? [...accumulatedArray, currentItem] : [currentItem, ...accumulatedArray] }, [] ) } shiftLastToFirst(theList)

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?

Posted on Sep 5 '18 by:

kmelve profile

Knut Melvær

@kmelve

Humanities technologist // Developer relations 🥑 @ sanity.io

Discussion

markdown guide
 

Why not use a really simple solution with plain ES5?

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

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.

 

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(), ..._];
 

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

Good point, you'd have to do something like

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

which is even more convoluted.

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

 

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

 

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

 

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!

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.

 

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

I would go for

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

or

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

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.

 

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

 

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

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

Not ideal (unless you're Arya).