Hello, friends today we will discuss some Useful JavaScript methods in LWC Salesforce. We will learn about ES6 features that are useful when working with Lightning web components in this post. First of all, you will think about Higher Order functions. Now let’s discuss them.
Also check this: Sticky Header in LWC Salesforce
1. forEach method in LWC:
This method is used for iterating the element from an array object. Array.prototype.forEach()
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleForEach(){
let studentsForEach = this.students.forEach(ele=>{
console.log(ele.name);
console.log(ele.favsubject);
});
}
}
2. map() method in LWC:
This map() method is used for creating a new array with an existing array object. you can use this method in two ways.
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleMap(){
const map1 = this.students.map(ele =>{
if(ele.percentage > 95){
return ele;
}
});
console.log(map1);
}
handleMap2(){
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(ele => ele * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
}
}
3. filter() method in LWC:
This filter() method is used to filter the existing data and create a new one. We can filter the data by given property in an existing array object.
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleFilter(){
// this will filter the array object which percentage greater then 95
let filtrData = this.students.filter(ele => ele.percentage > 95);
console.log(filtrData);
}
}
4. find() method in LWC:
The find() method returns the first element in the provided array that satisfies the provided testing function. If no values meet the testing function, undefined is returned.
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleFind(){
let findRijwanRecord = this.students.find(ele => ele.name === 'Rijwan');
console.log(findRijwanRecord);
}
}
5. slice() method in LWC:
This slice() method is used to slice the existing array. We mainly use this method on pagination in LWC Datatable where we need to show data in chunks.
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleSlice(){
//To generate an array with first three elements
let studentsSliceArray = this.students.slice(0, 3);
console.log(studentsSliceArray);
}
}
6. reduce() method in LWC:
This reduce() method returns the single value resulting after reducing the array. This is used for validation or sum of data in LWC.
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleSort(){
const array1 = [12, 23, 43, 74];
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);
console.log(sumWithInitial);
}
}
7. sort() method in LWC:
This sort() method sorts the elements of an array in place and returns the sorted array. The default sorting order is ascending.
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleSort(){
let sortByRank = students.sort((a, b) =>{
return (a.rank > b.rank ? -1 : 1);
});
console.log(sortByRank);
}
}
8. JSON.stringfy() method in LWC:
This JSON.stringfy() method used to convert Javascript objects to strings.
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleJSONStringfy(){
let stringObject = JSON.stringify(this.students);
console.log(stringObject);
}
}
9. JSON.parse() method in LWC:
We use this JSON.parse() method to convert the JSON string to a Javascript object, as per the JSON string.
import { LightningElement } from 'lwc';
export default class LWCUsefulMethod extends LightningElement {
students = [
{name: 'Rijwan', id: 1, favsubject:'Science', rank: 1, percentage: 98},
{name: 'Himanshu', id: 2, favsubject:'Maths', rank: 3, percentage: 96},
{name: 'Sachin', id: 3, favsubject:'Chemistry', rank: 2, percentage: 97},
{name: 'Ankit', id: 4, favsubject:'Physics', rank: 4, percentage: 95},
{name: 'Dev', id: 3, favsubject:'English', rank: 2, percentage: 93},
];
handleJSONParse(){
let stringObject = JSON.stringify(this.students);
let array = JSON.parse(stringObject);
console.log(array);
}
Reference :
What’s your Reaction?
+1
2
+1
+1
+1
+1
1
+1
Total views : 953791