JavaScript Arrow Function
Arrow functions were introduced in ES6.
Arrow functions allow us to write shorter function syntax:
let myFunction = (a, b) => a * b;
It becomes shorter! If the function has just one statement and that statement gives back a value, you can leave out the brackets and the return word:
Note: This only works if the function contains just one statement.
If you possess certain values, you insert them within the brackets:
Certainly! If you have only one parameter, you can skip using parentheses, like this:
What About this?
Arrow functions handle this differently than regular functions do.
Simply put, arrow functions don't bind the this keyword.
In typical functions, the this keyword stands for the object that triggered the function, such as the window, the document, a button, or anything else.
Arrow functions ensure that the this keyword always points to the object that made the arrow function.
Let's explore two examples to grasp the distinction.
Both instances execute a function two times: initially upon the page's loading and then once more when the user clicks a button.
The initial instance employs a standard function, while the second instance utilizes an arrow function.
The outcome indicates that in the first example, two distinct items are obtained (window and button). In the second example, the window object is retrieved twice because it serves as the "owner" of the function.
Keep in mind these distinctions when dealing with functions. If the typical function's behavior suits your needs, stick with it; otherwise, opt for arrow functions.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>This example displays how a function is written, but it doesn't use the arrow function syntax.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = function() {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This sample demonstrates how to write and utilize an Arrow Function in JavaScript code.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example demonstrates how to use an Arrow Function without using parentheses or the return keyword.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function with a parameter.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example demonstrates that when you use an Arrow Function with only one parameter, you don't need to use parentheses around it.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example shows that in a usual function, the word "this" stands for different things based on how the function was used.</p>
<p>Click the button to run the "hello" function once more, and notice how "this" now stands for the button itself.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let 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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>In Arrow Functions, the "this" word refers to the object that owns the function, regardless of who calls it.</p>
<p>Click the button to run the "hello" function once more. Notice how "this" still refers to the window object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let 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>
HTML
CSS
Javascript
Jquery