Implementation of JavaScript in Salesforce

JavaScript is the most commonly used programming language amongst software developers worldwide, with more than 63.6% of respondents stating that they recommend JavaScript as their first language for developing and building software applications.

JavaScript, an important part of software development, is used widely in Salesforce for development like in Lightning Web Components (LWC) or Aura Components, for debugging and error handling, asynchronous programming, and writing test classes for LWC. Developers who are new to Salesforce technology can implement the features of JavaScript to leverage their skills and build powerful functionality to build highly scalable Salesforce applications.

Why is JavaScript important for Salesforce Developers?

JavaScript is essential for Salesforce Developers as they can use it to add interactive elements to their applications, enhance user experience, and build complex logic that is very difficult with normal Salesforce tools. Besides, many businesses and companies can use this to build more sophisticated and customized applications for their customers.

In general, the addition of JavaScript language support to the Salesforce Platform is an effective development for everyone. It opens up new possibilities for developers and specialized professionals who are eager to build business solutions and web applications on the Salesforce platform.

Variables, Types and Collections in LWC

let, var & const

Variables play the most fundamental part of JavaScript. In JavaScript, you can declare variables with var, let and const.

“var” and “let” variables can be reassigned to new values.
The values declared by “const” variables cannot be assigned new values as they are declared constant.
The “let” keyword has a block-level scope, whereas the “var” keyword has global-level scope.
The “const” declared variables remain constant throughout the execution of the program.

var The var keyword was the very traditional way of declaring variables. It has a global-level scope, which means that it can be accessible within the block {} where it has been declared.
let The let keyword allows you to declare and store variables within the block scope. Variables declared with let can be reassigned to a new value.
const The const variables also have a block-level scope. The value assigned with const variables cannot be changed or reassigned.

Differences between var, let, and const

var	let	const
The scope of `var` variables is global	The scope of `let` variables is block scope	The scope of the `const` variable is block scope
It can be updated and re-declared within the same scope	It can only be updated but cannot be re-declared within the same scope	It can neither be updated nor re-declared in any scope
It can be declared without initialization	It can also be declared without initialization	It cannot be declared without initialization
It can be accessed without initialization as its default value is undefined	It cannot be accessed without initialization. If declared without initialization, it will give a referenceError	It cannot be accessed without initialization

// Using var
var x = 10;
console.log(x);        // Output: 10
if (true) { var x = 20; }   // the value of x is changed globally
console.log(x);        // Output: 20

// Using let
let y = 30;
console.log(y);        // Output: 30
if (true) { let y = 40; }   // the value of y is limited to this block
console.log(y);        // Output: 30

// Using const
const pi = 3.14;
console.log(pi);       // Output: 3.14
// pi = 3.14159;       // error, const variables cannot be reassigned

Understanding Data Types in JavaScript

JavaScript supports various data types which can be used to declare types for variables.

Numbers Represent numerical values like integers and decimals
String Represent string values enclosed in single or double quotes
Boolean Represents true or false values
Arrays Represents a list of values, enclosed in square brackets []
Objects Represents a collection of key-value pairs enclosed in curly braces {}

let age = 30;
console.log(typeof age);        // "number"

let name = "Piyush";
console.log(typeof name);       // "string"

let isStudent = true;
console.log(typeof isStudent);  // "boolean"

let fruits = ["apple", "banana", "orange"];
console.log(typeof fruits);     // "object" (arrays are a type of object)

let person = { firstName: "Piyush", lastName: "Kesarwani", age: 30 };
console.log(typeof person);     // "object"

Loops, iterations and array methods in LWC

Efficiently manipulating data with loops and array methods is an essential skill in JavaScript for Lightning Web Components development. To iterate over a list in LWC, we use two types of loops: for:each and iterator. Whenever we use forEach() or iterator() in LWC, we need to use the key directive on the element we are iterating. This key directive gives the unique ID for each iterating element in the loop.

1. for:each

