Javascript modules, named and default exports

Take this code where we have multiple classes defined in the same file.

class Person {
  constructor(name) {
    this.name = name;
  }

  walk() {
    console.log("Walk");
  }
}


class Teacher extends Person {
  constructor(name, degree) {
    super(name);
    this.degree = degree;
  }

  teach() {
    console.log("Teach");
  }
}

const teacher = new Teacher("John", "MA");
teacher.walk();

If we can split this code across multiple files, we call it modularity, and each file is known as module. So let's modularize this code as below so that each class will be in a separate file. The objects we define in a module are private by default. To make it public, we use the export keyword, and to use it we use the import keyword.

person.js

export class Person {
  constructor(name) {
    this.name = name;
  }

  walk() {
    console.log("Walk");
  }
}

teacher.js

import { Person } from "./person";

class Teacher extends Person {
  constructor(name, degree) {
    super(name);
    this.degree = degree;
  }

  teach() {
    console.log("Teach");
  }
}

index.js

import { Teacher } from "./Person";

const teacher = new Teacher("John", "MA");
teacher.walk();

The way we have used the export keyword, we call it named exports. To use default exports, modify person.js as follows:

export default class Person {
  constructor(name) {
    this.name = name;
  }

  walk() {
    console.log("Walk");
  }
}

and in teacher.js file, import Teacher module as below:

import Person from "./person";

...
...

Javascript: Destructuring

Destructuring Objects

With destructuring, you can extract multiple pieces of data at the same time via patterns in locations that receive data.

const person = {
   first: "John",
   last: "Doe",
   links: {
      social: {
         twitter: "https://twitter.com/john.ca",
         facebook: "https://facebook.com/johndoe"
      },
      web: {
         blog: "https://johndoe.com"
      }
   }
};

const { twitter, facebook } = person.links.social;

Rename the variables as you destructure

const { twitter: tweet, facebook: fb } = person.links.social;

Set fallback or default value

const settings = { width: 300, color: "black" };
const { width = 100, height = 100, color = "blue", fontSize = 25 } = settings;

Destructuring arrays

const details = ["John Doe", 123, "johndoe.com"];
const [name, id, website] = details;
console.log(name, id, website);

Destructuring comma separated string

const data = "Basketball,Sports,90210,23,John,Doe,cool";
const [itemName, category, sku, inventory] = data.split(",");

Destructuring into Rest - an example using rest parameter

const team = ["John", "Harry", "Sarah", "Keegan", "Riker"];
const [captain, assistant, ...players] = team;

Swapping Variables with Destructuring

let inRing = "Hulk Hogan";
let onSide = "The Rock";

[inRing, onSide] = [onSide, inRing];

To make order of arguments independent, wrap these 3 arguments in , and then pass an object in tipCalc function so that it destructures the object.

function tipCalc({ total = 100, tip = 0.15, tax = 0.13 }) {
   return total + tip * total + tax * total;
}

const bill = tipCalc({ tip: 0.2, total: 200 });
console.log(bill);

What is we don't pass anything in tipcalc?

function tipCalcDefault({ total = 100, tip = 0.15, tax = 0.13 } = {}) {
   return total + tip * total + tax * total;
}

const newBill = tipCalcDefault();
console.log(newBill);

Javascript: Spread and Rest Operators

Rest Operator

Takes multiple things and packs it into a single array

function convertCurrency(rate, ...amounts) {
   console.log(rate, amounts); // 1.5 [10, 20, 30]
}
convertCurrency(1.5, 10, 20, 30);

Can be used while destructuring into an array

const team = ["John", "Kait", "Lux", "Sheena", "Kelly"];
const [captain, assistant, ...players] = team;
console.log(captain, assistant, players);

Spread Operator

(3 dots in-front of an array or any iterable) Takes every single item from an iterable (that can loop over with for-of loop) and spread it into a new array

const featured = ["Deep Dish", "Pepperoni", "Hawaiian"];
const specialty = ["Meatzza", "Spicy Mama", "Margherita"];

const pizzas = [...featured, "veg", ...specialty];

