Scribd
Upload
6 views11 pages

JavaScript Arrow Functions Explained

JavaScript Arrow Functions, introduced in ES6, provide a concise syntax for function expressions, allowing the omission of the 'function' keyword, 'return' keyword, and curly brackets for single-statement functions. They inherit 'this' from their surrounding context, making them unsuitable for methods that require their own 'this'. Arrow functions are not hoisted and must be defined before use.

Uploaded by

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

JavaScript Arrow Functions Explained

JavaScript Arrow Functions, introduced in ES6, provide a concise syntax for function expressions, allowing the omission of the 'function' keyword, 'return' keyword, and curly brackets for single-statement functions. They inherit 'this' from their surrounding context, making them unsuitable for methods that require their own 'this'. Arrow functions are not hoisted and must be defined before use.

Uploaded by

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

1/16/26, 5:43 PM JavaScript Arrow Functions

 Tutorials  References  Exercises  Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

JavaScript Arrow Functions


❮ Previous Next ❯

Arrow Functions were introduced in ES6 and are commonly used in modern JavaScript.

Arrow Functions allow a shorter syntax for function expressions.

You can skip the function keyword, the return keyword, and the curly brackets:

let myFunction = (a, b) => a * b;

Try it Yourself »

Arrow Function Syntax


An arrow function uses the => symbol.

An arrow function is always written as a function expression.

Example
[Link] 1/11
1/16/26, 5:43 PM JavaScript Arrow Functions

const add = (a, b) => {


Tutorials 
return a + b;
References  Exercises  Sign In

};
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

This arrow function does the same thing as a regular function expression.

Shorter Syntax
If the function body contains only one statement:

You can remove the word function, the curly brackets and the return keyword.

Before Arrow
Function to compute the product of a and b:

let add = function(a, b) {return a * b}

Try it Yourself »

With Arrow

let add = (a, b) => a * b;

Try it Yourself »

With Arrow

let hello = () => "Hello World!";

Try it Yourself »

[Link] 2/11
1/16/26, 5:43 PM JavaScript Arrow Functions


BeforeTutorials
Arrow  References  Exercises  Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
let hello = function() {return "Hello World!";}

Try it Yourself »

Arrow Functions with One Parameter


If a function has only one parameter, you can omit the parentheses:

With Paranthesis

let square = (x) => x * x;

Try it Yourself »

Without Paranthesis

let square = x => x * x;

Try it Yourself »

With Paranthesis

let hello = (val) => "Hello " + val;

Try it Yourself »

Without Paranthesis

let hello = val => "Hello " + val;

[Link] 3/11
1/16/26, 5:43 PM JavaScript Arrow Functions

Try it Yourself »
Tutorials  References  Exercises  Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

Arrow Functions Return Value by Default


If the function has only one statement that returns a value:

You can remove the brackets and the return keyword:

Example

let hello = () => "Hello World!";

Try it Yourself »

Note
This works only if the function has only one statement.

Arrow Function Parameters


If you have parameters, you pass them inside the parentheses:

Example

let hello = (val) => "Hello " + val;

Try it Yourself »

If you have only one parameter, you can skip the parentheses as well:

[Link] 4/11
1/16/26, 5:43 PM JavaScript Arrow Functions

 Tutorials 
Example References  Exercises  Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
let hello = val => "Hello " + val;

Try it Yourself »

Arrow Functions with No Parameters


If there are no parameters, parentheses are required.

With Arrow Function:

let hello = () => "Hello World!";

Try it Yourself »

You can only omit the return keyword and the curly brackets if the function is a single
statement. Because of this, it might be a good habit to always keep them:

Example

// This will not work


let myFunction = (x, y) => { x * y } ;

// This will not work


let myFunction = (x, y) => return x * y ;

// Only this will work


let myFunction = (x, y) => { return x * y };

Try it Yourself »

[Link] 5/11
1/16/26, 5:43 PM JavaScript Arrow Functions

 Tutorials  References  Exercises 


Arrow Functions Are Not Declarations
Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
Arrow functions are always expressions and must be assigned to a variable.

They cannot be used before they are defined.

Example

hello(); // Error

let hello = () => "Hello";

Note
Arrow functions must be defined before they are used.

Arrow Functions and the this Keyword


Arrow functions do not have their own this value.

They inherit this from the surrounding code.

Example

const person = {
name: "John",
greet: function() {
return [Link];
}
};

Using an arrow function as a method often gives unexpected results.


[Link] 6/11
1/16/26, 5:43 PM JavaScript Arrow Functions

 Tutorials 
Example References  Exercises  Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
const person = {
name: "John",
greet: () => {
return [Link];
}
};

In this case, this does not refer to the person object.

When to Use Arrow Functions


For short functions
For callbacks and array methods
When you do not need your own this

When Not to Use Arrow Functions


As object methods
When you need your own this
When using function declarations

Quiz
What is one important difference between arrow functions and regular functions?

Common Mistakes

Forgetting Parentheses Rules


Parentheses are required for zero or multiple parameters.

[Link] 7/11
1/16/26, 5:43 PM JavaScript Arrow Functions

Using
Tutorials  References 
Arrow Functions asExercises
Methods  Sign In

HTML
 ArrowCSS JAVASCRIPT
functions SQL
do not bind this. PYTHON JAVA PHP HOW TO [Link] C

Expecting Hoisting
Arrow functions are not hoisted.

Next Chapter
Next: The this Keyword

Browser Support
= () => {} is an ES6 feature.

ES6 is fully supported in all modern browsers since June 2017:

Chrome Edge Firefox Safari Opera


51 15 54 10 38

May 2016 Apr 2017 Jun 2017 Sep 2016 Jun 2016

?
Exercise
Which one of the following is a correct JavaScript arrow function?

greeting => 'Hello World!';

greeting = return => 'Hello World!';

greeting = () => 'Hello World!';

[Link] 8/11
1/16/26, 5:43 PM JavaScript Arrow Functions

 Tutorials  References  Exercises 


Submit Answer »
Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C

❮ Previous Sign in to track progress Next ❯

COLOR PICKER

 

-->
[Link] 9/11
1/16/26, 5:43 PM JavaScript Arrow Functions

 Tutorials  References  Exercises  Sign In

HTML
 CSS
 JAVASCRIPT
PLUS
SQL PYTHON
SPACES
JAVA PHP HOW TO [Link] C

GET CERTIFIED FOR TEACHERS

BOOTCAMPS CONTACT US

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
[Link] Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
[Link] Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
AngularJS Reference
jQuery Reference

Top Examples Get Certified


HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
[Link] Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

[Link] 10/11
1/16/26, 5:43 PM JavaScript Arrow Functions

 Tutorials  References  Exercises  Sign In

HTML
 CSS JAVASCRIPT SQL
 PYTHON
  JAVA
 PHP HOW TO [Link] C

FORUM ABOUT ACADEMY


W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full
correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies
and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by [Link].

[Link] 11/11

You might also like