Basics of JavaScript for LWC | Peoplewoo Skills

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