JavaScript Swap Array Elements

Welcome to our article on how to swap array elements in JavaScript. Whether you are a qualified developer or just begin your coding journey, understanding how to manipulate arrays is an essential skill.

Swapping elements within an array is a simple task that can be accomplished using different methods.

In this article, we will discuss the different methods for swapping array elements, provide step-by-step instructions, and provide practical examples to help you master this important concept.

Exploring the Methods How to Swap Elements in an Array JavaScript

In this section, we will discuss on how to swap elements in an array JavaScript.

We will cover a range of methods, each with its own advantages and use cases.

Let’s get started:

Traditional Temp Variable Method

The traditional method involves using a temporary variable to keep one of the elements while swapping.

Here’s example code:

function swapElementsValue(arr, expression1, expression2) {
    let temp = arr[expression1];
    arr[expression1] = arr[expression2];
    arr[expression2] = temp;
}

Array Destructuring Method

ES6 proposes array destructuring, which provides an exquisite method to swap elements without a temporary variable:

Here’s an example code:

function swapElementsValue(arr, expression1, expression2) {
    [arr[expression1], arr[expression2]] = [arr[expression2], arr[expression1]];
}

Using splice() Method

The splice() method enables you to remove and insert elements within an array, effectively obtaining a swap:

Let’s see an example:

function swapElementsValue(arr, expression1, expression2) {
    arr.splice(expression1, 1, arr[expression2]);
    arr.splice(expression2, 1, arr[expression1]);
}

Swap() Function Using XOR

For those who acknowledge bitwise operations, here’s a different method using XOR:

Here’s an example code:

function swapElementsValue(arr, expression1, expression2) {
    if (expression1 !== expression2) {
        arr[expression1] ^= arr[expression2];
        arr[expression2] ^= arr[expression1];
        arr[expression1] ^= arr[expression2];
    }
}

Using the sort() Method

The sort() method, combined with a rule comparison function, can be engaged to swap elements:

function swapElementsValues(arr, expression1, expression2) {
    arr.sort((a, b, i = 0) => i++ === expression1 ? 1 : i === expression2 ? -1 : 0);
}

Swap Using ES6 map() and Spread Operator

Use the power of ES6 map() and the advance operator for an original method:

For example:

function swapElementsValue(arr, expression1, expression2) {
    arr = arr.map((val, i) => i === expression1 ? arr[expression2] : i === expression2 ? arr[expression1] : val);
}

Swap with reduce()

The reduce() function can be intelligently engaged to obtain element swapping:

Here’s an example:

function swapElementsValue(arr, expression1, expression2) {
    arr = arr.reduce((account, val, i) => {
        if (i === expression1) account[i] = arr[expression2];
        else if (i === expression2) account[i] = arr[expression1];
        else account[i] = val;
        return account;
    }, []);
}

Using a Helper Function

Create a helper function that figures the swapping logic to enhance code readability:

Let’s take a look at the example:

function swapValue(arr, expression1, expression2) {
    let temp = arr[expression1];
    arr[expression1] = arr[expression2];
    arr[expression1] = temp;
}

let resultArray = [1, 2, 3, 4];
swapValue(resultArray, 1, 2);
console.log(resultArray)

Using Object.assign()

Individualistic yet powerful – utilize Object.assign() to swap elements:

function swapElementsValue(arr, expression1, expression2) {
    arr = Object.assign([], arr, {
        [expression1]: arr[expression2],
        [expression2]: arr[expression1]
    });
}

The Power of a Custom Library

Consider using a particular JavaScript library directed for array manipulation, such as lodash or Underscore.js, to shorten a complicated operations like element swapping.

Practical Examples of Mastering Array Element Swapping

Let’s put these methods into action with real examples that display the functionality of swapping array elements.

Swapping Elements in a Number Array

Assume that we have an array of numbers and want to swap two specific elements.

Using the classical temp variable method, we can obtain this as follows:

Here’s an example code:

// Define the array
let arr = [11, 12, 13, 14, 15];

// Define the indices of elements to be swapped
let expression1 = 1; // Index of the first element to be swapped
let expression2 = 3; // Index of the second element to be swapped

// Function to swap elements in an array
function swapElements(array, index1, index2) {
    let temp = array[index1]; // Store the value of the first element in a temporary variable
    array[index1] = array[index2]; // Replace the value of the first element with the value of the second element
    array[index2] = temp; // Replace the value of the second element with the value stored in the temporary variable
}

// Call the swapElements function to swap the specified elements in the array
swapElements(arr, expression1, expression2);

// Display the modified array after swapping
console.log(arr);

Output:

[ 11, 14, 13, 12, 15 ]

Swapping Elements in a String Array

Correspondingly, swapping elements in a string array is just direct.

Let’s swap two person names:

let personsArray = ["Jude", "Glenn", "Caren", "Eliver"];
let swapIndexPerson1 = 0;
let swapIndexPerson2 = 2;

function swapElements(array, index1, index2) {
  if (index1 < 0 || index1 >= array.length || index2 < 0 || index2 >= array.length) {
    console.log("Invalid swap indices");
    return;
  }
  
  let temp = array[index1];
  array[index1] = array[index2];
  array[index2] = temp;
}

swapElements(personsArray, swapIndexPerson1, swapIndexPerson2);

console.log(personsArray);

Output:

[ 'Caren', 'Glenn', 'Jude', 'Eliver' ]

Swapping Elements in an Object Array

Array swapping is not defined to primitive data types. You can also swap elements within an array of objects.

Let’s take the following example:

let employeeArray = [
    { name: "GLenn", age: 32 },
    { name: "Caren", age: 34 },
    { name: "Gladys", age: 36 }
];

function swapElements(arr, index1, index2) {
    if (index1 < 0 || index1 >= arr.length || index2 < 0 || index2 >= arr.length) {
        console.log("Invalid index values for swapping.");
        return;
    }

    let temp = arr[index1];
    arr[index1] = arr[index2];
    arr[index2] = temp;
}

let expressionSwap1 = 0;
let expressionSwap2 = 2;

swapElements(employeeArray, expressionSwap1, expressionSwap2);

console.log(employeeArray);

Output:

[
  { name: 'Gladys', age: 36 },
  { name: 'Caren', age: 34 },
  { name: 'GLenn', age: 32 }
]

In this case, the objects at indices 0 and 2 will be swapped, resulting in various orders of students.

FAQs

Conclusion

In JavaScript development, the ability to manipulate arrays is an important skill. Swapping elements within an array is a task that developers encounter regularly, and mastering different methods for this task is important.

In this article, we have discussed the ten different methods for swapping array elements, ranging from traditional methods to more modern and unconventional ones.

By understanding these methods and practicing their implementation, you will be well-equipped to implement array manipulation challenges effectively.

Additional Resources

• How to Set CSS Variable from JavaScript
• What Does Shift do in JavaScript?
• How To Use onfocus JavaScript