Functions & Methods in JavaScript | LWC JavaScript Tutorial | Peoplewoo Skills

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