Introduction to JavaScript

JavaScript is used

If you don’t know any JavaScript, this is a quick 5-minute course explaining most things you will need to understand.

Full JavaScript Docs

If you need a more in-depth explanation, you can look up anything on developer.mozilla.org, everything except for the DOM.

Types in JavaScript do not exist

In Groovy and Java, you can explicitly declare the type of a variable or the return type of a function. This is called static typing (Groovy has a mix of static and dynamic typing).

JavaScript, on the other hand, uses dynamic typing. This means:

You don't declare types for variables or functions.
Types are automatically assigned at runtime based on the value assigned to the variable or returned by the function.
A variable's type can change during program execution if you assign it a different type of value (for example: variable from string can become a number when using if with two equal signs ==, three equal signs also evaluate type ===).

let number = 5;        // Automatically typed as a number
let text = "Hello";    // Automatically typed as a string

function add(a, b) {
    return a + b;      // Return type depends on the input
}

console.log(typeof number);  // Outputs: "number"
console.log(typeof text);    // Outputs: "string"
console.log(typeof add);     // Outputs: "function"

console.log(typeof number === typeof text)  // Outputs: false

Semicolons are optional

Semicolons in JavaScript are optional, same as in Java and Groovy. Read more in automatic semicolon insertions.

Logging

// Display's word hello in browser console.
console.log('hello');

// Show in the console object data from crm
const payload = await api.crmManager.getPayload();
console.log(`This is data from the payload ${payload}`);

Variables

To define a variable, use the let or const keyword. Don’t use var as it is a global variable and can conflict with interceptor, app and CRM.

let someString = 'some-string'

let someNumber = 69

let someBool = true

// In groovy it same
const array = ['string', 69, true]

// In groovy it would be called map
const object = {
  key: 'value',
  'key-word': 'value',
}

String formatting

use backticks and ${}

Flow control

Functions

There are multiple ways to define functions, with the function keyword or with arrow functions, also known as lambda functions in other languages.

Arrow function (lambda function):

Regular function:

Normally, arrow function should be preferred when writing interceptors, as arrow function follow the functional code paradigm and regular function are more for OOP.

Differences between arrow and regular function

this binding:
- Regular: Has its own this context
- Arrow: Inherits this from the enclosing scope
Arguments object:
- Regular: Has arguments object
- Arrow: Doesn't have arguments object
Use as methods:
- Regular: Can be used as object methods
- Arrow: Not suitable for object methods (due to 'this' binding)
Function hoisting:
- Regular: Can be hoisted
- Arrow: Cannot be hoisted
Constructors:
- Regular: Can be used as constructors
- Arrow: Cannot be used as constructors

Additionally, JavaScript supports default parameter values, which can be used to provide a default value for a parameter if no value is provided when the function is called. Here's an example:

Destructuring

Arrays

Objects

Promises/Async (await, then)

JavaScript Async is not common in Groovy, and most likely you never heard about it.

Async and Sync

Synchronous: Operations are executed in sequence. Each operation must finish before the next one starts.
Asynchronous: Operations can be executed in parallel. The program doesn't wait for an operation to finish before moving to the next one.

Asynchronous operations are crucial for handling time-consuming tasks (like API calls or file operations) without blocking the main thread of execution. Also, all API calls are async, so If you would use an async function in sync method you will get Promise<pending> instead of a result.

Then

then is alternative to await used to handle the resolution or rejection of a Promise by providing callback functions to be executed when the Promise is resolved or rejected, allowing for the chaining of asynchronous operations.

This is not as complicated as it may seem.

Here's an example of using then to handle getPayload:

Here is same code but with await

try...catch...finally

Between Groovy and JavaScript try...catch...finally works same. Here is example for JS