Fastest way to move first element to the end of an Array

Question

I'm wondering what is the fastest way in JavaScript to move an element from the beginning of an Array to the end. For example if we have

[8,1,2,3,4,5,6,7]

And we want: [1,2,3,4,5,6,7,8]

I want to move the first element to the end. I was thinking about switching element 0 with element 1, after that switching element 1 with element 2 and so on until the 8 is at the and (basically how bubblesort works). I was wondering if there is a faster way to bring the first element to the end.

I will be using small Arrays (around 10 elements), and I want to avoid shift() since it's pretty slow.

This is what I have now on chrome it's 45% faster than normal shift+push: http://jsperf.com/shift-myfunc

The arrays will have objects in them for a game.

Answer 1

Use the shift() and push() functions:

var ary = [8,1,2,3,4,5,6,7];
ary.push(ary.shift());  // results in [1, 2, 3, 4, 5, 6, 7, 8] 

Example:

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

console.log("Before: " + ary);

ary.push(ary.shift());  // results in [1, 2, 3, 4, 5, 6, 7, 8] 

console.log("After: " + ary);

Answer 2

Use shift and push

var a = ["a","b","c"];
var b = a.shift();
a.push(b);

or

var b = a.shift();
a[a.length] = b;

---

Edit Based on updated question

What is going to be the fastest? Really depends on content of the array and what browser/version!

Now what are the ways to remove the first index?

• shift()
• splice()
• slice()

Now what are the ways to add to the last index?

• push()
• array[array.length]
• concat() -- not even going to try

Other ways

• for loop - make new array [going to be horrible on large arrays]

JSPerf:

http://jsperf.com/test-swapping-of-first-to-last

---

What is really the fastest?

What is the fastest really depends on what you are doing with the array. If you are just using the first index, it will be fastest just to make your code read an index and not shift the values. If you are using all the indexes, than just loop and through and when you get to the end start back at zero. Basic counters.

Answer 3

And here is a sweet ES6 version

let arr = [1,2,3,4,5,6]

const [first, ...rest] = arr;
arr = [...rest,first]

Answer 4

Use splice to get the first element

var first = array.splice(0,1);

Then push to make if the last.

Since the return value of the splice method is an array, you have to say

array.push(first[0]);

Working example here: JSFIDDLE

Answer 5

Just in case you want to put any element to the end:

var ary = [8,1,2,3,4,5,6,7];
ary.push(ary.splice(position, 1)[0]);

for position just wrap this in a forEach.

Answer 6

var a = [1,2,3,4,5,6,7,8];
var b= a[7];
var c = a.slice(1, 8);
c.push(b);

Edit: It's probably better to just shift, like epascarello did in his answer.

Answer 7

With ES20...

const newArr = [
   ...arr.slice(1),
   arr[0]
];

Answer 8

one more flavour

var arr = [0, 1, 2];
arr = arr.concat(arr.shift())

concat can add not just a element but another array at the end or beginning

Answer 9

Updating the arrays moving elements from one extreme to the other:

const array = ['First', 'Second', 'Third', 'Fourth'];

const next = [...array]
next.push(next.shift())
console.log(next); // [ 'Second', 'Third', 'Fourth', 'First' ]

const prev = [...array]
prev.unshift(prev.pop())
console.log(prev); // [ 'Fourth', 'First', 'Second', 'Third' ]