This approach is great because it's straightforward and effective.

function rearrangeArray(arr, startIdx, endIdx) {
    var item = arr[startIdx];
    arr.splice(startIdx, 1);
    arr.splice(endIdx, 0, item);
}

Remember to always double-check your array boundaries.

The code snippet below demonstrates various test cases in the console for different combinations of startIdx and endIdx (0..n, 0..n).

Test Snippet on jsFiddle

Just stumbled upon this gem on JSPerf...

Array.prototype.move = function(from, to) {
    this.splice(to, 0, this.splice(from, 1)[0]);
};

It's a neat little trick, but for better performance (especially with small data sets), consider trying out...

 Array.prototype.move2 = function(pos1, pos2) {
    // local variables
    var i, tmp;
    // convert input parameters to integers
    pos1 = parseInt(pos1, 10);
    pos2 = parseInt(pos2, 10);
    // if positions are different and within array bounds
    if (pos1 !== pos2 && 0 <= pos1 && pos1 <= this.length && 0 <= pos2 && pos2 <= this.length) {
      // save the element at position 1
      tmp = this[pos1];
      // shift elements up or down accordingly to move element
      if (pos1 < pos2) {
        for (i = pos1; i < pos2; i++) {
          this[i] = this[i + 1];
        }
      }
      else {
        for (i = pos1; i > pos2; i--) {
          this[i] = this[i - 1];
        }
      }
      // place the saved element at destination position
      this[pos2] = tmp;
    }
  }

All credits go to Richard Scarrott. It outperforms the splice method in small data sets according to this benchmark, although it's noticeably slower with larger data sets as pointed out by Darwayne.

The splice() method is used to add or remove items from an array, and it also returns the removed item(s).

Keep in mind that this method will modify the original array. /w3schools/

Array.prototype.move = function(from,to){
  this.splice(to,0,this.splice(from,1)[0]);
  return this;
};

var arr = [ 'a', 'b', 'c', 'd', 'e'];
arr.move(3,1);//["a", "d", "b", "c", "e"]


var arr = [ 'a', 'b', 'c', 'd', 'e'];
arr.move(0,2);//["b", "c", "a", "d", "e"]

Since the function can be chained together, you can also do this:

alert(arr.move(0,2).join(','));

Check out the demo here

Here is my two cents on the topic: The code provided is easy to read, effective in performance, and does not generate new arrays.

function repositionArrayItems(array, fromIndex, toIndex) {
  if (toIndex === fromIndex) return array;

  var targetElement = array[fromIndex];                         
  var incrementValue = toIndex < fromIndex ? -1 : 1;

  for (var i = fromIndex; i != toIndex; i += incrementValue){
    array[i] = array[i + incrementValue];
  }
  array[toIndex] = targetElement;
  return array;
}

Presenting a concise ES6 solution featuring an optional parameter on.

if (typeof Array.prototype.transfer === "undefined") {
  Array.prototype.transfer = function(start, end, on = 1) {
    this.splice(end, 0, ...this.splice(start, on))
  }
}

Inspired by the initial concept put forth by wizkiddo

The variable on represents the quantity of elements to relocate from position start.

Additionally, here is a streamlined version that supports chaining:

if (typeof Array.prototype.transfer === "undefined") {
  Array.prototype.transfer = function(start, end, on = 1) {
    return this.splice(end, 0, ...this.splice(start, on)), this
  }
}

[7, 8, 9, 10, 11].transfer(3, 0, 2) // => [10, 11, 7, 8, 9]

To prevent polluting prototypes, consider using a standalone utility function instead:

function transferArray(arr, start, end, on = 1) {
  return arr.splice(end, 0, ...arr.splice(start, on)), arr
}

transferArray([7, 8, 9, 10, 11], 3, 0, 2) // => [10, 11, 7, 8, 9]

For non-destructive operations, a pure function can be applied without modifying the original array:

function transferredArray(arr, start, end, on = 1) {
  return arr = arr.slice(), arr.splice(end, 0, ...arr.splice(start, on)), arr
}

This comprehensive approach encompasses various scenarios seen across different solutions.

Inspired by @Reid, I came up with an interesting concept of pushing a placeholder object instead of moving the actual item in an array to maintain its size. This approach simplifies calculations and allows for unique identification later on when searching. The reason this method works is that two objects are not considered equal unless they refer to the same object.

({}) == ({}); // false

Here's a function designed to move an object within an array from a source index to a destination index. It can be added to the Array.prototype if necessary.

