JavaScript for LWC: Array Methods

Array in JavaScript is most fundamental and widely used data structure. It allows to store multiple values in single variable. Arrays can hold various data types such as string, number, object and other array too. Each element in an array associated with a specific integer index. Index starts from 0. Knowing various array methods is essential to manipulate array, increasing efficiency and readability. Please ensure you have a good command over Arrow functions.

Array Methods

map() method

array.map() method generally used to transform an array by calling a function on each element. It returns a new array with transformed values.

Syntax

array.map(callbackfn(element, index, array){},this)

Example of array.map() method

const numbers = [1, 2, 3, 4];
const fourtimes = numbers.map(no => no * 4);
console.log(fourtimes);

above example will work like below

const numbers = [1, 2, 3, 4];
const fourtimes = numbers.map(function(element, index, array){
    console.log('element '+element + ' of array '+numbers+' present at '+index);
    return element * 4;
},this);
console.log(fourtimes);

Output

element 1 of array 1,2,3,4 present at 0
element 2 of array 1,2,3,4 present at 1
element 3 of array 1,2,3,4 present at 2
element 4 of array 1,2,3,4 present at 3
[ 4, 8, 12, 16 ]

filter() method

array.filter() method used to create a subset of array which passes a given condition. It will iterate through all the elements and apply test condition on them.

Syntax

array.filter(callbackfn(element, index, array),this)

Example of array.filter() method

const numbers = [8, 12, 10, 50, 5];
const smallNos = numbers.filter(num => num < 10);
console.log(smallNos);

above example is similar to below code

const numbers = [8, 12, 10, 50, 5];
const smallNos = numbers.filter(function(element, index, array){
    console.log('element '+element+' present in array '+ numbers +' at '+index);
    return element < 10;
},this);
console.log(smallNos);

Output

element 8 present in array 8,12,10,50,5 at 0
element 12 present in array 8,12,10,50,5 at 1
element 10 present in array 8,12,10,50,5 at 2
element 50 present in array 8,12,10,50,5 at 3
element 5 present in array 8,12,10,50,5 at 4
[ 8, 5 ]

find() method

array.find() method returns the first element which satisfies the given condition

Syntax

array.find(callbackfn(element, index, array),this)

Example of array.find() method

const arr = [3, 12, 8, 100, 50];
const found = arr.find((element) => element < 10);
console.log(found);

const arr = [3, 12, 8, 100, 50];
const found = arr.find(function(element, index, array){
    return element < 10
},this);
console.log(found);

Output

3

reduce() method

array.reduce() method transforms array into a single value. It iterates over each element in an array applying a function that accumulates a result.

Syntax

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

Example of array.reduce() method to calculate average of array

const nos = [15, 20, 25, 40, 50];
const average = nos.reduce((accumulator, currentValue,index, array) => accumulator + currentValue / array.length, 0);
console.log(average);

Output

30

some() method

array.some() method returns true if any of the element passes the condition. If any of the element found which satisfies the condition it stops to iterate over further elements.

Syntax

array.some(callbackfn(element, index, array),this)

Example of array.some() to check for specific element

const fruits = ["apple", "banana", "mango", "berries"];
const hasMango = fruits.some(fruit => fruit === "mango");
console.log(hasMango);

const fruits = ["apple", "banana", "mango", "berries"];
const hasMango = fruits.some(function(element, index, array){
    console.log('element '+element+' of array '+ array+' at '+index)
    return element === 'mango'
},this);
console.log(hasMango);

Output

element apple of array apple,banana,mango,berries at 0
element banana of array apple,banana,mango,berries at 1
element mango of array apple,banana,mango,berries at 2
true

forEach() method

array.forEach() method is used to execute function on every single element in an array. It returns undefined .

Syntax

array.forEach(callbackfn(element, index, array),this);

Example of array.forEach() method

const animals = ["tiger", "lion", "human", "crocodile"];
animals.forEach((animal, index) => {
  console.log(`position ${index}: ${animal}`);
});

Output

position 0: tiger
position 1: lion
position 2: human
position 3: crocodile

JavaScript array methods are essential tools in LWC for data transformation. These are some of the most frequently used methods but, there are more methods which may need in some scenarios. Use these methods to streamline data handling, enhance component behavior and create smooth user experience in salesforce.