In this chapter we will learn about JavaScript ES6 in LWC. LWC is using the core concept of web standards, and JavaScript is the main programming or scripting language to handle web applications.
LWC uses ES6(2015), ES7(2016), ES8(2017), ES9(2018), ES10(2019), and ES11(2020) versions of JavaScript, which are the modern version of JavaScript.
Tasks handled by JavaScript:
Below tasks are handled by JavaScript in LWC due to which it’s giving better performance and security
- Shadow Down
- Web Components
- Custom elements
- Modules
- Events
- Standard elements
- Rendering
- Templates
- Slots
1. JavaScript ES6 Datatypes
Var/Let/Const: We will be going through these datatypes one by one
What is the var Variable in JS?
Var variable is the old way to declare a variable in javascript.
var variable has the function scope but global scope when it is declared outside the function.
Example of var variable with function scope:
function myFun() {
var myName = "Ajit Singh";
console.log('display:'+myName);
}
myFun();//output=>Ajit Singh
console.log(myName); //output=>ReferenceError: myName is not defined
What is the Let variable in JS?
The new version of javascript (ES6) introduces two new methods of declaring variables in javascript, and one method was using the let keyword to declare variables.
Here is an example of let variable declaration –
let myName = “Ajit Singh”;
Let variable introduce a special feature that does not allow re-declaration of variables,
Scope of let variable
The let variable has block scope, meaning let variable will be accessible only inside the block it’s declared if we try of access outside of the scope, it will show a Reference Error.
let herAge = 25;
if(herAge > 18) {
let herName = "Radha";
console.log(herName) //output => "Radha"
}
console.log(herName); //output => ReferenceError
What is the Const variable in JS?
The new version of javascript (ES6) introduces two new methods of declaring variables in javascript, one was using the const keyword to declare constant variables.
Example of const variable:
const myName = “my name”;
Const Variables cannot be updated or re-declared
const myName = “Ajit Singh”;
myName = Dr Ajit Singh”;
console.log(myName); //TypeError: invalid assignment to const ‘myName’
Difference between Var, Let, and Const
|
2. ARROW FUNCTION
Arrow functions which are also called “fat arrow” functions are new way of writing function in Java Script. They were introduced by ES6 specifications.
Instead of the function keyword, arrow function uses an arrow (=>) made up of an equal sign and a greater-than character.
// ES6 Arrow function example
let multiply = (a, b) => { return a * b };
// ES6 Arrow function with one argument
let triple = n => n * 3;
alert( triple(4) ); // 12
// ES6 Arrow function with no argument
// ES5 Regular function
function sayHello () {
return alert(“Hello!”);
}
sayHello();
// ES6 Arrow function
let sayHello = () => alert(“Hello!”);
sayHello ();
Arrow functions:
- Do not have this
- Do not have arguments
- Can’t be called with new
3. Spread operator
Syntax (…)
Spread operators basically create a new array with the existing array.
const data1=["Ajit","Sujit","Aayush"]; const data2=["Bangalore","Delhi"]; const data3=["Sofa"]; const data4= [data1, data2, data3]; console.log(data4); // (3) [Array(3) , Array(2),Array(1)] const data5= [...data1, ...data3]; console.log(data5); // ["Ajit", "Sujit", "Aayush", "Sofa"]
4. PROMISE
Promise is the concept which makes our job easy to write complicated code in async programming. It also removes the callback issue.
Promise is an Object which has the ‘then’ and ‘catch’ methods on it. One of these methods gets called when the promise returns a value or error.
- It is nothing but wait for the things to come back and when it will come back then do something with them with this approach it promises that it will wait for the things to come back.
- It represents eventually completion and failure of the task.
- It uses .then() .catch(). finally() to handle promise result.
- This is just like lightning component that what to do with a response like if success then what to do and if its error then what to do.
A promise is simply an object which is instantiated with the new keyword and we pass in a function that takes two arguments: resolve and reject.
We say the function was successful by saying the promise resolved, and unsuccessful by saying the promise rejected.
const myPromise = new Promise(function(resolve, reject) {
});
console.log(myPromise);
Let’s understand the concept through another example.
return new Promise((resolve, reject) => {
if(Successful) {
resolve()
} else {
reject();
}
});
5. ASYNC AND AWAIT
The await keyword is used inside an asynchronous function to pause the execution of the function until a specified asynchronous operation has completed.
It can only be used inside an async function, and it can only be used to wait for a value that is returned by an asynchronous operation.
Here’s an example of how async/await works in JavaScript:
async function getBlogData() {
const response = await fetch(‘https://sfdc4u.com/category/blog);
const data = await response.json();
console.log(data);
}
getBlogData ();
In the above example, the getData function makes an HTTP request to the https://sfdc4u.com/category/blog endpoint using the fetch function. The await keyword is used to pause the execution of the function until the Promise returned by fetch is resolved. Once the Promise is resolved, the response is stored in the response variable, and the await keyword is used again to pause the execution of the function until the Promise returned by response.json() is resolved.
Reference – Javascript in LWC
Read more: First Hello World Project using LWC