I ran into an odd problem in this older forum with no explanation for why it works (https://hashnode.com/post/how-to-create-nested-child-objects-in-javascript-from-array-cj9tsc3we01m0uowu4pyuesy0), and while I was able to understand some of the other solutions there that break the problem up into multiple functions, one caught my eye that has royally confused my understanding of some JavaScript concepts. Here is the answer given in question:
let newArray = [1, 2, 3]; //any array to turn into set of nested objects
function arrayToList(insertArray) {
let list = {};
for (node = list, i = 0, iterateFor = insertArray.length; i < iterateFor; i++) {
node = node[insertArray[i]] = {};
}
return list;
}
console.log(arrayToList(newArray));
With this as the expected output:
{1: {2: {3: { }}}}
So far I understand everything in the for loop structure, but the actual code block is seems like its missing a line of code.
At what point does the node get inserted into the new empty object?
My best guess at why this works was the 'node' variable had a different value at the beginning and the end of every iteration. But when I console log the node, it only gives me an empty list:
{}
Logging the node inside the loop will give you an empty object because you're always assigning an empty object to it in the loop. If you're trying to figure things out, log the list instead, because that's the top-level object inside which everything else is assigned.
This:
node = node[insertArray[i]] = {};
does three things: it creates an object, it assigns that object to node[insertArray[i]], and it reassigns the node variable to that new object. A less confusing way of writing it would be:
let newArray = [1, 2, 3]; //any array to turn into set of nested objects
function arrayToList(insertArray) {
let list = {};
for (node = list, i = 0, iterateFor = insertArray.length; i < iterateFor; i++) {
const newNode = {};
node[insertArray[i]] = newNode;
node = newNode;
}
return list;
}
console.log(arrayToList(newArray));Now the process should be pretty clear. On every iteration, a new empty object is created, that object is assigned to the most deeply nested object so far in the overall structure, and then the node is assigned to that new empty object (becoming the new most deeply nested object).
At what point does the node get inserted into the new empty object?
The variable node does not get inserted into any "new empty object", it is the other way around.
On line 4 of your code, in the for loop, you declare node and assign it as a reference to the pre-existing list object.
Therefore, the first updates to node, e.g. node = node[insertArray[i]] = {}; adds a property "1" to the "parent" list object.
Subsequent iterations of the for loop then update the most recently nested property, referenced by node, with a new empty object.