JS Arrow Function

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Arrow Function

Arrow functions were introduced in ES6.

Arrow functions allows the user to write shorter function syntax:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrow Function</h2>

<p>This example shows the syntax of an Arrow Function, and how to use it.</p>

<p id=”demo”></p>

<script>

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

document.getElementById(“demo”).innerHTML = myFunction(4, 5);

</script>

</body>

</html>

Output

JavaScript Arrow Function

This example shows the syntax of an Arrow Function, and how to use it.

Before Arrow Function:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Function</h2>

<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>

<p id=”demo”></p>

<script>

var hello;

hello = function() {

  return “Hello World!”;

}

document.getElementById(“demo”).innerHTML = hello();

</script>

</body>

</html>

Output

JavaScript Function

This example shows the syntax of a function, without the use of arrow function syntax.

Hello World!

With Arrow Function:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrow Function</h2>

<p>This example shows the syntax of an Arrow Function, and how to use it.</p>

<p id=”demo”></p>

<script>

var hello;

hello = () => {

  return “Hello World!”;

}

document.getElementById(“demo”).innerHTML = hello();

</script>

</body>

</html>

Output

JavaScript Arrow Function

This example shows the syntax of an Arrow Function, and how to use it.

Hello World!

If the function consists of one statement, and the statement returns a value, the brackets and the return keyword can be removed.

Arrow Functions Return Value by Default

The parameters are passed within the parentheses:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrow Function</h2>

<p>This example shows an Arrow Function without the brackets or the return keyword.</p>

<p id=”demo”></p>

<script>

var hello;

hello = () => “Hello World!”;

document.getElementById(“demo”).innerHTML = hello();

</script>

</body>

</html>

Output

JavaScript Arrow Function

This example shows an Arrow Function without the brackets or the return keyword.

Hello World!

Arrow Function With Parameters

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrow Function</h2>

<p>This example shows an Arrow Function with a parameter.</p>

<p id=”demo”></p>

<script>

var hello;

hello = (val) => “Hello ” + val;

document.getElementById(“demo”).innerHTML = hello(“Universe!”);

</script>

</body>

</html>

Output

JavaScript Arrow Function

This example shows an Arrow Function with a parameter.

Hello Universe!

Arrow Function Without Parentheses

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrow Function</h2>

<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>

<p id=”demo”></p>

<script>

var hello;

hello = val => “Hello ” + val;

document.getElementById(“demo”).innerHTML = hello(“Universe!”);

</script>

</body>

</html>

Output

JavaScript Arrow Function

This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.

Hello Universe!

What About this?

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

In other words, with arrow functions, there is no binding of this.

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

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

Let us take 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 makes use of a regular function, and the second example uses an arrow function.

The result depicts that the first example returns two different objects (window and button), and the second example displays 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:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript “this”</h2>

<p>This example demonstrate that in a regular function, the “this” keyword represents different objects depending on how the function was called.</p>

<p>Click the button to execute the “hello” function again, and you will see that this time “this” represents the button object.</p>

<button id=”btn”>Click Me!</button>

<p id=”demo”></p>

<script>

var hello;

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);

</script>

</body>

</html>

Output

JavaScript "this"

This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.

Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.

With an arrow function this represents the owner of the function:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript “this”</h2>

<p>This example demonstrate that in Arrow Functions, the “this” keyword represents the object that owns the function, no matter who calls the function.</p>

<p>Click the button to execute the “hello” function again, and you will see that “this” still represents the window object.</p>

<button id=”btn”>Click Me!</button>

<p id=”demo”></p>

<script>

var hello;

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);

</script>

</body>

</html>

Output

JavaScript "this"

This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.

Click the button to execute the "hello" function again, and you will see that "this" still represents the window object.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420