function moveObjectAtIndex(array, sourceIndex, destIndex) {
    var placeholder = {};
    // Replace the object at the source index with a placeholder object to maintain array length
    var objectToMove = array.splice(sourceIndex, 1, placeholder)[0];
    // Insert the object at the destination index
    array.splice(destIndex, 0, objectToMove);
    // Remove the temporary placeholder object
    array.splice(array.indexOf(placeholder), 1);
}

This solution is inspired by @Reid's approach, with some modifications:

• I have opted not to alter the Array prototype.
• If an item is moved beyond the array bounds to the right, it will shift to the far-right position without creating any undefined elements.

Here is the revised function:

function move(array, oldIndex, newIndex) {
    if (newIndex >= array.length) {
        newIndex = array.length - 1;
    }
    array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);
    return array;
}

Unit tests for the ArrayHelper:

describe('ArrayHelper', function () {
    it('Move right', function () {
        let array = [1, 2, 3];
        arrayHelper.move(array, 0, 1);
        assert.equal(array[0], 2);
        assert.equal(array[1], 1);
        assert.equal(array[2], 3);
    })
    it('Move left', function () {
        let array = [1, 2, 3];
        arrayHelper.move(array, 1, 0);
        assert.equal(array[0], 2);
        assert.equal(array[1], 1);
        assert.equal(array[2], 3);
    });
    it('Move out of bounds to the left', function () {
        let array = [1, 2, 3];
        arrayHelper.move(array, 1, -2);
        assert.equal(array[0], 2);
        assert.equal(array[1], 1);
        assert.equal(array[2], 3);
    });
    it('Move out of bounds to the right', function () {
        let array = [1, 2, 3];
        arrayHelper.move(array, 1, 4);
        assert.equal(array[0], 1);
        assert.equal(array[1], 3);
        assert.equal(array[2], 2);
    });
});

To optimize your code, consider incorporating basic calculus to develop a versatile function that can rearrange elements within an array seamlessly.

In the world of JavaScript, the implementation might resemble the following:

function myMagicFunction (targetArray, startIndex, destinationIndex) { 

    selectedElement = targetArray[startIndex]; 
    gap = (destinationIndex - startIndex) / Math.abs(destinationIndex - startIndex); 

    for (currentElement = startIndex; currentElement != destinationIndex; currentElement += gap){ 
        targetArray[currentElement] = targetArray[currentElement + gap]; 
    } 

    targetArray[destinationIndex] = selectedElement; 

}

For a more detailed explanation on "moving array elements," visit the "Gloommatter" website at the link below:

https://web.archive.org/web/20121105042534/http://www.gloommatter.com:80/DDesign/programming/moving-any-array-elements-universal-function.html

I have created a non-changeable ES6 solution inspired by the answer provided by @Merc in this discussion:

const rearrangeArrayItems = (arr, startIdx, endIdx) => {
  if (startIdx === endIdx) return arr;

  const newArr = [...arr];

  const targetItem = newArr[startIdx];
  const incrementalValue = endIdx < startIdx ? -1 : 1;

  for (let i = startIdx; i !== endIdx; i += incrementalValue) {
    newArr[i] = newArr[i + incrementalValue];
  }

  newArr[endIdx] = targetItem;

  return newArr;
};

The names of the variables can be shortened, but I have used descriptive ones for clarity.

By the year 2022, this TypeScript tool will be capable of working in conjunction with a unit test.

export const arrayMove = <T>(arr: T[], fromIndex: number, toIndex: number) => {
  const newArr = [...arr];
  newArr.splice(toIndex, 0, newArr.splice(fromIndex, 1)[0]);
  return newArr;
};

const testArray = ['1', '2', '3', '4'];

describe('arrayMove', () => {
  it('should move array item to toIndex', () => {
    expect(arrayMove(testArray, 2, 0)).toEqual(['3', '1', '2', '4']);
    expect(arrayMove(testArray, 3, 1)).toEqual(['1', '4', '2', '3']);
    expect(arrayMove(testArray, 1, 2)).toEqual(['1', '3', '2', '4']);
    expect(arrayMove(testArray, 0, 2)).toEqual(['2', '3', '1', '4']);
  });
});

To efficiently move an element within an array, a useful approach involves utilizing the splice() method. Initially, this function removes the desired item from its current index in the array. Subsequently, by employing splice() once more, the removed item can be seamlessly inserted into the specified target index.

const array = ['a', 'b', 'c', 'd', 'e']

const newArray = moveItem(array, 3, 1) // transferring element from index 3 to index 1

function moveItem(arr, fromIndex, toIndex){
  let itemRemoved = arr.splice(fromIndex, 1) // capturing the removed item as an array
  arr.splice(toIndex, 0, itemRemoved[0]) // placing itemRemoved into the target index
  return arr
}

