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.

Semicolons

Semicolons in JavaScript are optional comparing to Java and Groovy, as in JavaScript we have 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 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

const array = ['string', 69, true]

const object = {
  key: 'value',
  'key-word': 'value',
}

String formatting

use backticks and ${}

const string = 'pricefx'
const formatted = `Hi ${string}`
console.log(formatted) // Hi pricefx

Flow control

// If-else statement
let i = 0;
if (i < 0) {
  console.log("it's negative");
} else if (i > 0) {
  console.log("it's more than 0");
} else {
  console.log("it's 0");
}

// Logical operators (&& and ||)
let x = 5;
let y = 10;

// AND (&&) operator
if (x > 0 && y > 0) {
  console.log("Both x and y are positive");
}

// OR (||) operator
if (x < 0 || y > 5) {
  console.log("Either x is negative or y is greater than 5 (or both)");
}

// Ternary operator
let result = i < 0 ? "it's negative" : "it's 0 or more than 0";
console.log(result);

// While loop
let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

// For loop
for (let k = 0; k < 5; k++) {
  console.log(k);
}

// For...of loop
const array = [0, 1, 2, 3, 4];
for (const item of array) {
  console.log(item);
}

// Do...while loop
let m = 0;
do {
  console.log(m);
  m++;
} while (m < 5);

// For...in loop (for object properties)
const person = { name: "John", age: 30, job: "Developer" };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// Switch statement
let day = "Monday";
switch (day) {
  case "Monday":
    console.log("Start of the work week");
    break;
  case "Friday":
    console.log("TGIF!");
    break;
  default:
    console.log("It's a regular day");
}

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):

const fn = (param1, param2) => {
  console.log(param1, param2);
}

Named function:

function fn(param1, param2) {
  console.log(param1, param2);
}

Nameless function assigned to a constant variable:

const fn = function(param1, param2) {
  console.log(param1, param2);
}

All of these functions can be invoked in the same way, like any other function:

fn('Hola', 'pricefx');

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:

function fn(param1, param2 = 'hello') {
  console.log(param1, param2);
}

fn(); // Outputs: undefined, hello

Destructuring

Arrays

// Initialize an array with five elements
const array = [1, 2, 3, 4, 5];

// Use array destructuring to assign the first two elements to variables,
// and the rest of the elements to a new array called 'rest'
const [elem1, elem2, ...rest] = array;

// Log the values of the variables to the console
console.log(elem1, elem2, rest); // Outputs: 1, 2, [3, 4, 5]

Objects

// Initialize an object with four properties
const object = {one: 1, two: 2, three: 3, four: 4};

// Use object destructuring to assign the values of the 'one' and 'two' properties to variables,
// and the rest of the properties to a new object called 'rest'
const {one, two, ...rest} = object;

// Log the values of the variables to the console
console.log(one, two, rest); // Outputs: 1, 2, {three: 3, four: 4}

Promises (await, then)

In JavaScript, await and then are used to handle asynchronous operations, for example when fetching data from CRM.

Await

await is a keyword that can be used inside an async function to pause the execution of the function until a Promise is resolved or rejected. This allows us to write asynchronous code in a more synchronous-looking way, making it easier to understand and maintain.

Here's an example of using await to get payload from CRM:

const fetchData = async (crmManager) => {
  const response = await crmManager.getPayload();
  console.log(fetchData);
}

fetchData(); // object with data from CRM

Without await, you would get unfulfilled promise which doesn't have anything to return or show:

const fetchData = (crmManager) => {
  const response = crmManager.getPayload();
  console.log(fetchData);
}

fetchData(); // Promise<Pending>

Then

then is a method 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:

crmManager.getPayload()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });