Javascript dynamic nested objects

Question

I was looking into how to create a dynamic nested objects from a string, for example, a string "obj1.obj2.obj3.obj4", how do you turn that into nested objects with the same order.

I googled around and i found this nice and clean code, but i did not understand how it worked, and there was no explanation on the page where it was written, can someone explain how this works please?

here is the code:

var s = "key1.key2.key3.key4";
var a = s.split('.');
var obj = {};
var temp = obj;
for (var k =0; k < a.length; k++) {
	temp = temp[a[k]] = {};
 console.log(temp);
}
console.log(obj);

why is there a var temp = obj?

what does this line do?:

temp = temp[a[k]] = {};

also, the console.log(temp) inside the loop always logs an empty object {}, why?

Thanks for the feedback!

• Michael Geary: You should learn how to use the JavaScript debugger. Not just console.log(), but the real debugger where you can step through your code, statement by statement, and look at all your variables each step of the way. Doing this would answer all of your questions about the code. Here is a Guide to the Chrome DevTools to help get you started.

Answer 1

why is there a var temp = obj?

obj is a variable to hold the completed object. temp is a variable to hold each intermediate step of the object being built. temp starts out with the same value as obj so that the first iteration of the loop adds on to obj.

what does this line do?:

temp = temp[a[k]] = {};

1. Assign an empty object to a property in temp with the name a[k], where a[k] is one of the values in a.
2. Assign that new empty object to temp.

This could be written separately as two lines:

temp[a[k]] = {};
temp = temp[a[k]];

also, the console.log(temp) inside the loop always logs an empty object {}, why?

Because the previous line assigns an empty object to temp.

• therayess: But how was the nesting achieved using this code? i mean, how is the connection between these objects happen? why didn't it end up being a flat separate 4 objects instead?
• RQman: because temp[a[k]] contains new (created) level of object and after initialization that new level assign to temp and became current level of object
• therayess: That makes sense, so on the line temp[a[k]] = {} the new obj level is created and since obj references temp it will have that obj too, and on the next line temp=temp[a[k]] we are moving the temp object level to the newly created, hence, when you run the next iteration of the loop it will just add the newly created object to that level. right?

Answer 2

Your question boils down to this (comments inline)

var x = {};
var y = x;
y[ "a" ] = {}; //reference to x stays so x also becomes { "a": {} }
y = y["a"]; //now y effectively becomes {} but has the same reference to y["a"] as assignment works right to left hence property `a` is becomes non-enumerable and hence shadowed.
console.log( "First Run" );
console.log( y ); //prints {}
console.log( x ); //prints { "a": {} }
y[ "a" ] = {}; //y still has a non-enumerable property `a`
y = y["a"]; //same as above y = y["a"], y again becomes {}
console.log( "Second Run" );
console.log( y ); //prints {} again
console.log( x ); //prints { "a": { "a": {} } }

Outputs

First Run

{}

{ "a": {} }

Second Run

{}

{ "a": { "a": {} } }

• therayess: y = y["a"]; //now y effectively becomes {} but has the same reference to y["a"] as assignment works right to left hence property a` is becomes non-enumerable and hence shadowed.` can you elaborate on this more please?
• gurvinder372: @therayess Not in terms of variable shadowing (maybe I am not getting the right word for it). When you run this code in your browser's console and try to expand y's output [], then you will see a as it has just been evaluated by the browser. However, y is effectively only [] and you can't event do y["a"] still it internally has the reference to the same.

Answer 3

Have added comments in code, hope it will be useful

var s = "key1.key2.key3.key4";
//split the string by dot(.) and create an array
var a = s.split('.');
//Creating an empty object
var obj = {};
var temp = obj;
//looping over the array
for (var k = 0; k < a.length; k++) {
 //a[k] will be key1,key2,key3....
 // temp is an object,square bracket is use to create a object key
 // using a variable name
 // variable name here is key1,key2....
 //temp[a[k]] will initialize an empty object
 temp = temp[a[k]] = {};
 console.log(temp);
}
console.log(obj);

Answer 4

It seems where you are iterating the array, in that temp object is newly creating and assigning key to obj.

temp = temp[a[k]] = {};

above line simply assigns a[index] value as a key to the new object and as a reference to obj the nested object is created.

for your question,

why is there a var temp = obj?

it copies obj object into temp variable

also, the console.log(temp) inside the loop always logs an empty object {}, why?

since you are recreating an empty object (or reassigning).