console.log(newArray)

You can access a concise explanation of the splice() function here

To change the order of elements in an array, one method is to create a new array with the desired sequence using the slice operation.

Here's an illustration:

const originalArray = [ 'apple', 'banana', 'cherry', 'date', 'elderberry'];
const newArray = originalArray.slice(0,1).concat(['date']).concat(originalArray.slice(2,4)).concat(originalArray.slice(4));

• Slicing from index 0 to 1 gives you ['apple']
• Slicing from index 2 to 4 gives you ['banana', 'cherry']
• Slicing from index 4 (till end) gives you ['elderberry']

A different approach in pure JavaScript using ES6 array spread operator but with no changes to the original array

const switchOrder = (arr, startIdx, endIdx) => {
  const smallerIdx = Math.min(startIdx, endIdx);
  const largerIdx = Math.max(startIdx, endIdx);

  return [
    ...arr.slice(0, smallerIdx),
    ...(startIdx < endIdx
      ? arr.slice(smallerIdx + 1, largerIdx + 1)
      : []),
    arr[startIdx],
    ...(startIdx > endIdx
      ? arr.slice(smallerIdx, largerIdx)
      : []),
    ...arr.slice(largerIdx + 1),
  ];
}

// output will be ['a', 'c', 'd', 'e', 'b', 'f']
console.log(switchOrder(['a', 'b', 'c', 'd', 'e', 'f'], 1, 4))
      
 

If you're looking to manipulate arrays, the splice method in JavaScript can come in handy. You can learn more about it here: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/splice

It's important to note that using the splice method may be costly as it requires re-indexing of the array.

To achieve an immutable move operation (one that does not alter the original array), I modified @Reid's approved solution by using Object.assign to make a duplicate of the array before performing the splice.

Array.prototype.immutableMove = function (old_index, new_index) {
  var copy = Object.assign([], this);
  if (new_index >= copy.length) {
      var k = new_index - copy.length;
      while ((k--) + 1) {
          copy.push(undefined);
      }
  }
  copy.splice(new_index, 0, copy.splice(old_index, 1)[0]);
  return copy;
};

You can see this in action on this jsfiddle link.

TypeScript Version

Found this implementation on @Merc's answer. I appreciate it because it doesn't create new arrays and instead modifies the existing array directly. I made some updates for ES6 compatibility and added type declarations.

export function rearrangeArrayItem<T>(arr: T[], startIndex: number, targetIndex: number): T[] {
    if (targetIndex === startIndex) {
        return arr;
    }
    const itemToMove = arr[startIndex];
    const step = targetIndex < startIndex ? -1 : 1;

    for (let i = startIndex; i !== targetIndex; i += step) {
        arr[i] = arr[i + step];
    }
    arr[targetIndex] = itemToMove;
    return arr;
}

    Enhancing the Array object with custom methods for moving elements up and down is a useful feature in JavaScript. With these functions, you can easily manipulate the order of elements within an array based on specific criteria.
    
    Let's take a look at an example using the customized 'moveUp' and 'moveDown' methods. We start with an array containing four elements: 'banana', 'curyWurst', 'pc', and 'remembaHaruMembaru'. Initially, they are displayed in their original order.
    
    After calling the 'moveDown' method on the third element ('pc'), we see that it has been moved down one position in the array. The updated sequence is shown in the alert message.
    
    Next, by using the 'moveUp' method on the same element ('pc'), we reverse the movement and bring it back to its previous position. Once again, the modified array arrangement is displayed in an alert box.

http://plnkr.co/edit/AbcDefGhiJklMnoPqrSt?p=preview

Here's a method to achieve immutability when moving elements within an array. This approach accounts for negative numbers and prioritizes reducing potential bugs over performance optimizations compared to directly modifying the original array.

const array = [7, 8, 9];
const rearrangeElement = (arr, start, end) => {
  const clone = [...arr];
  const elementToMove = clone.splice(start, 1)[0];
  clone.splice(end, 0, elementToMove);
  return clone;
};

console.log(rearrangeElement(array, 0, 2))
// > [8, 9, 7]
console.log(rearrangeElement(array, -1, -3))
// > [9, 7, 8] 

Reposition an element in an array to the beginning

For example, move the element 'd' to the first position:

let arr = [ 'a', 'b', 'c', 'd', 'e'];
arr = [...arr.filter(item => item === 'd'), ...arr.filter(item => item !== 'd')];
console.log(arr);

