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.