Why this code in Javascript for swapping 2 elements in an array does not work?

Question

I wanted to make a function that swaps 2 elements of an array in Javascript, so I created this piece of code:

let arrayOne = ["elementA","elementB","elementC","elementD","elementE","elementF","elementG","elementH","elementI"];

function swapThatFails(element1,element2) {
    arrayOne[arrayOne.indexOf(element1)] = element2;
    arrayOne[arrayOne.indexOf(element2)] = element1;
    console.log("arrayOne = ",arrayOne);
}

swapThatFails ("elementA", "elementC");

However, it makes no change at all in the original array.

I managed to make it work by obtaining apart the indexes of the array I want to swap:

let arrayTwo = ["elementA","elementB","elementC","elementD","elementE","elementF","elementG","elementH","elementI"];

function swapThatWorks(element1,element2) {
    let index1 = arrayTwo.indexOf(element1);
    let index2 = arrayTwo.indexOf(element2);
    arrayTwo[index1] = element2;
    arrayTwo[index2] = element1;
    console.log("arrayTwo = ",arrayTwo);
}

swapThatWorks ("elementA", "elementC");

To me, they both are the same apart from the fact that the second makes it in 2 steps so it looks easier to be understood.

Why the first one does not work but the second one does?

let arrayOne = ["elementA","elementB","elementC","elementD","elementE","elementF","elementG","elementH","elementI"];

let arrayTwo = ["elementA","elementB","elementC","elementD","elementE","elementF","elementG","elementH","elementI"];

function swapThatFails(element1,element2) {
    arrayOne[arrayOne.indexOf(element1)] = element2;
    arrayOne[arrayOne.indexOf(element2)] = element1;
    console.log("arrayOne = ",arrayOne);
  }

function swapThatWorks(element1,element2) {
    let index1 = arrayTwo.indexOf(element1);
    let index2 = arrayTwo.indexOf(element2);
    arrayTwo[index1] = element2;
    arrayTwo[index2] = element1;
    console.log("arrayTwo = ",arrayTwo);
  }
  
swapThatFails ("elementA", "elementC");
swapThatWorks ("elementA", "elementC");

arrayOne[arrayOne.indexOf(element1)] = element2; finds the first index of element2 (which is zero) and updates it with element2. arrayOne[arrayOne.indexOf(element2)] = element1; finds the first index of element2 (which is now zero) and updates it with element1. So the code does arrayOne[0] = "elementC"; arrayOne[0] = "elementA"; resulting in net no change. — VLAZ
– VLAZ, Commented Apr 21, 2020 at 9:33

Wiktor Zychla · Accepted Answer · 2020-04-21 09:34:08Z

2

Let's consider this

function swapThatFails(element1,element2) {
  arrayOne[arrayOne.indexOf(element1)] = element2;
  arrayOne[arrayOne.indexOf(element2)] = element1;
  console.log("arrayOne = ",arrayOne);
}

Suppose the array is ['a','b'] and you call your flawed function with swapThatFails('a', 'b').

First you search for element1 and put element2 in there

arrayOne[arrayOne.indexOf(element1)] = element2;

Your array becomes ['b','b']

Then you search for element2 and put element1 there. But the array is already modified! The first occurence of element2 is not its original position but the new one, the one that has just been replaced in previous step.

Thus this

  arrayOne[arrayOne.indexOf(element2)] = element1;

finds b as the first element and replaces it with a. And you get ['a','b']. It's not what you expected!

If on the other hand you first search for elements, get correct indexes and then replace elements, it works as expected.

answered Apr 21, 2020 at 9:34

Wiktor Zychla

48.5k6 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

franexmo81 Over a year ago

Sure! This explains perfectly why it sometimes worked and sometimes did not. i.e.: swapThatFails ("elementC", "elementA") actually worked but swapThatFails ("elementA", "elementC") didn't.

Collectives™ on Stack Overflow

Why this code in Javascript for swapping 2 elements in an array does not work?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related