When using the for:each directive, use for:item="currentItem" to access the current item.
To assign a key to the first element in the nested template, use the key={uniqueId} directive.
You can use for:index="index" to access the current item index; it is optional.

2. Iterator

If one wishes to add special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use the iterator directive on a template tag. Use iteratorName to access these properties:

value is the value of the item in the list. Use this property to access the properties of the array, for example iteratorName.value.propertyName
index is the index of the item in the list
first is a boolean value indicating whether this item is the first item in the list
last is a boolean value indicating whether this item is the last item in the list

Implementing Array Methods in LWC

In Lightning Web Components and Aura Components, JavaScript is used to handle various complex tasks with less code and more efficiency. In LWC, one can utilize JavaScript array methods like forEach, map, filter, some, find, etc., to handle array lists or objects very effectively.

1. push() and pop()

let fruits = ["Banana", "Orange"];
let size = fruits.push("Apple");   // returns 3
console.log(fruits);               // Banana, Orange, Apple
let element = fruits.pop();        // returns 'Apple'
console.log(fruits);               // Banana, Orange

2. shift()

let fruits = ["Banana", "Orange"];
let element = fruits.shift();
console.log(fruits);    // "Orange"
console.log(element);   // Banana

3. unshift()

let fruits = ["Banana", "Orange"];
let size = fruits.unshift('Apple');
console.log(fruits);    // Apple, Banana, Orange
console.log(size);      // 3

4. forEach()

options = [
  { label: 'Agriculture', value: 'Agriculture', show: false },
  { label: 'Banking',     value: 'Banking',     show: true  },
  { label: 'Education',   value: 'Education',   show: false },
  { label: 'Finance',     value: 'Finance',     show: true  }
];
this.options.forEach(option => { option.show = true; });

5. map()

this.options = this.options.map(opt => { return {...opt, "checked": false}; });

6. filter()

this.options.filter(element => element.label.startsWith("Ban"));

7. find()

this.options.find(element => element.label == "Banking");

8. concat()

let arr1 = ['1','2','3'];
let arr2 = ['4','5','6'];
let arr3 = arr1.concat(arr2);
console.log(arr3);

9. sort()

arr1.sort();

10. every()

let num = [1, 2, 3, 4, 5, 6];
let evenNum = num.every(function (i) { return (i % 2 == 0); });
console.log(evenNum);   // false

Synchronous vs Asynchronous Programming in LWC

Asynchronous programming is very essential for web development and offers a wide range of functionalities for Salesforce developers to build scalable and highly robust applications for their customers.

Simply put, asynchronous programming means executing multiple tasks or jobs concurrently in the background without waiting for other tasks to finish. In synchronous programming, the jobs and tasks are executed one at a time.

For example, a program can send a request to a server while handling user input and processing data, all at the same time. This way, the program can run more efficiently. To run code asynchronously in JavaScript, we can use async/await, promises, and callback methods.

JavaScript is a single-threaded programming language. That means it executes code one at a time. It will not move on to other tasks before the completion of one task.

function firstTask()  { console.log("Task 1"); }
function secondTask() { console.log("Task 2"); }
function thirdTask()  { console.log("Task 3"); }

firstTask();
secondTask();
thirdTask();

// Output:
// Task 1
// Task 2
// Task 3

Synchronous Programming

However, synchronous programming can be problematic in certain situations, particularly when dealing with tasks that take a significant amount of time to complete. For example, if a synchronous program performs a task that requires waiting for a response from a server, the program will be stuck waiting and cannot do anything else until the response is returned. This is known as blocking, and it can lead to an application appearing unresponsive or “frozen” to the user.

Asynchronous Programming

This is where asynchronous programming comes into play. Asynchronous programming in JavaScript enables the program to start a potentially long-running job and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, the program is presented with the result.

console.log("Start of script");

setTimeout(function () {
  console.log("First timeout completed");
}, 2000);

console.log("End of script");