Using above example, creating a new array fridayPizzas

const fridayPizzas = [...pizzas];

pizzas != fridayPizzas (shallow copy)

Spread string

const name = "john";
console.log([...name]); // ["j", "o", "h", "n"]

Remove an object from an array of objects

const comments = [
   { id: 209384, text: "I love your dog!" },
   { id: 523423, text: "Cuuute! 🐐" },
   { id: 632429, text: "You are so dumb" },
   { id: 192834, text: "Nice work on this wes!" }
];
const id = 632429;
const commentIndex = comments.findIndex(comment => comment.id === id);

const newComments = [
   ...comments.slice(0, commentIndex),
   ...comments.slice(commentIndex + 1)
];
console.log(newComments);

Spreading into a function

const inventors = ["Einstein", "Newton", "Galileo"];
const newInventors = ["Musk", "Jobs"];
inventors.push(...newInventors); // and not inventors.push(newInventors);
console.log(inventors);

One more example

const name = ["John", "Doe"];

function sayHi(first, last) {
   alert(`Hey there ${first} ${last}`);
}

sayHi(...name);

Creating named credential with API key

1. Create a named credential like below specifying any username. Make sure that you have checked "Allow Merge Fields in HTTP Header" and unchecked "Generate Authorization Header" options.

2. Specify the API key in your Apex code using {!$Credential.Password} merge field.

HttpRequest req = new HttpRequest();
req.setEndpoint('callout:AnonAPI');
req.setHeader('APIKEY', '{!$Credential.Password}');
req.setMethod('GET');
HttpResponse res = new Http().send(req);

Javascript: Execution Context

Execution Context allows the Javascript engine to manage the complexity of interpreting and running the code. Every execution context has 2 phases: Creation phase and Execution phase.

The first execution context, the Global Execution Context, gets created when the Javascript engine runs your code. In this execution context,

• Global object gets created, which is the window object.
• this object gets created, pointing to the window object.
• We set up memory space for variables and functions. 
• All the variables declarations are assigned a default value of undefined (this is hoisting), while the function declaration is put entirely into memory.

In the execution phase, Javascript starts executing your code line by line.

Invoking a function creates the Function Execution Context. It is precisely the same as the global execution context except that instead of creating a global object, an arguments object gets created. Take, for example, the code below:

function fn() {
   console.log(arguments);
}

fn(x, y);

Here arguments is an array-like object for all of the arguments passing inside of this function, and a keyword in Javascript.

Now anytime a function is invoked, a new execution context is created and added to the execution stack. Whenever a function is finished running through both the creation phase and the execution phase, it gets popped off the execution stack.

Anytime you pass a variable to a function, that variable during the creation phase of a function execution context is going to be put in the variable environment of the current execution context as if they are local variables to the execution context. So for the code below

var name = 'John';
var handle = '@johndoe';

function getURL (handle) {
   var url = 'https://facebook.com/';
   return url + handle;
}

getURL(handle);

during the creation phase of getURL function, the value of url is undefined, while the value of handle is @johndoe as the variable is passed to a function. The value of arguments object during creation phase is {0:"@johndoe", length:1}.

If the Javascript engine can't find a variable local to the function's execution context, it will look to the nearest parent execution context for that variable. This process will continue all the way up until the engine reaches the global execution context. If the global execution context doesn't have the variable, then it will throw a reference error because that variable doesn't exist anywhere up to the scope chain or the execution context chain.

var name = 'John';

function logName() {
   console.log(name);
}

logName();

Now let's look at the code below:

var count = 0;

function makeAdder(x) {
   return function inner(y) {
      return x + y;
   };
}

var add5 = makeAdder(5);
count += add5(2);

Here we have a function nested inside a function (inner inside of makeAdder), and whenever that happens, the inner function is going to create a closure over the outer function's execution context. This is because later on when inner function is invoked, it needs to have access to any of the variables declared in the parent function's execution context even though that parent function's execution context has been removed from the stack. So the variables inside of this closure execution context are same as the variables that were in the makeAdder execution context. This whole concept is known as closure.