Array Methods In LWC

The most commonly used array methods in Salesforce Lightning Web Components:

1. map() - Creates a new array by calling a function on each element of the original array.

const originalArray = [1, 2, 3, 4, 5];

const mappedArray = originalArray.map(function(element) {

  return element * 2;

});

console.log(mappedArray); 

// Output: [2, 4, 6, 8, 10]

2. filter() - Creates a new array with all elements that pass a test implemented by the provided function.

const originalArray = [1, 2, 3, 4, 5];

const filteredArray = originalArray.filter(function(element) {

  return element > 3;

});

console.log(filteredArray); 

// Output: [4, 5]

3. reduce() - Executes a reducer function that returns a single value based on the elements of the array.

const originalArray = [1, 2, 3, 4, 5];

const reducedValue = originalArray.reduce(function(accumulator, currentValue) {

  return accumulator + currentValue;

});

console.log(reducedValue); 

// Output: 15

4. forEach() - Calls a function on each element of the array.

const originalArray = [1, 2, 3, 4, 5];

originalArray.forEach(function(element) {

  console.log(element * 2);

});

// Output:

// 2

// 4

// 6

// 8

// 10

5. find() - Returns the first element in the array that satisfies the provided test function.

const originalArray = [1, 2, 3, 4, 5];

const foundElement = originalArray.find(function(element) {

  return element > 3;

});

console.log(foundElement); 

// Output: 4

6. findIndex() - Returns the index of the first element in the array that satisfies the provided test function.

const originalArray = [1, 2, 3, 4, 5];

const foundIndex = originalArray.findIndex(function(element) {

  return element > 3;

});

console.log(foundIndex); 

// Output: 3

7. every() - Returns true if every element in the array satisfies the provided test function.

const originalArray = [1, 2, 3, 4, 5];

const allElementsAreGreaterThanZero = originalArray.every(function(element) {

  return element > 0;

});

console.log(allElementsAreGreaterThanZero); 

// Output: true

const allElementsAreGreaterThanFour = originalArray.every(function(element) {

  return element > 4;

});

console.log(allElementsAreGreaterThanFour); 

// Output: false

8. some() - Returns true if at least one element in the array satisfies the provided test function.

const originalArray = [1, 2, 3, 4, 5];

const atLeastOneElementIsGreaterThanFour = originalArray.some(function(element) {

  return element > 4;

});

console.log(atLeastOneElementIsGreaterThanFour); 

// Output: true

const atLeastOneElementIsGreaterThanSix = originalArray.some(function(element) {

  return element > 6;

});

console.log(atLeastOneElementIsGreaterThanSix); 

// Output: false

9. slice() - Returns a shallow copy of a portion of the array into a new array object selected from begin to end.

const originalArray = [1, 2, 3, 4, 5];

const slicedArray = originalArray.slice(2, 4);

console.log(slicedArray); 

// Output: [3, 4]

10. entries() - Returns an array iterator object that contains the key/value pairs for each element in the array.

const originalArray = [1, 2, 3, 4, 5];

const iterator = originalArray.entries();

for (const [index, element] of iterator) {

  console.log(`Index: ${index}, Element: ${element}`);

}

// Output:

// Index: 0, Element: 1

// Index: 1, Element: 2

// Index: 2, Element: 3

// Index: 3, Element: 4

// Index: 4, Element: 5