• Home
  • Jobs
  • Courses
  • Certifications
  • Companies
  • Online IDE
  • Login
  • Signup
MYTAT
  • Home
  • Jobs
  • Courses
  • Certifications
  • Companies
  • Online IDE
  • Login
  • Signup
JavaScript
  • JavaScript Introduction
  • JavaScript Where To
  • JavaScript Output
  • JavaScript Statements
  • JavaScript Syntax
  • JavaScript Comments
  • JavaScript Variables
  • JavaScript Let
  • JavaScript Const
  • JavaScript Operators
  • JavaScript Assignment
  • JavaScript Data Types
  • JavaScript Functions
  • JavaScript Objects
  • JavaScript Events
  • JavaScript Strings
  • JavaScript String Methods
  • JavaScript Numbers
  • JavaScript Number Methods
  • JavaScript Arrays
  • JavaScript Array Const
  • JavaScript Array Methods
  • JavaScript Sorting Arrays
  • JavaScript Array Iteration
  • JavaScript Date Objects
  • JavaScript Date Formats
  • JavaScript Get Date Methods
  • JavaScript Set Date Methods
  • JavaScript Math Object
  • JavaScript Random
  • JavaScript Booleans
  • JavaScript Comparison And Logical Operators
  • JavaScript If Else And Else If
  • JavaScript Switch Statement
  • JavaScript For Loop
  • JavaScript Break And Continue
  • JavaScript Type Conversion
  • JavaScript Bitwise Operations
  • JavaScript Regular Expressions
  • JavaScript Errors
  • JavaScript Scope
  • JavaScript Hoisting
  • JavaScript Use Strict
  • The JavaScript This Keyword
  • JavaScript Arrow Function
  • JavaScript Classes
  • JavaScript JSON
  • JavaScript Debugging
  • JavaScript Style Guide
  • JavaScript Common Mistakes
  • JavaScript Performance
  • JavaScript Reserved Words
  • JavaScript Versions
  • JavaScript History
  • JavaScript Forms
  • JavaScript Validation API
  • JavaScript Objects
  • JavaScript Object Properties
  • JavaScript Function Definitions
  • JavaScript Function Parameters
  • JavaScript Function Invocation
  • JavaScript Closures
  • JavaScript Classes
  • Java Script Async
  • JavaScript HTML DOM
  • The Browser Object Model
  • JS Ajax
  • JavaScript JSON
  • JavaScript Web APIs
  • JS Vs JQuery
  • Home
  • Courses
  • JavaScript
  • JavaScript Arrow Function

JavaScript Arrow Function

Previous Next

JavaScript Arrow Function

Arrow functions were introduced in ES6.

Arrow functions allow us to write shorter function syntax:

Before:

hello = function() {
  return "Hello World!";
}
Try it now

With Arrow Function:

hello = () => {
  return "Hello World!";
}
Try it now

It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:

Arrow Functions Return Value by Default:

hello = () => "Hello World!";
Try it now


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

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

Arrow Function With Parameters:

hello = (val) => "Hello " + val;
Try it now

In fact, if you have only one parameter, you can skip the parentheses as well:

Arrow Function Without Parentheses:

hello = val => "Hello " + val;

Try it now

What About this?

The handling of this is also different in arrow functions compared to regular functions.

In short, with arrow functions there are no binding of this.

In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.

With arrow functions the this keyword always represents the object that defined the arrow function.

Let us take a look at two examples to understand the difference.

Both examples call a method twice, first when the page loads, and once again when the user clicks a button.

The first example uses a regular function, and the second example uses an arrow function.

The result shows that the first example returns two different objects (window and button), and the second example returns the window object twice, because the window object is the "owner" of the function.

Example

With a regular function this represents the object that calls the function:
// Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
Try it now

Example

With an arrow function this represents the owner of the function:
// Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
Try it now

Remember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.


Browser Support

The following table defines the first browser versions with full support for Arrow Functions in JavaScript:

Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Sep, 2015 Jul, 2015 May, 2013 Sep, 2016 Sep, 2015



Practice Excercise Practice now

Previous Next
COMPANY
  • About us
  • Careers
  • Contact Us
  • In Press
  • People
  • Companies List
Products
  • Features
  • Coding Assessments
  • Psychometric Assessment
  • Aptitude Assessments
  • Tech/Functional Assessments
  • Video Assessment
  • Fluency Assessment
  • Campus
 
  • Learning
  • Campus Recruitment
  • Lateral Recruitment
  • Enterprise
  • Education
  • K 12
  • Government
OTHERS
  • Blog
  • Terms of Services
  • Privacy Policy
  • Refund Policy
  • Mart Category
Partner
  • Partner Login
  • Partner Signup

Copyright © RVR Innovations LLP 2025 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP