How Recursion Takes Place In This Code Snippet?

Look at the call Stack and Watch, Now when i press F10, the line's value in 'Watch' changes to be 'object Object' and because of that everything happens, i understand the flow till

Solution 1:

Object.prototype.toString.call(obj[e]) === "[object Object]" is never true. It is always "[object Undefined]"

1. At the beginning:

   obj:: {}
   prop:: 'foo.bar.foobar'

2. Before first call from inner function (if):

   obj:: {foo: {}}
   prop:: ['bar', 'foobar']
   

3. Before second call from inner function (if):

   obj:: {foo: {bar: {}}}
   prop:: ['foobar']
   

4. At last execution, as prop.length is 1 (else - no more recursion):

   obj:: {foo: {bar: {foobar: 'Value'}}}
   prop:: []
   

Objects in Javascript are always passed as Reference, refer to @Tiny Giant's comment.

Solution 2:

Object.prototype.toString.call(obj[e]) === "[object Object]" is just a really ugly way of saying "(if) this object actually exists...". I won't explain in detail how it works, because it's not a good example and you may not understand it.

What the code wants is to be able to add/edit an object property. For example:

var person = {name: 'Liana', hair: {color:'red', style:'long'}};
assing(person, 'name', 'George');

...etc. But what if you wanted to edit a nested attribute, like the hair color?

assign(person, 'hair.color', 'brown');

Basically, the assign function is called twice:

• assign(person, 'hair.color', ...)
• This detects we are editing a nested attribute (color) inside hair, and it makes sure hair actually exists inside person.
• If not, it creates person.hair (That's what the ugly line is about)
• Then calls assing(person.hair, 'color', 'brown');

---

I would personally write the function like this:

function assign(object, prop, value) {
    prop = prop.split('.');

    if(prop.length > 1) {
        var first = prop.shift();
        prop = prop.join('.');
        if(typeofobject[first] != 'object')
            object[first] = {};
        assign(object[first], prop, value);
    } else {
        object[prop] = value;
    }
}

Solution 3:

How recursion is happening, as the function is not returning anything ?

Returning a value is not necessary for recursion to happen. Here, the condition prop.length > 1 will stop the recursion after setting value to the desired property

How the value of the arguments in the inner call being changed as the function in the top most call stack(of assign function) is completed ?

I am not sure what you are asking about here. I think you are asking about this line

assign(obj[e] =
                 Object.prototype.toString.call(obj[e]) === "[object Object]"
                 ? obj[e]
                 : {},
               prop,
               value);

This code checks whether obj is object or not. If obj is not an object, then it will be changed to an object in the recursion call itself.