These 15 topics you should learn for LWC –
- Variables
- Data types
- null vs undefined
- Spread Operator
- String Interpolation
- String Methods
- Object methods
- Array methods
- Promises
- Arrow function
- Destructuring
- Modules import and export
- Events
- SetTimeout vs setInterval
- QuerySelectors
1. Variables:
- var, let and const are the reserved keyword to declare a variable.
- Variables are containers for storing values.
- A variable declared without a value will have the value undefined.
- let variable can be updated but not re-declared.
- const varible can neither be updated nor re-declared.
| Keyword | var | let | const |
|---|---|---|---|
| Global Scope | Yes | No | No |
| Function Scope | Yes | Yes | Yes |
| Block Scope | No | Yes | Yes |
| Can be reassigned | Yes | Yes | No |
When to Use var, let, or const?
- Always use const if the value should not be changed
- Always use const if the type should not be changed (Arrays and Objects)
- Only use let if you can’t use const
- Only use var if you MUST support old browsers.
Note: Use const when you declare:
- A new Array
- A new Object
Note: The keyword const is a little misleading, It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
- Reassign a constant value
- Reassign a constant array
- Reassign a constant object
But you CAN:
- Change the elements of constant array
- Change the properties of constant object
2. Data types:
There are 8 basic data types in Js.
- Number
- Bigint
- String
- Boolean
- Undefined
- Null
- Symbol
- Object
Note:
- Rest all types are Object in Some form- Array, Date, Math, String etc.
- JavaScript Types are Dynamic :
let a; // Now x is undefined
a = 10; // Now x is a Number
a = “Test”; // Now x is a String
3. null vs undefined
| SN | null | undefined |
|---|---|---|
| 1. | Variable is declared but not initilized or assigned any value then it automatically initilized to undefined | null represent nothing or empty or values unknown, it is assigned explicitly. |
| 2. | typeOf undefined is undefined | typeOf null is object |
4. Spread(…) Operator:
Uses of Spread Operator
- Expanding String- Converting string into list of Array.
- Combining Arrays- Combine array or add value to array.
- Combining Object- Combine object or add value to object.
- Creating New Shallow Copy of Arrays and Objects
5. String Interpolation:
String interpolation allows you to embed expressions in the string.
Examples:
var a = 5, var b=5;
console.log(`The sum of ${a} and ${b} is ${a+b}`);
console.log(`http://salesforce.com/${recordId}`);
6. String methods:
Some most commonly used string methods in LWC:
- includes()
- indexOf()
- startsWith()
- slice()
- toLowerCase()
- toUpperCase()
- trim()
7. Object methods:
- Object.keys()
- Object.values()
- JSON.stringify()
- JSON.parse()
8. Array methods:
Some most commonly used array methods in LWC:
- map()
- every()
- filter()
- some()
- sort()
- reduce()
- forEach()
9. Promises:
Promise is an object that may produce a single value sometime in the future.
Promise are used to handle asynchronous operations in Js.
Promise has three states:
- pending()
- fulfilled()
- rejected()
Use case from LWC point of View:
1. Fetching data from server
2. Loading file from system
References to better understand: