Useful JavaScript's methods in LWC and Lightning Component - Part I

Both LWC and Aura Components contain significant amount of JavaScript. Aura Component supports ES5 syntax and ES6 promises whereas LWC supports ES6 modules.

if you know how to process list or array in javascript, then calling server side method (apex methods) for sorting and processing is not required. The lightning component will also become fast. In this blog, I am gonna list some useful array methods with example.

1. Push and pop - push is used to add data and pop is used to remove the last data in array.

push method returns the total size of array, and pop returns the removed element.

let fruits = ["Banana", "Orange"];
let size = fruits.push("Apple"); // return 3 to size
console.log(fruits); // print Banana, Orange, Apple
let element = fruits.pop(); // returns 'Apple' to element
console.log(fruits); //print Banana, Orange

2. shift - while pop remove element from last, shift remove element from beginning. This method returns the shifted element.

let fruits = ["Banana", "Orange"];
let element = fruits.shift();
console.log(fruits); // print "Orange"
console.log(element) // print Banana

3. Unshift - This is similar to push, but it pushes element in the beginning. Method returns the total number of element right now in array.

let fruits = ["Banana", "Orange"]; 
let size= fruits.unshift('Apple');
console.log(fruits); // print Apple, Banana, Orange
console.log(size);// print 3

4. delete an index - because in javascript array are treated as object, so array element can be directly delete.

let fruits = ["Banana", "Orange"];
delete fruits[0];

A word of caution, now the first element is deleted, the array won't shift its element and when you try to access 0th element, it will be undefined and not "orange".

console.log(fruits[0]); // print undefined
console.log(fruits[1]); // print  Orange

5. Splice - You can use this method to add item anywhere in array.

example 1-

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
// First param defines the location where elements to be added
// second parameter defines the number of item to be deleted
// and rest of parameter defines the elements to be added to array.
console.log(fruits)// print "Banana", "Orange","Lemon", "Kiwi", "Apple", "Mango"

example 2-

let fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.splice(2, 2, "Lemon", "Kiwi");
console.log(fruits)// print Banana,Orange,Lemon,Kiwi

You can use splice to remove element as well.

fruits.splice(0, 1); //removes the first element

6. concat - This method is useful, when you want to merge two arrays.

let arr1 = ['1', '2', '3'];
let arr2 = ['4', '5', '6'];
let arr3 = arr1.concat(arr2);
console.log(arr3);

7. slice - This method cuts a piece of array to new array.

let arr1 = ['1', '2', '3', '4', '5', '6'];
let arr2 = arr1.slice(3);
console.log(arr2)// print 4, 5, 6

8. sort - to sort an array.

arr1.sort();

9. reverse - reverse the element in an array.

arr1.reverse();

10. Every() - The every() method tests whether all element in the array passes the test implemented by the provided function. It returns a Boolean value.

This javascript's array provides a method that tests every element in an array.

This method will extract each element one by one and process it.

let num = [1,2,3,4,5,6];
let evenNum = num.every(function (i){
return (i%2 == 0);
});
console.log(evenNum);//print false

In this example we tested that each element of array is even vaule or not.

The callback function can take 3 parameters.

num.every(function(currentElement, index, array){});

First param is currentElement. Index is the index of current element and array is the array on which this function is being called which is "num".

11. Some() - The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

let num = [1,2,3,4,5,6]; 
let evenNum = num.some(function (i){ return (i%2 == 0); }); console.log(evenNum);//print true

I have covered only array method in this blog. I am gonna post some more frequently used JS function.

Please Like, comment and subscribe to sfdcblogs.com.