Important method of JavaScript in lwc

This blog will help to provide standard javascript method that’s will use regularly bases due to LWC development. These methods will reduce complexity of development.  LINK

ARROW FUNCTION:-

Arrow functions allow you to retain the scope of the caller inside the function.
The value of “this” inside a function can’t be changed. It will be the same value as when the function was called.

Example:-

Regular function:-

function cal(x,y){
    let Total = x+y; 
}

Arrow function:-

let cal= (x,y) => {
    let Total = x+y;
}

The main difference between the Regular function and Arrow function is scope of ‘THIS’ keyword.

In Regular functions, THIS keyword represents the Object that called the function, which could be the window, the document, a button or whatever.

In Arrow function, THIS keyword represents the Object that defined the arrow function.

If you have a function inside another function, like below, scope of THIS will be lost. See below code,

var employee = {
                 id:0121,
				 Name:'David':
				 TotalWork : function(){
				 setTimeOut(function(){
					console.log(this.Name) // undefined
				 },500);		   
				 }
				}
employee.TotalWork();	

Inside setTimeout method, we are passing another function and print the Name property. But you can see, we got undefined instead of Name. because scope lost in another method.

var employee = {
                 id:0121,
				 Name:'David':
				 TotalWork : function(){
				 setTimeOut(() => {
					console.log(this.Name) // David
				 },500);		   
				 }
				}
employee.TotalWork();

As per above example ARROW FUNCTION always refers to the Object that defined the function. so we can get THIS inside arrow method.

For Next Java script methods we will follow below data:-

const employees= [
        {name: 'David', id: 001, department:'Accounts', Salary : 70k},
        {name: 'mark', id: 002, department:'Admin', Salary : 100k},
        {name: 'Petter', id: 003, department:'Housekeeping', Salary : 90k},
        {name: 'Williom', id: 004, department:'Accounts', Salary : 80k},
        {name: 'John', id: 005, department:'Admin', Salary : 100k},
        {name: 'Sabari', id: 006, department:'General', Salary : 50k},
];

MAP():

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. Benefit of this method is it does not alter the original array.

MAP example with Regular method

let employeeUsingFunction = employees.map(function(employee){
	return employee.name;
});

RESULT:-
Array ["David", "mark", "Petter", "Williom", "John", "Sabari"]

MAP example with ARROW method

//example 1
let employeeUsingArrowFunction = employees.map(employee => {
	return employee.name;
});

//example 2
if there is only one statement to execute then skip {} too.
let employeeUsingArrowFunction = employees.map(employee => employee.name);

filter() :-

filter() method creates a new array with all elements that pass the filter condition implemented by the provided function.

For example, if we want filter all Employees whose Salary more than 70K.

 let employeeList = employees.filter(employee=> employee.Salary> 70k);
        console.log(employeeList);

> Array [Object {name: 'mark', id: 002, department:'Admin', Salary : 100k},
        {name: 'Petter', id: 003, department:'Housekeeping', Salary : 90k},
        {name: 'Williom', id: 004, department:'Accounts', Salary : 80k},
        {name: 'John', id: 005, department:'Admin', Salary : 100k}]

Object.assign(….)

This is very useful method when you want to add new attribute in existing record object, suppose that you want add Phone attribute with mark record

let markRecord = {name: ‘mark’, id: 002, department:’Admin’, Salary : 100k}

let updatedMarkRecord: – Object.assign({Phone: ‘12354587’},markRecord );

Result:-

{phone: ‘12354587’ ,name: ‘mark’, id: 002, department:’Admin’, Salary : 100k}

find()

find() method returns the value of the first element in the provided array that satisfies the provided testing function. below example using for search by employee name:-

let markrecord = employees.find(employee=> employee.name = 'mark');
console.log(markrecord);

Result:-
 {name: 'mark', id: 002, department:'Admin', Salary : 100k} 

uniquesybmol