Big variables in JavaScript - make them global?

Question

In a fairly large application made in Cordova, we keep going back and forth taking a set of variables from the user's LocalStorage. I mean, this set is quite big (in can go from some kbytes to fairly 10mb). I'm pretty sure that keeping variables loaded in memory may not be a pretty good idea (especially in low power, low memory devices), but it turns out that getting them from the LocalStorage looks like it's taking too long. At this moment, our practice is something like this:

function doSomething() {
    var ourData = JSON.parse(localStorage.getItem('ourData'));

    ourData = processingBackAndForth(ourData);

    localStorage.setItem('ourData', JSON.stringify(ourData));

    syncWithServer(ourData);
}

Where processingBackAndForth(ourData) is pretty intensive and the whole function is used almost once per 10 seconds. Now, I was thinking, should this be faster?

ourData = JSON.parse(localStorage.getItem('ourData'));

function doSomething() {
    ourData = processingBackAndForth(ourData);

    localStorage.setItem('ourData', JSON.stringify(ourData));
    syncWithServer(ourData);
}

After reading a little on this , well, it basically tells that it's better to keep them in the local scope (which I know is better for encapsulation), but isn't this process a little too much? Just picture it, retrieving from LocalStorage, saving it back again, and letting GC to clean a variable with will be used afterwards once again.

I know one of the points that states the link is that if something needs to be used across the app, and only in really special cases, then make it global, but anyway things like keeping a synced version between the server and LocalStorage still concern a lot to me, so actually I only remove the weight of retriving and garbage collecting.

Would a JavaScript code use a big global variable instead of big local variables to gain some micro-optimizations?

Answer 1

You say that your data can be really large (up to 10MB). Now the question is: would it be better to retrieve your data only one time and save it globally?

In terms of performance, if you get or set your data many times this will really slow down your program, hence your goal is to request and set the data as few times as possible , so that you will not have to wait for the localStorage to retrieve it every time.

Now, given your function:

ourData = JSON.parse(localStorage.getItem('ourData'));

function doSomething() {
    ourData = processingBackAndForth(ourData);

    localStorage.setItem('ourData', JSON.stringify(ourData));
    syncWithServer(ourData);
}

The above code would be the best solution if you call the doSomething() function multiple times , because the data is only retrieved once, then can be elaborated as many times as you want, and saved again. When you have finished using your data you should just delete it ( delete ourData; ).

Otherwise, if you call the doSomething() function only one time, then the best solution would be to get the data inside the function itself , since that it will only live as long as the function runs, and it will be auto-removed from the memory once the function ends, so the best way to do it would be:

function doSomething() {
    var ourData = JSON.parse(localStorage.getItem('ourData'));
    ourData = processingBackAndForth(ourData);

    localStorage.setItem('ourData', JSON.stringify(ourData));
    syncWithServer(ourData);
}

---

TL;DR you've got two options:

1. If you use the doSomething() function several times , it's better to save the data globally and then delete it when finished.
2. If you use the doSomething() function only one time , then it's better to retrieve the data inside the function, using the var keyword.