Types of Functions in JavaScript

1. Function Declaration

 function add(a, b) {     return a + b; } 

2. Function Expression

 const multiply = function(a, b) {     return a * b; };

3. Arrow Functions (Most used in LWC)

 const subtract = (a, b) => a - b; 

4. Anonymous Functions

Functions without a name, usually used as callbacks.

 setTimeout(function() {     console.log("Delayed!"); }, 1000); 

5. Immediately Invoked Function Expression (IIFE)

 (function() {     console.log("Runs immediately!"); })(); 

What Are Methods in JavaScript?

A method is a function stored inside an object. In LWC, methods are used inside classes or component controllers.

Example:

 const user = {     name: "Amit",     greet() {     

    console.log("Hello " + this.name);     } }; user.greet(); 

Functions vs Methods

Functions in LWC – Real-Life Examples

1. Event Handler Function

 handleClick() {     console.log("Button clicked"); } 

2. Function Calling Apex in LWC

 loadContacts() {     getContacts()         .then(result => 

{             this.contacts = result;         })         

.catch(error => {             console.error(error);         }); } 

3. Arrow Functions for Callback

 connectedCallback() {     setTimeout(() => {     

    console.log("Component Loaded!");     }, 1000); } 

Useful Built-In Methods in JavaScript

String Methods

 "peoplewoo".toUpperCase(); " Skills ".trim(); 

Array Methods

 [1, 2, 3].map(x => x * 2); [1, 2, 3].filter(x => x > 1); 

Object Methods

 Object.keys(user); Object.values(user); 

Math Methods

 Math.random(); Math.floor(4.7);

Parameters & Arguments in Functions

 function welcome(name, course) {     return `Hello ${name},

 welcome to ${course}!`; } console.log(welcome("Amit", "Peoplewoo Skills")); 

Parameters = variables inside function definition
Arguments = values passed when calling function

Return Statement

The return keyword sends data back from a function.

 function square(n) {     return n * n; } 

Why Functions Are Important in LWC?

• Handle user events (click, input change, button press)
• Call Apex methods
• Process API responses
• Trigger child-to-parent communication
• Handle conditional rendering
• Perform reusable logic

Best Practices

• Use arrow functions for callbacks
• Keep functions small and focused on one task
• Use descriptive names like handleSave or loadData
• Avoid deep nested functions
• Reuse methods instead of repeating code

Why Objects Are Important in LWC?

• API data returned from Apex is always an object.
• Events in LWC pass objects through detail.
• Tracked properties often store objects.
• JSON responses are parsed into objects.
• LWC components use object structures for configuration and rendering.

How to Create an Object in JavaScript?

1. Object Literal (Most Common)

 const car = {     brand: "Tesla",     model: "Model 3",     price: 45000 }; 

2. Using new Object()

 const person = new Object(); person.name = "Amit"; person.country = "India"; 

3. Using Constructor Function

 function Student(name, course) {    this.name = name;    this.course = course; }

 const s1 = new Student("Rahul", "Salesforce"); 

4. Using Classes (Recommended in LWC)

 class Employee {     constructor(name, dept) {         this.name = name;   

      this.dept = dept;     } } const emp = new Employee("Priya", "IT"); 

Accessing Object Properties

1. Dot Notation

 console.log(user.firstName); 

2. Bracket Notation

 console.log(user["lastName"]); 

Modifying Object Properties

 user.age = 30;           // Update value user.email = "john@x.com";

  // Add new property delete user.lastName;     // Remove property 

Nested Objects

Objects can contain other objects.

 const account = {    name: "ABC Corp",    contact:

 {        phone: "9876543210",        city: "Pune"    } }; 

console.log(account.contact.city);  

Objects in LWC Real-Life Example

