JavaScript Arrow Function
Arrow functions are anonymous functions (the functions without a name and not bound with an
identifier). They are also called as Lambda Functions in Python.
let myFunction
= (a, b) => a * b;
Advantage of Arrow Function:
Ø Reduces Code Size
Ø Lexically bind the Context
Ø Return statement & Functional
braces is Optional for Single line
function
Before Arrow:
hello
= function() {
return "Hello
World!";
}
With Arrow Function:
hello
= () => {
return "Hello
World!";
}
Arrow Functions Return Value by Default:
hello
= () => "Hello
World!";
Arrow Function With Parameters:
hello
= (val) => "Hello
" + val;
Arrow Function Without Parentheses:
hello
= val => "Hello
" + val;
Addition
Program using Arrow Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
let sum = (a,
b) => a + b;
alert( sum(1,
2) );
</script>
</head>
<body>
</body>
</html>
Output
Multiplication
Program Using Arrow Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
let double = n => n * 2;
alert( double(8)
);
</script>
</head>
<body>
</body>
</html>
Output
Printing String Using Arrow Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
let sayHi = () => alert("Hi Hello!");
sayHi();
</script>
</head>
<body>
</body>
</html>
Output
Age Verification using Arrow Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
let age = prompt("What is your
age?", 18);
let welcome = (age
< 18) ?
() => alert('Hello!') :
() => alert("Greetings!");
welcome();
</script>
</head>
<body>
</body>
</html>
Output
Sort on Array using Arrow Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Arrow function</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
let numbers = [4,2,6];
numbers.sort((a,b) => a
- b);
document.write(numbers);
</script>
</head>
<body>
</body>
</html>
Output
Map()
Function
map() method calls the specified function for every array element and
returns the new array.
Array String Length using Map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Arrow function</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
let names = ['abi', 'jeyasri', 'sivaraman'];
let lengths = names.map(name => name.length);
document.write(lengths);
</script>
</head>
<body>
</body>
</html>
Output
Color View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Arrow function</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
let setColor = function (color) {
return {value: color}
};
let backgroundColor = setColor('Red');
document.write(backgroundColor.value);
</script>
</head>
<body>
</body>
</html>
Output
Setting time in Arrow Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Arrow function</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
function Car() {
this.speed = 0;
this.speedUp = function (speed) {
this.speed = speed;
let self = this;
setTimeout(function () {
document.write(self.speed);
}, 1000);
};
}
let car = new Car();
car.speedUp(50);
</script>
</head>
<body>
</body>
</html>
Output
JavaScript arrow functions and
the prototype property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Arrow function</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script>
function dump( message ) {
console.log(message);
}
console.log(dump.hasOwnProperty('prototype'));
</script>
</head>
<body>
</body>
</html>
Output
0 comments:
Post a Comment