12 Must-know Javascript Concepts for LWC : A guide for Salesforce Developers

// Normal function
connectedCallback() {
  sortContactRecords() {
    this.records.sort(function (Con1, Con2) {
      return Con1.age - Con2.age; // Sort by age
    });
    console.log('Sorted Contacts:', this.records);
  }
}

// Arrow function
connectedCallback() {
  sortContactRecords() {
    this.records.sort((Con1, Con2) => Con1.age - Con2.age); // Arrow fun. preserves 'this'
    console.log('Sorted Records:', this.records);
  }
}

// Destructuring function parameters
handleContactUpdate({ detail: { id, name, email } }) {
    // Use id, name, and email directly
    this.updateContact(id, name, email);
}

// Array destructuring
const [firstName, lastName] = fullName.split(' ');

// Nested destructuring
const { contact: { Id, Name, Email } } = event.detail;

// --------- Spread Operator  -----------------------
// Creating a new array with additional items
const baseContacts = ['John', 'Jane'];
const allContacts = [...baseContacts, 'Mike', 'Sarah'];

// Copying arrays or objects (shallow copy)
const contactsCopy = [...this.contacts];
const contactDetailsCopy = { ...this.contactDetails };

//--------------Rest operator -------------------------
// Rest parameter in function definition
export function formatNames(firstContact, ...otherContacts) {
    // firstContact is a single item
    // otherContacts is an array of the remaining items
    return firstContact.toUpperCase() + ', ' + otherContacts.join(', ');
}

// Rest pattern in destructuring
const [primary, secondary, ...remaining] = this.contactList;

// 1.map() :- Creates a new array where each element is transformed by the provided function.
let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(num => num * num); //uses arrow functions inside map
console.log(squared); // [1, 4, 9, 16, 25]

// 2.filter() :- Creates a new array with only the elements that match filter criteria.
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

// 3.reduce() :- Reduces the array to a single value by applying the function to each element.
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

// 4.forEach() :- Executes function on each array element but does not return a new array.
let numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2)); 
// Output: 2, 4, 6, 8 (prints each number multiplied by 2)

// 5.includes() :- checks if the array contains a certain element.
let numbers = [1, 2, 3, 4, 5];
let hasThree = numbers.includes(3);
console.log(hasThree); // true

// 6.concat() :- combines arrays into one new array.
let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]

import { LightningElement } from 'lwc';

export default class CartComponent extends LightningElement {
    @api items = []; // Array to hold items
    @track totalValue = 0; // Total value of items in the cart

    // Getter for total value
    get cartTotal() {
        return this.items.reduce((total, item) => total + item.price, 0);
    }

    // Setter for adding item to cart
    set addItem(item) {
        if (item && item.name && item.price > 0) {
            this.items = [...this.items, item]; // Add item to the cart
            this.totalValue = this.cartTotal; // Update the total value
        } else {
            console.error('Invalid item');
        }
    }

    // Method to handle adding item
    handleAddItem(event) {
        const newItem = {
            name: event.target.name,
            price: parseFloat(event.target.value),
        };
        this.addItem = newItem; // This triggers the setter
    }

    getCartMessage() {
        return `Total Items: ${this.items.length}, Total Value: ${this.cartTotal}`;
    }
}

// in below function we title is default parameters
formatName(firstName, lastName = '', title = 'Mr./Ms.') {
    return `${title} ${firstName} ${lastName}`.trim();
}
// Usage
this.formatName('John', 'Doe');       // "Mr./Ms. John Doe"
this.formatName('Jane', 'Smith', 'Dr.'); // "Dr. Jane Smith"
this.formatName('Alice');             // "Mr./Ms. Alice"

import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {
    @api accounts;
    error;
  
    connectedCallback() {
        getAccounts()
            .then(result => {
                this.accounts = result;
                this.error = undefined;
            })
            .catch(error => {
                this.error = error;
                this.accounts = undefined;
            });
    }
}

import { LightningElement } from 'lwc';
import getData from '@salesforce/apex/DataController.getData';

export default class AsyncAwaitExample extends LightningElement {
    data;
    error;

    async handleFetchData() {
        try {
            // Using async/await with Apex
            this.data = await getData();  // Awaiting the promise
        } catch (error) {
            this.error = error.body.message;  // Handle error
        }
    }
}

import { LightningElement } from 'lwc';

export default class ContactForm extends LightningElement {
    // Query single element
    focusNameInput() {
        const nameInput = this.template.querySelector('.name-input');
        if (nameInput) {
            nameInput.focus();
        }
    }
    
    // Query multiple elements and validate if fi
    validateForm() {
        const inputFields = this.template.querySelectorAll('.required');
        let isValid = true;
        
        inputFields.forEach(field => {
            if (!field.reportValidity()) {
                isValid = false;
            }
        });
        
        return isValid;
    }
    
    // Get element by data attribute
    getCityInput() {
        return this.template.querySelector('[data-field="city"]');
    }
}

// myComponent.html
<template>
    <lightning-button label="Click Me" onclick={handleClick}></lightning-button>
</template>

// myComponent.js
import { LightningElement } from 'lwc';

export default class EventHandlingExample extends LightningElement {
    handleClick() {
        console.log('Button clicked!');
    }
}  

//childComp.html
<template>
    <lightning-button label="Send Message" onclick={handleSendMessage}></lightning-button>
</template>

//childComp.js
    handleSendMessage() {
        const messageEvent = new CustomEvent('message', {
            detail: { message: 'Hello from child !' }
        });
        // Dispatch the event to the parent component
        this.dispatchEvent(messageEvent);
    }
    
//parentComp.html
<template>
    <c-child-component onmessage={handleMessageReceived}></c-child-component>
    <p>{receivedMessage}</p>
</template>

//parentComp.js
    handleMessageReceived(event) {
        // Extract the message data from the event
        this.receivedMessage = event.detail.message;
        console.log(this.receivedMessage);
    }
}

// Local Storage Methods 
localStorage.setItem('username', 'PiyushLakhani'); // Save data to localStorage

let username = localStorage.getItem('username'); // retrieve data from localStorage

localStorage.removeItem('username'); // Remove a specific item from localStorage

localStorage.clear(); // Clear all items from localStorage

// Session Storage Methods similar to above
sessionStorage.setItem('sessionID', 'abc123');

let sessionID = sessionStorage.getItem('sessionID');

sessionStorage.removeItem('sessionID');

sessionStorage.clear();