1

What is best practice for switching two items place in an Array via JavaScript?

For example if we have this array ['one', 'two', 'three', 'four', 'five', 'six'] and want to replace two with five to get this final result: ['one', 'five', 'three', 'four', 'two', 'six'].

enter image description here

The ideal solution is short and efficient.

Update:

The var temp trick is working and I know it. My question is: is using JavaScript native Array methods faster or not?

Something like array.splice().concat().blah().blah() seems is faster and use less memory. I didn't develope a function that using Array methods but I'm sure it's possible.

Mohsen
  • 64,437
  • 34
  • 159
  • 186
  • I actually got it without the picture ;) I'm curious what kinds of answers you were expecting. Things like the xor trick are kind of wasted in javascript. – Dave Newton Oct 26 '11 at 05:29
  • http://stackoverflow.com/q/872310/56829 – Omer Bokhari Oct 26 '11 at 05:35
  • Whether or not the array methods are faster or not will be tightly coupled to the javascript engine implementation. – Dave Newton Oct 26 '11 at 05:43
  • You can use the site http://jsperf.com to benchmark which is faster across different browsers if you like - array methods, or just Ye Olde Swap Using A Temporarye Variable. I'd be curious to see the results. – GregL Oct 26 '11 at 05:53
  • Here is my quick [jsPerf](http://jsperf.com/fastest-swap-method) that has the preliminary result of the temp variable approach being much faster. If you can improve on my test case, though, please do. – GregL Oct 26 '11 at 06:00
  • It's *faster* of what?!! – Mohsen Oct 26 '11 at 06:14

2 Answers2

2

Just use a variable as temporary storage:

var temp = data[1];
data[1] = data[4];
data[4] = temp;

As this just copies values in the array it avoids methods like slice and splice that move around big parts of the array or creates entirely new arrays, which would be very expensive in comparison, and also scales badly. This is an O(1) operation, while splicing would be an O(n) operation where n is the number of items that would be moved, which would be something like length*2-index1-index2.

Here is a performance test for different ways of swapping the items: http://jsperf.com/array-item-swap/2

Even if you use splice in a way so that it would not need to move around a lot of data, it's still slow. Copying the values is about 50 times faster.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • @Mohsen: I added a bit of an explanation. I'll try to create a performancce test to show the difference. – Guffa Oct 26 '11 at 05:50
  • I need to JSPerf it to make sure. Here I'm working on a function to do this with methods. It's not easy though1 – Mohsen Oct 26 '11 at 05:55
1

It looks like Guffa beat me to it but here's a function (and working example) that would work.

http://jsfiddle.net/neilheinrich/Hu389/

var my_array = [1, 2, 3, 4, 5, 6];

var swapArrayPosition = function (array, index_1, index_2) {
  var temp = array[index_1];
  array[index_1] = array[index_2];
  array[index_2] = temp;
}

swapArrayPosition(my_array, 4, 1);
nheinrich
  • 1,841
  • 11
  • 17
  • You don't need to return the array from the function as it changes the array in place. Returning it would be used if the function would create a new array and leave the original unchanged. – Guffa Oct 26 '11 at 05:52
  • That's true but I had to update the flow to get it work that way. Thanks for the note. *updated* – nheinrich Oct 26 '11 at 05:58