Need code explanation(how it work and why)

Question

I'm struggling to understand the below code and how it's actually working.

var createNestedObject = function( base, names ) {
    for( var i = 0; i < names.length; i++ ) {
        base = base[ names[i] ] = base[ names[i] ] || {};
    }
};

// Usage:
createNestedObject( window, ["shapes", "triangle", "points"] );
// Now window.shapes.triangle.points is an empty object, ready to be used.

It's from this Q/A: Javascript: how to dynamically create nested objects using object names given by an array

Can you please explain how the base = base[ names[i] ] = base[ names[i] ] || {}; works?

My thought process stuck and broken because of the above code. Drives me crazy.

Answer 1

Can you please explain how the base = base[ names[i] ] = base[ names[i] ] || {}; works?

Let's assume we're on the first turn of the loop, and so base is window, i is 0 and names[i] is "shapes". The first part to evaluate is base[ names[i] ] || {}. This is going to resolve to window.shapes if it exists, or an empty object if it does not.

Next, we move left to this assignment:

base[ names[i] ] = base[ names[i] ] || {};

That's going to assign to window.shapes whatever we got from the right hand side. So if window.shapes already exists, we assign it to itself and nothing changes. Or if it doesn't exist, we assign an empty object to it.

And moving left one more time:

base = base[ names[i] ] = base[ names[i] ] || {};

We now are going to reassign the base variable to point to the object we just created (or the object we reused). So for the next turn of the loop, base is no longer window, it's window.shapes.

At this point the loop repeats, but our variables are now one step farther along. base is window.shapes, i is 1, and names[i] is "triangles". Since base is now window.shapes, we're probing and assigning to an object that's one layer deeper. So while the first time through the loop we made sure window.shapes existed, this time we're checking if window.shapes.triangle exists. And so it will continue, deeper and deeper into the object with each time through the loop.

Answer 2

The line of code is doing several – maybe too much – things at a time. One way to understand it is to take the things apart and have separate steps:

// Original line
base = base[ names[i] ] = base[names[i]] || {};

// Add parentheses according to JavaScript operator preferences
base = base[ names[i] ] = ( base[names[i]] || {} );

// Separate the two assignments
base[ names[i] ] = base[names[i]] || {};
base = base[ names[i] ];

// Replace the use of || as null coalescing operator with the ?: operator
base[ names[i] ] = base[names[i]] ? base[names[i]] : {};
base = base[ names[i] ];

// Replace the ?: operator with if-else
if (base[names[i]]) {
  base[names[i]] = base[names[i]]
} else {
  base[names[i]] = {}
}
base = base[ names[i] ];

// Swap if and else branches
if (!base[names[i]]) {
  base[names[i]] = {}
} else {
  base[names[i]] = base[names[i]]
}
base = base[ names[i] ];

// Get rid of the else branch as it is not doing anything
if (!base[names[i]]) {
  base[names[i]] = {}
}
base = base[ names[i] ];