Javascript for Lightning Web Component | Salesforce Lightning

Lightning Web Component is an updated web standards-based framework method for creating lightning components on the Salesforce platform. LWC is built using HTML, CSS, and Javascript. It uses core web component standards and the latest ECMAScript 6,7,8,9 and beyond. 

Just like reactJS and angularJS are used for web technology similarly LWC framework is used for Salesforce front-end development. 

LWC pre-requisites: 

1. HTML 
2. CSS 
3. JavaScript 

Let's take a look at JavaScript required for LWC:- 

VAR, LET and CONST

VAR – Var is globally scoped, it can be updated as well as re-declared but it has hoisting issues in javascript. 

LET – Let is block scoped, it can be updated but not re-declared inside the same block and it solves hoisting issues. 

CONST – Const is also block-scoped, it can neither be updated nor re-declared inside the same block and it solves hoisting issues as well. 

Hoisting

It is a mechanism in javascript in which variable and function declaration are moved to the top of their scope before code execution. 

Don't forget to check out: Learn About Salesforce Lightning Web Components

Arrow Function

Arrow function allows us to write shorter function syntax. In regular functions, this keyword represented the object that is called the function, which could be the window, the document, or whatever. With arrow functions, this keyword always represents the object that defined the arrow function. 

Spread Operator

The operator’s shape is three consecutive dots and is written as: 

Usages of the spread operator:

1. Expanding Arrays – content get expanded and thrown out of array. 
2. Expanding String – convert string into list of array. 
3. Combining Arrays – combine array or add value to array. 
4. Combining Object – combine object or add value to object. 

Destructuring

The two most used data structures in JavaScript are object and array 

Destructuring is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient. 

Export and Import JS modules 

Exporting – To export, we use the export keyword. 

Different ways of exporting:

1. Export member  individually 
2. Export together 
3. Export with Alias 
4. Default export 

Importing – To import use the import keyword, members to be imported in curly brackets and then the location of modules relative to the current file. 

Different ways of importing:

1. Importing with alias 
2. Importing all exported members 
3. Imported module with a default member 

Check out another amazing blog by Bhawana here: Data Manipulation and Error Handling in Salesforce

QuerySelector()

This method returns the first child element that matches a specified CSS selector of an element. 

QuerySelectorAll()

This method returns a collection of an element’s child elements that match a specified CSS selector, as a static NodeList object. 

Don’t use ID selectors with query selectors and don’t use the window or document global properties to query for DOM elements. 

Fetch API

The fetch API is a simple interface for fetching resources. Fetch makes it easier to make web requests and handle responses than with the older XMLHttpRequest which often requires additional logic.