Object in JavaScript | LWC Tutorial for Beginners | Peoplewoo Skills

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.