Arrow functions in JavaScript | Lecture 3

 

Arrow functions in JavaScript are a concise way to write functions introduced in ES6. They have a shorter syntax compared to traditional function expressions and do not bind their own this, making them especially useful in scenarios where you want to preserve the context of the enclosing function.

Syntax

(parameters) => expression

If the function has a single parameter, parentheses are optional:

param => expression

For multiple parameters or a block body, parentheses and curly braces are required:

(param1, param2) => {

    // statements

    return result;

}

Examples

1. Simple Arrow Function

const add = (a, b) => a + b;

 

console.log(add(5, 3)); // Output: 8

2. Single Parameter

const square = x => x * x;

 

console.log(square(4)); // Output: 16

3. No Parameters

const greet = () => "Hello, world!";

 

console.log(greet()); // Output: Hello, world!

4. Multiline Block Body

If the function body has multiple statements, wrap it in curly braces and explicitly use return when needed:

const multiplyAndLog = (a, b) => {

    const result = a * b;

    console.log(`Result: ${result}`);

    return result;

};

 

multiplyAndLog(3, 4); // Output: Result: 12

5. Using Arrow Functions in Array Methods

Arrow functions are commonly used with array methods like map, filter, and reduce.

const numbers = [1, 2, 3, 4];

const squaredNumbers = numbers.map(num => num * num);

 

console.log(squaredNumbers); // Output: [1, 4, 9, 16]

6. Arrow Functions and this

Arrow functions do not have their own this and instead inherit this from the enclosing lexical context.

function Person() {

    this.age = 0;

 

    setInterval(() => {

        this.age++; // `this` refers to the Person object

        console.log(this.age);

    }, 1000);

}

 

const person = new Person();

7. Returning an Object

To return an object literal, wrap it in parentheses:

const createPerson = (name, age) => ({ name, age });

 

console.log(createPerson("Alice", 30)); // Output: { name: 'Alice', age: 30 }

8. Default Parameters

Arrow functions can use default parameter values:

const greet = (name = "Guest") => `Hello, ${name}!`;

 

console.log(greet()); // Output: Hello, Guest!

console.log(greet("John")); // Output: Hello, John!

Key Differences from Regular Functions

  1. No Own this: Arrow functions inherit this from the surrounding scope.
  2. Cannot Use as Constructors: Arrow functions cannot be used with new.
  3. No arguments Object: Arrow functions do not have an arguments object. Use rest parameters instead.

Example:

const sum = (...args) => args.reduce((acc, num) => acc + num, 0);

 

console.log(sum(1, 2, 3)); // Output: 6

 

Comments

Post a Comment

Popular posts from this blog

Classes and Objects in Javascript | Lecture 10

  In JavaScript, classes are templates for creating objects, and objects are instances of classes. Classes encapsulate data and methods to model real-world entities. Declaring a Class A class is defined using the class keyword, and it typically contains: Constructor : A special method for initializing the object. Methods : Functions defined within the class. Example: Creating a Class and an Object class Person {   // Constructor to initialize the object   constructor(name, age) {     this.name = name; // Instance property     this.age = age;   }     // Method   greet() {     return `Hello, my name is ${this.name} and I am ${this.age} years old.`;   } }   // Create an object (instance) of the class const person1 = new Person("John", 30);   // Access properties and methods console.log(person1.name); // Output: John console.log...
Read more

Destructuring in JavaScript | Lecture 5

  Destructuring in JavaScript is a syntax for unpacking values from arrays or properties from objects into distinct variables. This feature simplifies extracting data, making your code cleaner and more readable. Here are examples of destructuring for both arrays and objects: 1. Destructuring Arrays const fruits = ['apple', 'banana', 'cherry'];   // Basic Destructuring const [first, second] = fruits; console.log(first); // "apple" console.log(second); // "banana"   // Skipping Elements const [, , third] = fruits; console.log(third); // "cherry"   // Default Values const [a, b, c = 'default fruit'] = ['mango', 'pear']; console.log(c); // "default fruit"   // Rest Pattern const [d, ...rest] = fruits; console.log(rest); // ["banana", "cherry"] 2. Destructuring Objects const user = {   name: 'John',   age: 30,   count...
Read more

ECMA Script 6 Introduction of topics | Lecture 1

Image
ECMA Script 6 Introduction of topics 1. Let and Const let : Block-scoped variable. const : Block-scoped constant. let x = 10; x = 20; // Allowed   const y = 30; // y = 40; // Error: Assignment to constant variable   2. Arrow Functions Concise syntax for defining functions. // Regular function function add(a, b) {   return a + b; }   // Arrow function const add = (a, b) => a + b;   console.log(add(5, 3)); // Output: 8   3. Template Literals For string interpolation and multiline strings. const name = "John"; const greeting = `Hello, ${name}!`; console.log(greeting); // Output: Hello, John!   const multiline = `This is a multiline string.`; console.log(multiline);   4. Default Parameters Default values for function parameters. function greet(name = "Guest") {   return `Hello, ${name}!`; }   console.log(greet()); // Output: Hello, Guest! console.log(greet(...
Read more