Notes
As a Salesforce Administrator, I want to understand JavaScript array methods using Lightning Web Components (LWC) so that I can enhance my development skills and improve my custom Salesforce applications.
Description:
In this user story, we aim to create a Lightning Web Component (LWC) that demonstrates various JavaScript array methods. Each method will be executed by clicking a corresponding button, and the result of each method will be displayed below the button. This will help Salesforce Administrators and Developers to understand and visualize the behavior of JavaScript array methods within the context of a Salesforce application.
Acceptance Criteria:
- The component must display a series of buttons, each corresponding to a different JavaScript array method.
- Each button must execute the associated array method on a predefined array
[3, 4, 5, 6] when clicked.
- The result of each method execution must be displayed below the respective button.
- The component must be easily deployable and configurable within a Salesforce Lightning App, Record, or Home Page.
ArrayMethodsDemo.html
<template>
<lightning-card title="JavaScript Array Methods in LWC" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<div style="font-size:larger">{finalResult}</div>
<div>
<lightning-button label=".at(1)" onclick={handleAt}></lightning-button>
Display the element at index 1
</div>
<div>
<lightning-button label=".pop()" onclick={handlePop}></lightning-button>
</div>
<div>
<lightning-button label=".push(7)" onclick={handlePush}></lightning-button>
</div>
<div>
<lightning-button label=".fill(1)" onclick={handleFill}></lightning-button>
</div>
<div>
<lightning-button label=".join('-')" onclick={handleJoin}></lightning-button>
</div>
<div>
<lightning-button label=".shift()" onclick={handleShift}></lightning-button>
</div>
<div>
<lightning-button label=".reverse()" onclick={handleReverse}></lightning-button>
</div>
<div>
<lightning-button label=".unshift(1)" onclick={handleUnshift}></lightning-button>
</div>
<div>
<lightning-button label=".includes(5)" onclick={handleIncludes}></lightning-button>
</div>
<div>
<lightning-button label=".map(num => num + 6)" onclick={handleMap}></lightning-button>
</div>
<div>
<lightning-button label=".find(num => num > 4)" onclick={handleFind}></lightning-button>
</div>
<div>
<lightning-button label=".filter(num => num > 4)" onclick={handleFilter}></lightning-button>
</div>
<div>
<lightning-button label=".every(num => num > 5)" onclick={handleEvery}></lightning-button>
</div>
<div>
<lightning-button label=".findIndex(num => num > 4)" onclick={handleFindIndex}></lightning-button>
</div>
<div>
<lightning-button label=".reduce((acc, num) => acc + num, 0)" onclick={handleReduce}></lightning-button>
</div>
</div>
</lightning-card>
</template>
ArrayMethodsDemo.js
import { LightningElement, track } from 'lwc';
export default class ArrayMethodsDemo extends LightningElement {
@track finalResult;
arr = [3, 4, 5, 6];
handleAt() {
this.finalResult = JSON.stringify(this.arr.at(1));
}
handlePop() {
const result = [...this.arr];
result.pop();
this.finalResult = JSON.stringify(result);
}
handlePush() {
this.finalResult = JSON.stringify([...this.arr, 7]);
}
handleFill() {
this.finalResult = JSON.stringify(new Array(this.arr.length).fill(1));
}
handleJoin() {
this.finalResult = JSON.stringify(this.arr.join('-'));
}
handleShift() {
const result = [...this.arr];
result.shift();
this.finalResult = JSON.stringify(result);
}
handleReverse() {
this.finalResult = JSON.stringify([...this.arr].reverse());
}
handleUnshift() {
this.finalResult = JSON.stringify([1, ...this.arr]);
}
handleIncludes() {
this.finalResult = JSON.stringify(this.arr.includes(5));
}
handleMap() {
this.finalResult = JSON.stringify(this.arr.map(num => num + 6));
}
handleFind() {
this.finalResult = JSON.stringify(this.arr.find(num => num > 4));
}
handleFilter() {
this.finalResult = JSON.stringify(this.arr.filter(num => num > 4));
}
handleEvery() {
this.finalResult = JSON.stringify(this.arr.every(num => num > 5));
}
handleFindIndex() {
this.finalResult = JSON.stringify(this.arr.findIndex(num => num > 4));
}
handleReduce() {
this.finalResult = JSON.stringify(this.arr.reduce((acc, num) => acc + num, 0));
}
}
