Learn JavaScript as ABAP developer Part 2

[johannes_gerbershagen11]

1. Variable declaration


2. Function declaration


3. Concurrency with Promises and async functions


4. Encapsulation with modules


5. Scripting in UI5 applications

Introduction

In this blog series i want to show you from the perspective of an ABAP developer the basics of JavaScript. Both languages have in some way familiar concepts.

Function declaration

Signature
JavaScript functions are in some ways different to ABAP functions. The first difference affects the signature. All arguments of a JavaScript function are optional. Secondly arguments are passed automatically per value or per reference. Elementary types like booleans or strings are passed by value. Complex types like objects or arrays are passed by reference.
A default value can be declared by adding '=' followed by the default value.

/** add 1 hour to startDate, if the caller 

 *  doesn't supply the second parameter */

function addHour(startDate, hours = 1){

  return new Date(startDate.getTime()+hours*3600*1000);

}

Placement
JavaScript knows two types of declarations. First the normal declaration with a name:

function myAwesomeFunction(){

  return 'learning JavaScript is funny';

}

and secondly the declaration of anonymous functions:

const anonymous = function(){

  return 'learning JavaScript is funny';

}

Anonymous functions can be declared at any place, even inside other functions, whereas the normal declaration is normally not placed inside other functions.

The this context
In ABAP functions follow the procedural programming style. They cannot be used as class-methods. In JavaScript, functions can be used in the procedural style as well as in the object orientated style. In the object orientated style functions are used as class-methods and class-attributes or other class-methods are referred with the this-property. The this-property is assigned, after the function is bound to an object. Unbounded functions don't have a this-property. This can let to tricky bugs, as you can see in the following listing.

class Children{



  constructor(birthday, surName){

    this.birthday = birthday;

    this.surName = surName;

  }



  getBirthdayAndName(){

    const getFullName = function(){

      return `Johannes ${this.surName}`;

    }

    return {birthday: this.birthday, fullName: getFullName()};

  };



}



const children = new Children(new Date('2010-04-03T08:00:00'), 'Gerbershagen');

console.log(children.getBirthdayAndName());

This simple program throws an error. The this-property of the function getFullName isn't inherited from the surrounding method and for this reason it is undefined.

Arrow functions
Arrow functions don't have an own this property. They use the this-property from the surrounding method and they are the right approach for stateless functions not bound to any object. Arrow functions are declared like this:

const arrowFunction = (arg1, arg2) => {

  //implementation

};

With arrow functions we can get rid of the error above:

class Children{



  constructor(birthday, surName){

    this.birthday = birthday;

    this.surName = surName;

  }



  getBirthdayAndName(){

    const getFullName = () => {

      return `Johannes ${this.surName}`;

    }

    return {birthday: this.birthday, fullName: getFullName()};

  };



}



const children = new Children(new Date('2010-04-03T08:00:00'), 'Gerbershagen');

console.log(children.getBirthdayAndName());

Now the this-property from the surrounding method is used in function getFullName.

Arrow functions declared outside of an method don't have a this-property. They are suitable for the procedural programming style.