Learn JavaScript as ABAP developer Part 1

[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.

Variable declaration

JavaScript is not a strongly typed language. Variables can be declared without an explicit type. JavaScript knows three declarative statements:

var myVariable;

let myNumber;

const myConstantNumber = 100;

The var-, the let- and the const-statement differ in the scope. A variable declared with the var-statement is either visible to the whole script, if it was declared global, or is visible inside a function, if it was declared inside this function. The var-statement can be compared to the ABAP DATA-statement.
The let-statement and the const-statement declare a variable, which is just visible inside the block (including the inner blocks), in which it was declared. A block can be a function, an if-else-condition, a loop etc.
A example should demonstrate the difference between var and let (const).

function a(){

  var myNumber = 200;

  if(myNumber === 200){

    var myNumber = 300;

    console.log(`myNumber value is ${myNumber}`);

  }

  console.log(`myNumber value is ${myNumber}`);

}

The value 300 is printed two times. myNumber refers inside and outside of the if-condition to the same memory area.
If we change the var-statement with the let-statement two variables are allocated. Inside the if-condition, the variable myNumber is allocated a second time and shades the variable myNumber outside of the if-condition. For this reason, the following listing prints first 300 and then 200.

function a(){

  let myNumber = 200;

  if(myNumber === 200){

    let myNumber = 300;

    console.log(`myNumber value is ${myNumber}`);

  }

  console.log(`myNumber value is ${myNumber}`);

}

In ABAP we can't realize such let-statements. If we declare a local variable with the DATA-statement, it is like the var-statement in JavaScript visible in the whole procedure.

In ABAP every variable has a fixed type. Not so in JavaScript. In JavaScript the value assignment set's the type.
JavaScript knows five different kinds of types:

• Undefined type and null value


• Elementary types like booleans, numbers, dates, strings and regular expressions


• Functions


• Objects


• Arrays

Undefined type, null value and elementary types
In the following listing you can find an undefined variable, the null value and the common elementary types.

var myUndefinedVariable;

var myNullValue = null;

var myBoolean = true;

var myNumber = 100;

var myBirthday = new Date('2000-04-04T08:00:00')

var myString = 'want to learn js?';

var myRegularExpression = /(yes|no)/

Functions
Both JavaScript functions and ABAP functions are procedures with a signature. In ABAP functions can't be assigned to variables. In JavaScript you can assign a function to a variable.

const varStatements = function(){

  var myNumber = 200;

  if(myNumber === 200){

    var myNumber = 300;

    console.log(`myNumber value is ${myNumber}`);

  }

  console.log(`myNumber value is ${myNumber}`);

}

The name of a function can also be used as a variable:

function a(){

  var myNumber = 200;

  if(myNumber === 200){

    var myNumber = 300;

    console.log(`myNumber value is ${myNumber}`);

  }

  console.log(`myNumber value is ${myNumber}`);

}



function call(procedure){

  procedure();

}



call(a);

Objects
JavaScript objects can be used like structures or like class instances in ABAP. In JavaScript, there is no need to declare the structure or the class definition in an extra entity. Structure or class definition is created out of the context.

The following listing creates a structure like object with the two properties birthday and placeOfBirth.

const children = {birthday: new Date('2000-04-04T08:00:00'), placeOfBirth: 'Ulm'};

Properties, that are functions, are called methods:

function getFullName(){

  var firstName = getNameWishFromFather();

  if(getNameWishFromMother()){

    firstName = getNameWishFromMother();

  }

  return `${firstName} ${surName}`

}

const children = {birthday: new Date('2000-04-04T08:00:00'), 

  fullName: getFullName};

When an object is declared with a new operator, it can be used like a class instance.

function Children(birthday, placeOfBirth, surName){

  this.birthday = birthday;

  this.placeOfBirth = placeOfBirth;

  this.surName = surName;

}

function getFullName(){

  var firstName = getNameWishFromFather();

  if(getNameWishFromMother()){

    firstName = getNameWishFromMother();

  }

  return `${firstName} ${this.surName}`

}

const children = new Children(new Date('2000-04-04T08:00:00'), 

  'Ulm', 'Gerbershagen');

children.fullName = getFullName;

The this object is pointing to the class instance. In ABAP the class instance is called me.

Arrays
Arrays are like internal tables in ABAP. You can declare them inline with [] brackets.

const myChildrens = [{birthday: new Date('2000-04-04T08:00:00'), placeOfBirth: 'Ulm'}, 

  {birthday: new Date('2002-02-04T08:00:00'), placeOfBirth: 'Ulm'}];

Like in ABAP, arrays don't have a fixed size. You can always add or remove elements from the array.