Web Development - HTML, CSS & JavaScript
For a simple expression, you can make it even shorter:
const add = (a, b) => a + b;
This is called an implicit return.
🔟 Arrow Function Examples
One parameter:
const square = number => number * number;
console.log(square(5)); // 25
Multiple parameters:
const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 20
No parameters:
const greet = () => {
console.log("Hello");
};
greet();
1️⃣1️⃣ Default Parameters
You can provide a default value for a parameter.
function greet(name = "Guest") {
console.log("Hello " + name);
}
greet("Rahul"); // Hello Rahul
greet(); // Hello Guest
Default parameters are very useful when a value is optional.
1️⃣2️⃣ Rest Parameters
Sometimes you don't know how many arguments will be passed.
You can use "...".
function add(...numbers) {
console.log(numbers);
}
add(10, 20, 30, 40); // [10, 20, 30, 40]
The rest parameter collects the arguments into an array.
function add(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}
console.log(add(10, 20, 30)); // 60
1️⃣3️⃣ Scope
Scope determines where a variable can be accessed.
function greet() {
let message = "Hello";
console.log(message);
}
greet();
"message" exists inside the function. Trying to access it outside: console.log(message); will cause an error.
This is because "message" has function/local scope.
1️⃣4️⃣ Block Scope
Variables declared with "let" and "const" are block-scoped.
if (true) {
let message = "Hello";
console.log(message);
}
This works. But: console.log(message); outside the block does not. The block is defined by { // block }.
This is one reason "let" and "const" are preferred over "var".
1️⃣5️⃣ Global Scope
A variable declared outside functions or blocks can be accessible from broader parts of the program.
const appName = "My App";
function showAppName() {
console.log(appName);
}
showAppName(); // My App
However, don't create unnecessary global variables. Too many globals can make larger applications difficult to maintain.
⭐ 1️⃣6️⃣ Callback Functions
A function can be passed to another function.
function greet(name) {
console.log("Hello " + name);
}
function processUser(callback) {
callback("Rahul");
}
processUser(greet); // Hello Rahul
Here: greet is passed as a value to processUser. This is called a callback function. Callbacks are extremely important in JavaScript because you'll encounter them throughout: Events, Array methods, Asynchronous programming, APIs, Node.js
⭐ 1️⃣7️⃣ Higher-Order Functions
A higher-order function is a function that: accepts another function as an argument, or returns a function.
function calculate(a, b, operation) {
return operation(a, b);
}
const add = (a, b) => a + b;
console.log(calculate(10, 5, add)); // 15
Here "calculate()" receives another function. That's a higher-order function.
⭐ 1️⃣8️⃣ Functions Returning Functions
A function can also return another function.
function createGreeting(name) {
return function () {
console.log("Hello " + name);
};
}
const greetRahul = createGreeting("Rahul");
greetRahul(); // Hello Rahul
7 · 1.5K ·