/ simpler code

Scope in practice: don't park variables on your controllers

You will have heard about the importance of scope in Javascript, but what are its practical implications for you as a UI5 developer?

Scope defines the accessibility of your variables in a part of your code during runtime. Having a good understanding of scope will allow you to write better code with less errors.

Scope in Javascript is largely based on function definition. There are other forms of scope such as block scope, but we will focus on function scope here.

var a = 1; 

function foo() {
    // Since 'a' was declared in the upper scope we can access it here
    console.log(a);
}

function bar() {
    // Since 'b' is declared inside bar() it will not be accessible outside of bar()
	var b = 3;
    
    // Do some other stuff
}

foo(); // 1

bar();
console.log(b); // undefined

The example above shows how we can access var a inside function foo() since it was declared in the upper scope. On the other hand, var b is not accessible outside of function bar(). You can think of scope as a bubble of access. Each function creates its own bubble when invoked. This limitation in variable access is an important feature which can help us reduce the potential for unwanted side-effects when writing our code, and makes debugging applications a lot easier as it limits the number of places a variable may be changed. We call this the Principle of Least Exposure.

With this short introduction of scope and its importance, lets move on to a practical example. Consider the following two controller functions:

onFormSubmit: function(oEvent)
{
    this.someData = this.getModel().getProperty("/myFormData");

    this.someAsyncMethod(function(oResponse) {
        // So some other stuff
        myCallback();
    });
}

myCallback: function()
{
    var sName = this.someData.name;
    // Do something with sName
}

This is a style you may have come across or used yourself. someData is originally defined in onFormSubmit(), and later needed in myCallback(). In order to use the same variable, many UI5 developers may decide to 'park' the value of someData as a property on 'this' (referring to the controller itself). While this may seem like a good idea, giving you easy access to the data in myCallback(), it also breaks our Principle of Least Exposure. By parking the data as a property on the controller, we do not only make it accessible from anywhere within the controller, but also by every other scope that has access to the controller object! Even worse, since 'myCallback' is the callback for some Asynchronous method, there is every opportunity for this.someData to be modified before the callback is triggered.

So how can we improve this? One way is to define oSomeData as a variable within the scope of onFormSubmit(), making it accessible within its function scope (as well as inside the anonymous function defined within) but not outside of onFormSubmit(). We can then pass oSomeDate as a parameter to myCallback(), greatly reducing the chance of side-effects.

onFormSubmit: function(oEvent)
{
    var oSomeData = this.getModel().getProperty("/myFormData");

    this.someAsyncMethod(function(oResponse) {
        // So some other stuff
        myCallback(oSomeData);
    });
}

myCallback: function(oSomeData)
{
    var sName = oSomeData.name;
    // Do something with sName
}

As we have seen in this introduction, scope is an important part of any JS/UI5 developers toolkit. By applying the Principle of Least Exposure, we can write better structured applications with fewer bugs.

Scope in practice: don't park variables on your controllers
Share this