Variables in js

Question

I am quite a noob in regards to js and today I come across bit of js I don't really understand and I would like to. Could you please shed some light ? There is Kendo involved but the question is plain js.

I have a nested grid, eg. each row can expand into other grid and each of this grid has its own datasource. I populate the datasources via the method below one by one as user clicks and I had a problem with forcing the datasource to read when it receives async response from the create call. (calling the read is pretty much incorrect thing to do, but Kendo has its own bugs - not a point here.). My problem was, I didn't have an instance to call the read() on, the method only returns datasource and assigns it to a grid, when the event comes back I can't find any reference to anything I could get the correct datasource instance from. this is different context in here.

In order to resolve this I added a datasource variable into the method what builds the datasource and I return the variable instead the datasource, which is the same thing. However this helps to have something to call the problematic read() on. Now in my create handler I call create on the variable I am returning in the method during innit. Well it works, but I am not sure if every datasource is calling read on its own instance after innit ?

function _getDatasource() {
        var datasource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: serviceBaseUrl + "ReadQuestionnaire",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",

                },               
               create: {
                    url: serviceBaseUrl + "CreateQuestionnaire",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    complete: function (jqXhr, textStatus) {
                        if (CheckForExceptions(jqXhr, textStatus) == false) {
                            // this is the variable I am not sure about 
                            // after innit does this always refers to this same datasource ?
                            datasource.read(); 
                        }
                    }
                }
            }
        });
        return datasource;
}

Community · Accepted Answer · 2017-05-23 12:18:56Z

3

Your solution is correct, and yes, the datasource.read() call is the correct datasource object in each case.

Here's why this works: closures.

A closure is the ability to have a variable declared in one function accessible from a nested function. Or, for a more accurate description, see the wikipedia page: http://en.wikipedia.org/wiki/Closure_(computer_science)

Here's a very simple example:


function doStuff(){
  var name = "Derick";

  function sayMyName(){
    console.log(name);
  }

  sayMyName();
}

doStuff();

In this example, I'm declaring a variable name inside of the doStuff function. Then I'm nesting another function inside of the first function. The sayMyName function is accessing the name variable through the use of a closure.

When I call doStuff(), the variable is defined and assigned to a value. Then the sayMyName function is defined and it uses that variable. I then call sayMyName() and it logs the name to the console.

Similarly, in your code you are creating a variable that is assigned to the instance of the DataSource. Later, you are defining a function for the complete callback. After the data source has loaded and the complete callback is fired, you are accessing the same dataSource variable that you had assigned to the DataSource instance through the use of a closure around that variable.

Since you are declaring var dataSource every time you call _getDataSource, you are creating a new variable / reference, assigned to a new DataSource instance. I don't think you need to return datasource at the bottom of your function, though... at least, not for the complete callback function to work. Maybe you need it for something else, outside of this function, though?

For more information on closures in JavaScript:

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

How do JavaScript closures work?

http://www.javascriptkit.com/javatutors/closures.shtml

http://www.watchmecode.net/javascript-scope (paid screencast)

HTH

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jan 29, 2013 at 16:23

Derick Bailey

73k23 gold badges214 silver badges221 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vojtiik Over a year ago

Thank you very much for this in depth explanation. I have heard of closures before, yet didn't thought this scenario fits in (real world example) I will read up on the material you have provided. And yes you are right I have to return the datasource at the end of the method as the created datasource is assigned to a grid when new grid is created - eg lots of grids call this same method, that's why I wanted to be sure that the datasources will actually talk to themselves not any other. Thx

Collectives™ on Stack Overflow

Variables in js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related