Swipe values with keys, -> Map vs Object in Javascript

I was trying to swap keys with values in Map and Object.

In Map it goes in an infinite loop, but in Object it goes in a finite loop. I don't know why is that happening. Please help!

Here is the Code.

const obj = { 1: "one", 2: "two" };
const map = new Map([
  [1, "one"],
  [2, "two"],
]);

for (const [key, value] of map) {  // Goes Infinite Loop
  map.set(value, key);
  map.delete(key);
}
console.log(map); // you will never get this response

for (const key in obj) {  // Goes Finite Loop
 const value = obj[key];
 obj[value] = key
 delete obj[key];
}
console.log(obj); // you will get the response

You mutate the map while iterating thus adding new keys to iterate. So the iteration goes infinite since a new key appears to iterate each iteration cycle. To solve that you need to get a copy of the original keys ahead of the mutation:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

{
    const map = new Map([
        [1, "one"],
        [2, "two"],
    ]);

    for (const key of [...map.keys()]) {  // make a copy of keys here
        map.set(map.get(key), key);
        map.delete(key);
    }
    console.log(JSON.stringify(Object.fromEntries([...map])));
}

// using Map::entries()

{
    const map = new Map([
        [1, "one"],
        [2, "two"],
    ]);

    for (const [key, value] of [...map]) {  // make a copy of entries here
        map.set(value, key);
        map.delete(key);
    }
    console.log(JSON.stringify(Object.fromEntries([...map])));
}

<!-- end snippet -->

As I expected the iterating over keys is potentially faster because there's no overhead to copy all values:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-html -->

<script benchmark data-count="1">

    const length = 1000000;
    const map = new Map(Array.from({ length }, (_, idx) => [idx + 1, `value${idx + 1}`]));

    // @benchmark using keys

    for (const key of [...map.keys()]) {  // make a copy of keys here
        map.set(map.get(key), key);
        map.delete(key);
    }

    // @benchmark using entries

    for (const [key, value] of [...map]) {  // make a copy of entries here
        map.set(value, key);
        map.delete(key);
    }

    // @benchmark using Array.from()

    for (const [key, value] of Array.from(map)) {  
        map.set(value, key);
        map.delete(key);
    }

</script>
<script src="https://cdn.jsdelivr.net/gh/silentmantra/benchmark/loader.js"></script>

<!-- end snippet -->

The reason why your first attempt results in an infinite loop, is because for...of is iterating the live contents of map. If you add a new key/value pair it will be placed at the end of the iteration cycle (similar to how array.push(item) places the item at the end). This cause an infinite loop.

> The keys in Map are ordered in a simple, straightforward way: A Map object iterates entries, keys, and values in the order of entry insertion. - MDN

Let's unroll the loop to show exactly what's going on.

const map = new Map([
  [1, "one"],
  [2, "two"],
]);

for (const [key, value] of map) {  // Goes Infinite Loop
  map.set(value, key);
  map.delete(key);
}

// 1) key = 1, value = "one"
map.set("one", 1);
map.delete(1); //        ▼ next iteration
// map = Map{ [deleted], 2: "two", "one": 1 }
//                ▲ current iteration

// 2) key = 2, value = "two"
map.set("two", 2);
map.delete(2); //          ▼ next iteration
// map = Map{ [deleted], "one": 1, "two": 2 }
//                ▲ current iteration

//  3) key = "one", value = 1
map.set(1, "one");
map.delete("one"); //      ▼ next iteration
// map = Map{ [deleted], "two": 2, 1: "one" }
//                ▲ current iteration

// 4) key = "two", value = 2
map.set(2, "two");
map.delete("two"); //    ▼ next iteration
// map = Map{ [deleted], 1: "one", 2: "two" }
//                ▲ current iteration

// 5) key = 1, value = "one"
map.set("one", 1);
map.delete(1); //        ▼ next iteration
// map = Map{ [deleted], 2: "two", "one": 1 }
//                ▲ current iteration

// infinity ...

Like you can see the iteration can never finish, because you keep adding new entries at the end.

To solve this issue all you have to do is to make sure you're iterating over a non-live collection that doesn't update whenever you change map. This can be done by simply converting the current contents into an array first.

for (const [key, value] of Array.from(map)) {
  // ...
}

This will create the array [[1, "one"], [2, "two"]] and iterate over its contents, without it changing during iteration.

for...in is finite because ECMAScript specification requires that property names are at most iterated once.

ECMAScript spec:

> The iterator's next method processes object properties to determine whether the property key should be returned as an iterator value. Returned property keys do not include keys that are Symbols. Properties of the target object may be deleted during enumeration. A property that is deleted before it is processed by the iterator's next method is ignored. If new properties are added to the target object during enumeration, the newly added properties are not guaranteed to be processed in the active enumeration. A property name will be returned by the iterator's next method at most once in any enumeration.

However, this first reason doesn't fully explain why the result is { one: "1", two: "2" }. Because if the newly added properties where also iterated you would end up with the original object { 1: "one", 2: "two" }.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

const obj = {
  1: "one",
  2: "two",
};

for (const key in obj) {  // Goes Finite Loop
  const value = obj[key];
  obj[value] = key
  delete obj[key];
}

// 1) key = "1", value = "one"
obj["one"] = "1"
delete obj["1"]; //   ▼ next iteration
// obj = { [deleted], 2: "two", one: "1" }
//             ▲ current iteration

// 2) key = "2", value = "two"
obj["two"] = "2"
delete obj["2"]; //    ▼ next iteration
// obj = { [deleted], one: "1", two: "2" }
//             ▲ current iteration

// 3) key = "one", value = "1"
obj["1"] = "one"
delete obj["one"]; //            ▼ next iteration
// obj = { 1: "one", [deleted], two: "2" }
//                       ▲ current iteration

// 4) key = "two", value = "2"
obj["2"] = "two"
delete obj["two"];
// obj = { 1: "one", 2: "two", [deleted] }
//                                 ▲ current iteration

console.log(obj);

// Non-negative integer keys will be traversed first, that's
// why I placed keys 1 and 2 in step 3 and 4 before [deleted].
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#description

<!-- end snippet -->

You might already have spotted the line above the one I've made bold in the spec.

> If new properties are added to the target object during enumeration, the newly added properties are not guaranteed to be processed in the active enumeration.

Meaning that the outcome is depended on the JavaScript environment. Environments that DO NOT iterate the new properties will yield the (desired) inverted object. Environments that DO iterate the new properties will yield a non-inverted object.

This behaviour is also described in the MDN documentation:

> ### Deleted, added, or modified properties
>
> If a property is modified in one iteration and then visited at a later time, its value in the loop is its value at that later time. A property that is deleted before it has been visited will not be visited later. Properties added to the object over which iteration is occurring may either be visited or omitted from iteration.
>
> In general, it is best not to add, modify, or remove properties from the object during iteration, other than the property currently being visited. There is no guarantee whether an added property will be visited, whether a modified property (other than the current one) will be visited before or after it is modified, or whether a deleted property will be visited before it is deleted.

In most scenarios it's probably better to create a new inverted Map instance, instead of mutating the current instance.

const inverted = new Map(Array.from(map, ([key, value]) => [value, key]));