Example: Handling Apex Response

 @track userDetails; connectedCallback() {     getUserInfo()      

   .then(result => {             console.log(result.name);     

  this.userDetails = result;  // result is an object         }); } 

Example: Passing Data in Events

 const event = new CustomEvent('senddata', {     detail: {       

  id: 101,         name: "Amit"     } }); this.dispatchEvent(event); 

Common Object Methods

Best Practices for Using Objects in LWC

• Always initialize objects to avoid undefined errors.
• Use Object.freeze() for constant data.
• Use classes when creating object templates.
• Avoid deeply nested objects (hard to track for reactivity).
• Use JSON.stringify() to debug objects during development.

What is null in JavaScript?

null is an assignment value. It represents the intentional absence of an object value. Developers explicitly assign null when they want to clear or reset a variable.

Example:

 let x = null; console.log(x); // null 

In LWC, null is commonly used to reset tracked variables or remove reference values.

Difference Between null and undefined

The following table explains the core differences:

Difference Between =, ==, and ===

JavaScript provides three different operators for assignment and comparison. Understanding these is essential for writing bug-free LWC code.

Examples:

 // Assignment let x = 10; // Loose equality (value only) console.log(5 == "5");

  // true // Strict equality (value + type) console.log(5 === "5");

 // false console.log(5 === 5);   // true 

In Lightning Web Components, always prefer === to avoid unexpected behavior, especially when validating API inputs or comparing values returned from Apex.

Real-Life Example in LWC

Imagine you are fetching user details from an Apex method. Initially, the variable will be undefined because the result hasn't arrived. After data is loaded, if a field is missing, it may return null.

 @track userDetails; connectedCallback() {     getUserInfo()         

.then(result => {             if(result === null) {            

     console.log("No user data found");             }         

    this.userDetails = result;         }); } 

Best Practices

• Use === for all comparisons.
• Use null intentionally when resetting values.
• Avoid unnecessary type coercion caused by ==.
• Always initialize variables properly in LWC.
• Check for both null and undefined where needed using:

  if (value == null)

  It covers both cases.

Quick Comparison Table

1. var – Function-Scoped (Old JavaScript)

Variables declared using var are function-scoped. That means they are accessible anywhere inside the function. However, var ignores block scope, leading to unexpected behavior.

Example:

 if (true) {     var x = 10; } console.log(x); // Output: 10 (not block scoped) 

This can cause bugs in LWC or modern JavaScript apps because variables may leak outside their intended scope.

2. let – Block Scoped (Modern & Recommended)

Variables declared using let are block-scoped, meaning they exist only inside { }.

Example:

 if (true) {     let y = 20; } console.log(y); // Error: y is not defined 

This prevents accidental variable leakage, making code cleaner and safer. Let allows reassignment, so it is best for values that change over time.

3. const – Block Scoped Constant

Variables declared using const must be initialized and cannot be reassigned. However, for arrays and objects, the reference is constant, but the internal values can change.

Example:

 const user = { name: "Amit" }; user.name = "Rahul"; // Allowed user = {};  

         // Not Allowed (reassignment error) 

This makes const ideal for storing stable values or complex data structures.

Hoisting Difference

All three (var, let, const) are hoisted. But only var is initialized as undefined, while let and const remain in the Temporal Dead Zone (TDZ) until execution reaches their declaration.

Example:

 console.log(a); // undefined console.log(b); // Error console.log(c); 

// Error var a = 1; let b = 2; const c = 3; 

Real-Life Example in Lightning Web Components (LWC)

When building LWCs, let and const help you write predictable, error-free code.

 import { LightningElement } from 'lwc'; 

export default class Sample extends LightningElement

 {     message = 'Hello';     handleClick()

 {         let count = 5;         const pi = 3.14;         count = 10; 

  // allowed         // pi = 4;   

 // not allowed         console.log(count);     } } 

Using var in LWC can lead to scope-related bugs and is strongly discouraged.

Best Practices

• Avoid var in modern JavaScript and LWC.
• Use let for variables that change over time.
• Use const for constants, arrays, and objects.
• Name constants in uppercase (optional but recommended).
• Always initialize variables close to where they are used.

Key JavaScript Concepts You Must Know for LWC

1. Variables (let, const, var)

In LWC, you will mostly use let and const.

 let name = 'Peoplewoo'; const course = 'LWC Basics'; 

2. Data Types

JavaScript supports both primitive and non-primitive data types.

3. Functions in JavaScript

Functions allow you to reuse logic. In LWC, functions are used for calculations, events, and data handling.

 // Normal function function greet(){     return 'Hello Learner'; } 

// Arrow function const greetUser = () => 'Welcome to Peoplewoo Skills'; 

4. Classes and Export

Every LWC uses a JavaScript class that extends LightningElement.

 import { LightningElement } from 'lwc'; export default class 

MyComponent extends LightningElement {     message = 'Hello from LWC';     

changeMessage() {         this.message = 'Updated!';     } } 

5. Template Binding

JavaScript variables are directly used inside HTML templates using curly braces {}.

 message = 'LWC is powerful!'; 

 HTML:

 <template>     <p>{message}</p> </template> 

6. Event Handling

Events allow JS to react to user actions like button clicks.

 handleClick() {      } 

HTML:

 <button>Click Me</button> 

7. Arrays & Objects

Used to store and manipulate multiple values.

 // Array example let fruits = ['Apple', 'Banana', 'Grapes']; 

// Object example let user = {     name: 'Jeet',     role: 'Developer' }; 

Real-Life LWC Example Using JavaScript

Imagine creating a component that displays student names. The data is stored in a JavaScript array and displayed in HTML using a loop.

 students = ['Amit', 'Priya', 'Rohan']; 

HTML:

 <template>     <template for:each={students} for:item="std">  

       <p key="{std}">{std}</p>     </template> </template> 

This is how JavaScript powers dynamic rendering in LWC.

Best Practices for JavaScript in LWC

• Use let and const, avoid var
• Break logic into small functions
• Use proper naming conventions
• Avoid mutating objects directly when possible
• Always follow ES6+ JavaScript standards

List of Lifecycle Hooks in LWC

1. constructor()

The first hook executed when an LWC component instance is created. Best used for initializing basic variables.

 constructor() {     super();     console.log('Constructor called!'); } 

Restrictions: You cannot access DOM elements here.

2. connectedCallback()

Called when the component is inserted into the DOM. Use it to:

• Call Apex methods
• Initialize data
• Register event listeners

 connectedCallback() {     console.log('Component loaded in DOM'); } 

3. renderedCallback()

Executes every time the component renders or re-renders. Use this for DOM manipulation.

 renderedCallback() {     console.log('Component rendered!'); } 

Note: It may run multiple times, so avoid heavy logic here.

4. disconnectedCallback()

Triggered when a component is removed from the DOM. Used for cleanup work.

 disconnectedCallback() {     console.log('Component removed!'); } 

Examples of cleanup:

• Removing event listeners
• Clearing timers
• Unsubscribing from events

5. errorCallback(error, stack)

Captures errors from child components.

 errorCallback(error, stack) {     console.error('Error:', error);   

  console.log('Stack:', stack); } 

Basic Demo of Lifecycle Hooks

Below is a simple LWC example demonstrating all lifecycle hooks:

 import { LightningElement } from 'lwc'; export default class LifecycleDemo

 extends LightningElement {     constructor() {         super();       

  console.log('Constructor executed');     }     connectedCallback() 

{         console.log('connectedCallback executed');     }     

renderedCallback() {         console.log('renderedCallback executed'); 

    }     disconnectedCallback() {        

 console.log('disconnectedCallback executed');     } 

    errorCallback(error, stack)

 {         console.log('Error caught:', error);     } } 

Real-Life Use Case

Example: Fetching Account data when the component loads

Developers often use connectedCallback() to fetch Apex data as soon as the component appears on the screen.

 connectedCallback() {     getAccountList()         .then(result => 

{             this.accounts = result;         })         .catch(error => 

{             console.error(error);         }); } 

This ensures the data loads before the user interacts with the component.

Best Practices

• Use constructor only for variable initialization
• Use connectedCallback for data fetching and event registration
• Avoid heavy logic inside renderedCallback
• Always clean up listeners in disconnectedCallback
• Use errorCallback for debugging child components

What Is the Unified Individual Engagement Dashboard?

The dashboard is a visual analytics layer built on top of the report. It includes charts, KPIs, timelines, and insights that allow users to analyze customer behavior instantly without writing queries.

Key Components

• Engagement Timeline: Chronological view of all interactions.
• Channel Breakdown: Email vs SMS vs Web vs App.
• Conversion Metrics: Identify high-intent behavior.
• Journey Performance: How customers move across lifecycle stages.
• AI-Powered Insights: Likelihood to convert, churn, or re-engage.

How the Unified Engagement Dashboard Works in Data Cloud

The dashboard is automatically powered by the Engagement Event Data Model Object (DMO). When activity data flows into Data Cloud from different channels, Salesforce maps it to standard DMOs.

Data Flow Process:

1. Data enters via Data Streams (Salesforce, Marketing Cloud, Web SDK, Mobile SDK, APIs).
2. Raw data is stored in Data Lake Objects (DLOs).
3. Data is mapped to DMOs such as:
   • Engagement Event
   • Individual
   • Unified Individual
   • Interaction Summary
4. Identity Resolution unifies identities.
5. Engagement metrics populate automatically in the dashboard.

Why This Dashboard Is Important

The Unified Individual Engagement Dashboard empowers teams to understand real-time customer behavior and personalize marketing actions.

Benefits:

• Eliminates data silos
• Accelerates data analysis
• Helps build targeted segments
• Improves personalization
• Optimizes journeys and campaigns
• Strengthens customer experience strategies

Real-Life Example

A retail brand wants to analyze the engagement of a specific user. With the Unified Engagement Dashboard, the marketer can instantly view:

• The customer's last purchase value
• Email engagement history (opens, clicks)
• Website interactions (cart additions, product views)
• Mobile app sessions
• Ad campaign touchpoints

Based on this data, they can create a segment like "High-Intent Buyers Who Viewed Product X" and trigger a personalized offer in Journey Builder.

How to Activate Unified Individual Engagement Dashboard

1. Go to **Data Cloud Setup**
2. Enable **Individual & Engagement Reporting**
3. Ensure **Engagement Event DMO** is mapped correctly
4. Enable **Identity Resolution**
5. Verify stitched profiles under **Unified Individuals**
6. Open Analytics → Unified Engagement Dashboard

Once activated, the dashboard automatically populates as data flows in.

Learn Data Cloud Hands-On

Struggling to understand Unified Profiles, DLO-DMO mapping, or Engagement Dashboards?

Join our expert-led Data Cloud training and master real-world Salesforce projects with Peoplewoo Skills.

Register Now

Best Practices

• Always validate engagement data before mapping
• Use standard DMOs whenever possible
• Keep naming conventions consistent
• Ensure Identity Resolution is clean and accurate
• Document data flows and mappings for governance

Why Learn Data Cloud with Peoplewoo Skills?

• Live, instructor-led Data Cloud training
• Hands-on experience with real Salesforce orgs
• Access to datasets and real projects
• Career guidance + certification support
• Free demo classes

Join the growing Peoplewoo Skills community and transform your career in Salesforce Data Cloud!