JavaScript Program to Reorder an Array According to Given Indexes

Reordering an array according to given indexes means rearranging the elements of an array based on a separate array that specifies the desired order. Each element in the given index array corresponds to the index of the element in the original array at which it should be placed in the reordered array. This operation is useful when you need to sort or arrange elements in a specific custom order, different from the natural order of the elements.

There are several methods that can be used to Reorder an array according to given indexes in JavaScript, which are listed below:

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using the map method

In this approach, we use the map method to iterate over the indexes Array. For each element in indexes Array, the corresponding element from original Array is fetched using the index value, and a new array is constructed with the rearranged elements.

Syntax:

function reorderArrayByIndexes(originalArray, indexesArray) {
    return indexesArray.map();
}

Example: In this example, the reorderArrayByIndexes function maps originalArray elements using indexesArray, producing the reordered array.

function reorderArrayByIndexes(originalArray, indexesArray) {
    return indexesArray.map(
        index => originalArray[index]);
}

const originalArray = 
    ['HTML', 'CSS', 'JavaScript', 'React.js'];
const indexesArray = [3, 1, 2, 0];
const reorderedArray =
    reorderArrayByIndexes(originalArray, indexesArray);
console.log(reorderedArray);      

[ 'React.js', 'CSS', 'JavaScript', 'HTML' ]

Approach 2: Creating a Custom Sorting Function

In this approach, we will create a custom sorting function that utilizes the provided indexes to rearrange the elements.

Syntax:

function reorderArrayByIndexes(originalArray, indexesArray) {
    return originalArray.slice().sort((a, b) => {
        // code implemantation...
    });
}

Example: In this example, the reorderArrayByIndexes function sorts originalArray using indexesArray. It maps elements based on their indexes, producing the reordered array.

function reorderArrayByIndexes(originalArray, indexesArray) {
    return originalArray.slice().sort((a, b) => {
        const indexA =
            indexesArray.indexOf(originalArray.indexOf(a));
        const indexB =
            indexesArray.indexOf(originalArray.indexOf(b));
        return indexA - indexB;
    });
}


const originalArray = 
    ['HTML', 'CSS', 'Javascript', 'Node.js'];
const indexesArray = [3, 1, 2, 0];
const reorderedArray =
    reorderArrayByIndexes(originalArray, indexesArray);
console.log(reorderedArray);

[ 'Node.js', 'CSS', 'Javascript', 'HTML' ]

Approach 3: Swapping Elements in Place

Swapping elements in place means exchanging the positions of two elements within an array without creating a new array. here we will swap elements within the original array, following the specified indexes.

Syntax:

[a[m], a[n]] = [a[n], a[m]] 
 
// Where m and n are the index numbers to swap

Example: In this example, the reorderArrayByIndexes function reorders originalArray using indexesArray, swapping elements to their respective positions.

function reorderArrayByIndexes(originalArray, indexesArray) {
    for (let i = 0; i < indexesArray.length; i++) {
        while (indexesArray[i] !== i) {
            const currentIndex = indexesArray[i];
            [originalArray[i], originalArray[currentIndex]] =
                [originalArray[currentIndex], originalArray[i]];
            [indexesArray[i], indexesArray[currentIndex]] =
                [indexesArray[currentIndex], indexesArray[i]];
        }
    }
    return originalArray;
}

const originalArray = 
    ['HTML', 'CSS', 'JavaScript', 'Bootstrap'];
const indexesArray = [3, 1, 2, 0];
const reorderedArray =
    reorderArrayByIndexes(originalArray, indexesArray);
console.log(reorderedArray); 

[ 'Bootstrap', 'CSS', 'JavaScript', 'HTML' ]

Approach 4: Using a Temporary Array

In this approach, we create a temporary array of the same length as the original array. We then iterate through the indexesArray and place each element from the originalArray into the correct position in the temporary array. Finally, we return the temporary array.

Example: In this example, the reorderArrayByIndexes function reorders the originalArray using the indexesArray by placing elements into a temporary array based on the specified indexes.

function reorderArrayByIndexes(originalArray, indexesArray) {
    const tempArray = new Array(originalArray.length);
    indexesArray.forEach((index, i) => {
        tempArray[index] = originalArray[i];
    });
    return tempArray;
}

const originalArray = ['HTML', 'CSS', 'JavaScript', 'Vue.js'];
const indexesArray = [2, 0, 3, 1];
const reorderedArray = reorderArrayByIndexes(originalArray, indexesArray);
console.log(reorderedArray);

[ 'CSS', 'Vue.js', 'HTML', 'JavaScript' ]