While it's often cautioned against playing with the Array prototype, I've gathered insights from various sources and crafted a modern Javascript solution:

    Object.defineProperty(Array.prototype, 'shiftArray', {
        enumerable: false,
        value: function (old_index, new_index) {
            var copy = Object.assign([], this)
            if (new_index >= copy.length) {
                var diff = new_index - copy.length;
                while ((diff--) + 1) { copy.push(undefined); }
            }
            copy.splice(new_index, 0, copy.splice(old_index, 1)[0]);
            return copy
        }
    });

    // Example of how to use it
    myArray=[0, 1, 2, 3, 4];
    myArray=myArray.shiftArray(2, 4);
    console.log(myArray);
    // Resulting array: 0, 1, 3, 4, 2

I hope this snippet proves helpful for others!

Not everyone may be fond of comma expressions, but there's a concise one-liner provided here for creating a new copy in a pure expression:

const relocate = (start, end, ...arr) => (arr.splice(end, 0, ...arr.splice(start, 1)), arr)

An optimized version is available for cases where no relocation is required, ensuring the input array remains untouched and suitable for immutable operations:

const relocate = (start, end, ...arr) => 
    start === end 
    ? arr 
    : (arr.splice(end, 0, ...arr.splice(start, 1)), arr)

To execute either function:

const rearranged = relocate(startIndex, targetIndex, ...array)

This implementation utilizes spreading to create a fresh duplicate. Introducing a fixed arity 3 relocate would compromise the single-expression feature, non-destructive behavior, or efficiency gained from splice. It serves more as an illustrative example meeting specific criteria rather than a recommended choice for practical applications.

Initially, I believed this to be a swapping issue, but upon further inspection, it appears not to be the case. Here is my concise solution in just one line:

const rearrange = (arr, fromIndex, toIndex) => arr.map((item, i) => i === toIndex ? arr[fromIndex] : (i >= Math.min(fromIndex, toIndex) && i <= Math.max(fromIndex, toIndex) ? arr[i + Math.sign(toIndex - fromIndex)] : item));

Below is a brief test of this function using a small example array:

let sampleArray = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
console.log(rearrange(sampleArray, 0, 2)); // [ 'banana', 'cherry', 'apple', 'date', 'elderberry' ]
console.log(rearrange(sampleArray, 1, 3)); // [ 'apple', 'cherry', 'date', 'banana', 'elderberry' ]
console.log(rearrange(sampleArray, 2, 4)); // [ 'apple', 'banana', 'date', 'elderberry', 'cherry' ]
console.log(rearrange(sampleArray, 2, 0)); // [ 'cherry', 'apple', 'banana', 'date', 'elderberry' ]
console.log(rearrange(sampleArray, 3, 1)); // [ 'apple', 'date', 'banana', 'cherry', 'elderberry' ]
console.log(rearrange(sampleArray, 4, 2)); // [ 'apple', 'banana', 'elderberry', 'cherry', 'date' ]
console.log(rearrange(sampleArray, 4, 0)); // [ 'elderberry', 'apple', 'banana', 'cherry', 'date' ]

Here's a straightforward technique utilizing the splice function

Array.prototype.moveToBeginning = function(index) {
    this.splice(0, 0, this.splice(index, 1)[0]);
    return this;
  };

I find joy in using immutable and functional one-liners!

const swapArrayIndex = (arr, a, b) => (
  a < b 
    ? [...arr.slice(0, a), ...arr.slice(a + 1, b + 1), arr[a], ...arr.slice(b + 1)] 
    : [...arr.slice(0, b), arr[a], ...arr.slice(b, a), ...arr.slice(a + 1)]
);

After experimenting with different approaches, I found that combining two techniques allowed for smoother movement over both short and long distances. While my results are consistently good, I believe there is room for improvement by someone more skilled in this area to optimize the performance based on varying sizes.

For moving objects short distances, I discovered that alternative methods were significantly faster (x10) compared to using splice. However, this efficiency may vary depending on the length of the array, especially evident with larger arrays.

function ArrayMove(array, from, to) {
    if ( Math.abs(from - to) > 60) {
        array.splice(to, 0, array.splice(from, 1)[0]);
    } else {
        // works better when we are not moving things very far
        var target = array[from];
        var inc = (to - from) / Math.abs(to - from);
        var current = from;
        for (; current != to; current += inc) {
            array[current] = array[current + inc];
        }
        array[to] = target;    
    }
}

https://web.archive.org/web/20181026015711/https://jsperf.com/arraymove-many-sizes

Developed with an object-oriented approach, easily readable, fully debuggable, without causing mutations, and thoroughly tested.

