QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads JavaScript Arrow “=>” Function

JavaScript Arrow “=>” Function

This post is a part 8 of ECMAScript 6 Complete Tutorial post series.

ECMAScript 6 provides a new way to create functions which just contain one line of statement. This new type of function is called lambda or arrow function.

Here is how to create a arrow function

//sum is the function name
//x and y are function parameters
var sum = (x, y) => x + y;

console.log(sum(2, 900)); //902

Here (x, y) => x + y returns a regular JavaScript function object. Here the function body of the returned function object’s body would be function(x, y){return x+ y;}

Arrow functions always return the value of the statement when executed. Here result of x+y is returned.

You can also write multiple statements in an arrow function but arrow functions are mostly used in replacement of single statement functions. Here is code example of multiple statements in an arrow function

var sum = (x, y) => {
    x = x + 10;
    y = y + 10;
    return x + y;
}

console.log(sum(10, 10)); //40

As arrow function actually returns a regular JavaScript function object so they can be used wherever we use regular JavaScript function object. For example, they can be used as callback.

function sum(p, q)
{
    console.log(p() + q()); //87
}

sum(a => 20 + 10, b => 1 + 56); //here we are passing two function objects

One last and most important feature about arrow function is that the “this” pointer inside an asynchronously executed arrow function points to the scope inside which it was passed as callback. A regular function’s this pointer points to global scope when executed asynchronously.

window.age = 12;

function Person(){
  this.age = 34;

  setTimeout(() => {
    console.log(this.age); //34
  }, 1000);

  setTimeout(function(){
    console.log(this.age); //12
  }, 1000);  
}

var p = new Person();
Feb 16, 2015Narayan Prusty
How to take Date Input in HTMLJavaScript "for of" Loop Tutorial

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • JavaScript Promise vs Callback
  • JavaScript “class” Keyword
  • Default Function Arguments Values in JavaScript
  • JavaScript Function Return Multiple Values
  • JavaScript Function Techniques You May Not Know
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license