// Output:
// Start of script
// End of script
// First timeout completed

In this example, the setTimeout() method executes a function after a specified time. The function passed to setTimeout() will be executed asynchronously, which means that the program will continue to execute the next line of code without waiting for the timeout to complete. Meanwhile, the script continues to execute the next code statement and doesn’t cause any blocking or freezing behavior.

Promise in JavaScript

In JavaScript, one can execute asynchronous code with the help of Promises, async/await, and callbacks. A Promise is, generally, an organized way of handling asynchronous tasks in JavaScript. It is like a placeholder where we tell the JavaScript engine to execute a “promise” to perform a future action and notify you once it’s completed.

Creating a Promise

To create a promise, one would need to first create its instance by calling the promise() constructor. The promise constructor calls an executor() method, which again takes two arguments as functions. These arguments are called resolve() and reject().

const promiseExample = new Promise((resolve, reject) => {
  // some code
});

The Promise has 3 states

Pending Initial state, neither fulfilled nor rejected. This is the state in which a new instance of a promise is initially created.
Fulfilled This means that an operation was completed successfully.
Rejected This means that an operation failed.

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

Async/Await in JavaScript

In Lightning Web Components, async/await are simply the constructs used for handling asynchronous programming. Async/await is built on top of promises and they are easier to handle asynchronous tasks in JavaScript. The async keyword is used to define an asynchronous function, which returns a promise. Within this function, one can use the await keyword to pause the execution of the function until a promise is resolved or rejected.

How to use async/await in LWC

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
}

In the above example, we’re using the fetch API to request an API endpoint. We’re using the await keyword to pause the execution of the function until the promise returned by the fetch API is resolved. Once the promise is resolved, we parse the response body as JSON using the response.json() method. Finally, we return the resulting data.

Common use cases for async/await

Executing HTTP requests
Waiting for an asynchronous response to finish
Processing multiple promises in parallel

import { LightningElement } from 'lwc';
import fetchData from '@salesforce/apex/FetchDataController.fetchData';

export default class MyComponent extends LightningElement {
  async connectedCallback() {
    try {
      const result = await fetchData();
      console.log(result);
    } catch (error) {
      console.error(error);
    }
  }
}

In the above example, the connectedCallback() lifecycle hook in LWC is declared as async, which allows us to use the await keyword on the fetchData() function to fetch the data from a resource while waiting for the promise to finish. The try-catch block is used to handle the error that may be caused during the execution of the code.

Error Handling in LWC

Error handling is the most crucial aspect of Lightning Web Components as it ensures that web applications handle both expected and unexpected results very efficiently and gracefully.

Handling errors on the server side

To handle errors on the server side of the application, we have to write custom code logic, generally in Apex. Apex methods can throw a variety of exceptions. These include query exceptions, DML exceptions, and general exceptions from business logic like parsing and type conversion. The best way to handle errors is to wrap them inside a try-catch block.

try {

} catch(Exception e) {
    throw new CustomException(e.getMessage());
}

public class CustomException extends Exception { }

Handling errors from wire, imperative methods and promises

In the case of wired methods in LWC, we can handle and show errors in two ways. The first is when we get data and we can check for errors in the try-catch block. Secondly, the other condition is where we get the error itself by the wire adapter.

@wire(getContactList)
wiredContacts({ error, data }) {
  if (data) {
    try {
      // logic to handle the result
    } catch (e) {
      // error when handling the result
    }
  } else if (error) {
    // error with value provisioning
  }
}

To handle imperative method errors, we use the .then() and .catch() blocks. Note: we can also use the finally() block, which will execute after every try or catch block.

getContactList()
  .then(result => {
    // logic to handle result, no try-catch needed
  })
  .catch(error => {
    // logic to handle errors
  });

One more important thing to understand is what payload options we have in the error body. The error body payload contains the below attributes:

name Indicates the type of exception thrown
message Contains the error message
stack Contains the stack trace

try {
  undefinedVariable.toString();
} catch (e) {
  console.error(e);
  console.error('e.name => '    + e.name);
  console.error('e.message => ' + e.message);
  console.error('e.stack => '   + e.stack);
}

Custom errors have a different error body structure than standard error bodies. Here are a few properties of the custom error object:

ok Specifies whether the request was successful or not
status Contains the HTTP status code of the response, for example 500 for an internal server error
statusText Contains the status message corresponding to the status code
body The response body, which varies based on the method that throws the error

// Apex
@AuraEnabled
public static Integer someMethod() {
  return 10/0;
}

// JavaScript
someMethod()
  .then(result => { /* handle result */ })
  .catch(error  => { console.error(error); });

Testing Lightning Web Components with Jest

Jest is the JavaScript testing framework used to ensure the correctness and authenticity of the JavaScript codebase. It helps to write test classes for Lightning Web Components in a comprehensive and approachable manner that gives results quickly. Jest tests work only with Lightning web components, they don’t work with Aura components.

Jest tests help to:

Test a component in isolation
Test a component’s public API (@api properties and methods, events)
Test basic user interaction (clicks)
Verify the DOM output of a component
Verify that events fire when expected

Writing a Jest test for LWC

Lightning Web Components tests are written in local JavaScript files. They have to be committed to the version control system along with the Lightning Web Components as they are not saved in Salesforce. One can use the Salesforce CLI command to create a test directory and a boilerplate test file within the directory.

sf force lightning lwc test create -f force-app/main/default/lwc/{LWCComponentName}/{LWCComponentName}.js

In Lightning Web Components, Jest frameworks run the JavaScript files in the __tests__ directory. Test files must end with .test.js

<!-- helloWorldJestTest.html -->
<template>
  <lightning-card title="Hello World" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hi, {message}</p>
      <lightning-input label="Name" value={greeting} onchange={handleChange}></lightning-input>
    </div>
  </lightning-card>
</template>

// helloWorldJestTest.js
import { LightningElement } from 'lwc';

export default class HelloWorldJestTest extends LightningElement {
  message = 'JEST Test!';

  handleChange(event) {
    this.message = event.target.value;
  }
}

<!-- helloWorldJestTest.js-meta.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>55.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

// helloWorldJestTest.test.js
import { createElement } from 'lwc';
import HelloWorldJestTest from 'c/helloWorldJestTest';

describe('c-hello-world-jest-test', () => {
  afterEach(() => {
    while (document.body.firstChild) {
      document.body.removeChild(document.body.firstChild);
    }
  });

  it('To Display message', () => {
    const element = createElement('c-hello-world-jest-test', {
      is: HelloWorldJestTest
    });
    document.body.appendChild(element);

    const div = element.shadowRoot.querySelector('div');
    expect(div.textContent).toBe('Hi, JEST Test!');
  });
});

Run the test with the command below in the VS Code terminal:

npm run test:unit -t helloWorldJestTest.test.js

Understanding the structure of the Jest framework in LWC

Imports The test imports the createElement method. Code must import the component to test later to create the component under test.
Describe block This block defines a test suite. A test suite contains one or more tests that belong together from a functional point of view.
Reset the DOM with afterEach() The Jest afterEach() method resets the DOM at the end of each test. Every test has a single instance of DOM, known as jsdom, and changes aren’t reset between tests. As a best practice it’s important to clean up between tests so that one test’s output doesn’t affect another.
it() block The it() block is an alias for a test and is used to describe a single test. A test represents a single functional unit that you want to test.
beforeEach() and afterEach() If we have to execute test classes before or after test cases, then we can use the beforeEach() and afterEach() blocks.
Create test component The createElement() method is used to create an instance of the component to test.
Add test component to the DOM The appendChild() method is used to insert the component into the DOM, and the connectedCallback() and renderedCallback() methods are called.
Asserts Finally, the expect statement is an assertion of a success condition.

Curated byPiyush KesarwaniSalesforce Developer