class Sorter {
    sortItem(array, fromIndex, toIndex) {
        const reduceItems = () => {
            const startingItems = array.slice(0, fromIndex);
            const endingItems = array.slice(fromIndex + 1);
            return startingItems.concat(endingItems);
        }
        const addMovingItem = (movingItem, reducedItems) => {
            const startingNewItems = reducedItems.slice(0, toIndex);
            const endingNewItems = reducedItems.slice(toIndex);
            const newItems = startingNewItems.concat([movingItem]).concat(endingNewItems);
            return newItems;
        }
        const movingItem = array[fromIndex];
        const reducedItems = reduceItems();
        const newItems = addMovingItem(movingItem, reducedItems);
        return newItems;
    }
}

const sorter = new Sorter();
export default sorter;

import sorter from 'src/common/Sorter';

test('sortItem first item forward', () => {
    const startingArray = ['a', 'b', 'c', 'd'];
    const expectedArray = ['b', 'a', 'c', 'd'];
    expect(sorter.sortItem(startingArray, 0, 1)).toStrictEqual(expectedArray);
});
test('sortItem middle item forward', () => {
    const startingArray = ['a', 'b', 'c', 'd'];
    const expectedArray = ['a', 'c', 'b', 'd'];
    expect(sorter.sortItem(startingArray, 1, 2)).toStrictEqual(expectedArray);
});
test('sortItem middle item backward', () => {
    const startingArray = ['a', 'b', 'c', 'd'];
    const expectedArray = ['a', 'c', 'b', 'd'];
    expect(sorter.sortItem(startingArray, 2, 1)).toStrictEqual(expectedArray);
});
test('sortItem last item backward', () => {
    const startingArray = ['a', 'b', 'c', 'd'];
    const expectedArray = ['a', 'b', 'd', 'c'];
    expect(sorter.sortItem(startingArray, 3, 2)).toStrictEqual(expectedArray);
});

There are various ways to move an element in an array from one position to another without mutating the original array. Here, I have demonstrated 3 different approaches:

Using splice Method with Quadratic Time Complexity - O(n^2)

function moveArrayElement(arr, oldIndex, newIndex) {
  const copiedArr = [...arr];
  const length = copiedArr.length;
  
  if (oldIndex !== newIndex && length > oldIndex && length > newIndex) {
    copiedArr.splice(newIndex, 0, copiedArr.splice(oldIndex, 1)[0]);
  }
  
  return copiedArr;
}

moveArrayElement([1,2,3,4], 0, 3) // [2,3,4,1]

Using flatMap Method with Linear Time Complexity - O(n)

function moveArrayElement(arr, oldIndex, newIndex) {
    const length = arr.length;
    const itemToMove = arr[oldIndex]

    if (oldIndex === newIndex || oldIndex > length || newIndex > length) {
        return arr;
    }

    return arr.flatMap((item, index) => {
        if (index === oldIndex) return [];
        if (index === newIndex) return oldIndex < newIndex ? [item, itemToMove] : [itemToMove, item];
        return item;
    })
}

moveArrayElement([1,2,3,4], 0, 3) // [2,3,4,1]

Using reduce Method with Linear Time Complexity - O(n)

function moveArrayElement(arr, oldIndex, newIndex) {
    const length = arr.length;
    const itemToMove = arr[oldIndex]

    if (oldIndex === newIndex || oldIndex > length || newIndex > length) {
        return arr;
    }

    return arr.reduce((acc, item, index) => {
        if (index === oldIndex) return acc;
        if (index === newIndex) return oldIndex < newIndex ? [...acc, item, itemToMove] : [...acc, itemToMove, item];
        return [...acc, item];
    }, [])
}

moveArrayElement([1,2,3,4], 0, 3) // [2,3,4,1]

For more information, you can also refer to this gist: Move an array element from one array position to another

ShuffleArray.js

Description

A JavaScript function that shuffles elements within an array and returns the shuffled array.

Syntax

shuffleArray(array);

Parameters

array: The array to be shuffled.

Usage

array = ["apple", "banana", "cherry", "date", "fig"];

shuffleArray(array); // returns a shuffled version of the original array

array; // displays the shuffled array

Polyfill

Array.prototype.shuffle || Object.defineProperty(Array.prototype, "shuffle", {
    value: function (array) {
        var
        arr = this,
        currentIndex = arr.length,
        temporaryValue, randomIndex;

        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            
            temporaryValue = arr[currentIndex];
            arr[currentIndex] = arr[randomIndex];
            arr[randomIndex] = temporaryValue;
        }
        
        return arr;
    }
});