function declaration in SAP UI5

Question

I'm a beginner to UI5 and I couldn't find an answer to the following question: Why in UI5 functions are declared this way:

and I can't declare it this way:

I couldn't find any JavaScript resource that shows the first picture function declaration . thanks

Answer 1

you can declare a function any way you wish, but usually, in sapui5 we extend some control and we write code inside it so when you declare a function inside a class or object right way to declare is

{
   demo : function(){
   }
}

not

{
   function demo(){
   }
}

Answer 2

This is how JS works. Everything can be referenced by everything. It is best practise to organise functions into objects. The extend method returns in the end an object.

I recommend you to disallow normal declaration with the esLint rule func-style set to expression.

I put every combination into an example

sap.ui.define([ "...BaseController", "sap/base/Log" ], function( BaseController, Log
) {
    "use strict";
    // "normal function definition", exists within the outer {}
    function normal(){  }
    // function expression, exists within the outer {}
    const functionExpression = function(){  };

    // this is basically: return { onInit : ()=>{}, ... }
    return BaseController.extend("controller.Detail", {
        onInit: function() {
            // constructor call
            BaseController.prototype.onInit.apply(this, arguments);
            // extend makes sure that 'this' points to the controller
            this.objectLiteralWithPointerTofunction.call(this);
            // prints 1
            console.log(this.objectLiteralWithBasicIntValue);
        },
        objectLiteralWithBasicIntValue: 1,
        // object literal pointing to a function
        objectLiteralWithPointerTofunction: function(){
           // nested code can access the outer definitions
           normal();
           functionExpression();
           // you can nest as deep as you want
           const functionExpression2 = ()=>{};
        }
    });
});
// you can NOT call anywhere else the nested functions !!!
normal();
functionExpression();
functionExpression2()