Scribd
Upload
1 views15 pages

Arrow Functions

The document provides an overview of arrow functions in JavaScript, highlighting their concise syntax and features such as implicit return, lexical scoping of 'this', and limitations like not being usable as constructors. It includes examples of arrow functions with various parameters and their application as callback functions. The document concludes with a simple HTML example demonstrating the use of an arrow function to double a number.

Uploaded by

Dhanush kuna
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views15 pages

Arrow Functions

The document provides an overview of arrow functions in JavaScript, highlighting their concise syntax and features such as implicit return, lexical scoping of 'this', and limitations like not being usable as constructors. It includes examples of arrow functions with various parameters and their application as callback functions. The document concludes with a simple HTML example demonstrating the use of an arrow function to double a number.

Uploaded by

Dhanush kuna
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Full Stack Development

ARROW FUNCTIONS

By
G.Sowmya
Assistant Professor
CSE-AIML Dept
MLR Institute of Technology
Overview of the Presentation

 What is arrow Function?


 Features of arrow Functions
 Example programs
Arrow Functions

What is arrow Function

 Arrow functions are a concise way to write functions in JavaScript.


 They were introduced in ES6 (ECMAScript 2015) and provide a more
readable and shorter syntax compared to traditional function expressions.
Syntax of Arrow Functions:
 The basic syntax of an arrow function is:
const functionName = (param1, param2) => { // function body return
someValue; };
 If the function has only one statement, you can omit the {} and return:
const add = (a, b) => a + b;
console.log(add(5, 3)); // Output: 8
Arrow Functions

Features arrow Functions:

1. Implicit Return
 If the function body consists of only a single expression, the result is returned
automatically.
const square = num => num * num;
console.log(square(4)); // Output: 16
Arrow Functions

2. No this Binding
 Unlike regular functions, arrow functions do not have their own this. Instead,
they inherit this from their surrounding scope (lexical scoping).
const obj = {
value: 10,
regularFunction: function() {
setTimeout(function() {
console.log(this.value); // `this` refers to the global object, NOT `obj`
}, 1000);
},
Arrow Functions

arrowFunction: function() {
setTimeout(() => {
console.log(this.value); // `this` refers to `obj`
}, 1000);
}
};
obj.regularFunction(); // Output: undefined (or error in strict mode)
obj.arrowFunction(); // Output: 10
Arrow Functions

3. Cannot be Used as a Constructor:


 Arrow functions cannot be used with the new keyword because they do not
have their own this.
const Person = (name) => {
this.name = name;
};
const p = new Person("Alice"); // TypeError: Person is not a constructor
Arrow Functions

4. No arguments Object
 Arrow functions do not have their own arguments object. If needed, use rest
parameters (...args) instead.
const sum = (...args) => args.reduce((acc, val) => acc + val, 0);
console.log(sum(1, 2, 3, 4)); // Output: 10
Arrow Functions

Example programs:

1. Arrow Function with No Parameters


const greet = () => console.log("Hello, World!");
greet(); // Output: Hello, World
Arrow Functions

2. Arrow Function with One Parameter


Parentheses can be omitted if there's only one parameter.
const double = n => n * 2;
console.log(double(5)); // Output: 10
Arrow Functions

3. Arrow Function as a Callback


Arrow functions are often used as callback functions in methods like map, filter,
and reduce.
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // Output: [1, 4, 9, 16, 25]
Arrow Functions

Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Function Example</title>
</head>
<body>
<h2>Arrow Function Example: Double a Number</h2>
Arrow Functions

<input type="number" id="numberInput" placeholder="Enter a number">


<button id="doubleBtn">Double It</button>
<p id="result"></p>
<script>
// Arrow function to double a number
const doubleNumber = num => num * 2;
Arrow Functions

// Event Listener using an Arrow Function


document.getElementById("doubleBtn").addEventListener("click", () => {
const input = document.getElementById("numberInput").value;
const result = doubleNumber(Number(input));
document.getElementById("result").textContent = `Doubled Value: $
{result}`;
});
</script>
</body>
</html>
WEB PROGRAMMING

Thank You

You might also like