How does this javascript code works?

Question

I understand that calling routes() and assigning to x will assign an object fun to it.But calling x.getData() it returns person.How it can return person object which is local to routes function? I am specially interested in last two lines.

var routes=function(){
    var person={
        fname:'Roger',
        lname:'Federer',
        city:'Paris'
    }

    var fun={
        getData:function(){
            return person
        }
    }

    return fun;

}

var x=routes();

console.log(x.getData());

Start with http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — Kuba Wyrostek, Dec 08 '15 at 13:04
Search about "Javascript Closure" or you may find w3schools article good on this. — Hiren S., Dec 08 '15 at 13:05
read about closures. Your `getData` function use `person` var, it `saves it inside`, and have access to it, so you get `person`. Closures are important things in js, so get time to learn how thay work — Andrew Evt, Dec 08 '15 at 13:06

Wikunia · Accepted Answer · 2015-12-08T13:50:47.700

3

It's about JS closures and lexical scopes: Your function getData inside the fun object has access to the scope of the routes object. It's explained in detail inside the "You don't know JS" book.

https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/ch5.md

edited Dec 08 '15 at 13:50

answered Dec 08 '15 at 13:10

Wikunia

1,564
1
16
37

1

A very worthwhile link. +1 from me. – wally Dec 08 '15 at 13:14

score 2 · Answer 2 · answered Dec 08 '15 at 13:14

Look at the flow carefully:

var routes = function() {
    var person = {
        fname: 'Roger',
        lname: 'Federer',
        city: 'Paris'
    }

    var fun = {
        getData:function() {
            return person
        }
    }

    return fun;
}

var x = routes();
console.log(x.getData());

First you defined the anonymous function.

When the anonymous function is called it:

Defines the object person (locally in its internal own scope)
Defines the object fun (also in its own internal scope)

When it defines fun it also defines the method getData() which returns person - declared in the outer scope (inside the outermost anonymous function which we just described).
The outer most anonymous function finishes by returning fun.

Then you call the anonymous function. (Via routes().)

Calling routes() returns fun, which means you can do routes().getData() and it resolves through to that getData:function() { declaration.

As we've said, that returns the person object from the scope of the outermost anonymous function. It's accessible to the definition of getData() - so it gets resolved OK.

When you called var x = routes() you captured the return value of routes() - which is fun because that's what routes() returns. You just made a more complicated route to get to x.getData(). Nothing wrong with that!

So in short:

x is the fun object returned by routes()

fun has a method called getData(), which returns person

person happens to be defined within the scope of an anonymous function - which you executed when calling routes() (specifically you did var x = routes(); - which triggered the creation of person).

I hope that makes sense.

It's not "super obvious", but the code is pretty easy to follow if you work through it line-by-line in order of execution, keeping a mental note (or on paper) of scopes and variable values.

Update: Others are providing worthwhile reading links on the subject of JavaScript closures. Read those. It'll teach you what I've stated above. They're more worthy (IMHO) of an up-vote. My answer is simply an explanation of the execution of the code you provided - not a walk-through on closures. :)

How does this javascript code works?

2 Answers2