Arrow Functions in JavaScript: A Simpler Way to Write Functions
Hey Everyone,
In this blog, we will learn about arrow functions in JavaScript.
We often create functions to reuse code.
For example:
Calculating numbers
Formatting text
Processing arrays
JavaScript introduced arrow functions in ES6 to make functions shorter and easier to read.
Why Arrow Functions?
Traditional functions sometimes require extra boilerplate code.
Example using a normal function:
function add(a, b) {
return a + b;
}
Using an arrow function:
const add = (a, b) => {
return a + b;
};
The arrow function is shorter and more modern.
Arrow Function with One Parameter
If the function has only one parameter, parentheses are optional.
Example:
const square = num => {
return num * num;
};
console.log(square(4)); //16
Output:
Both versions work:
num => num * num
or
(num) => num * num
Arrow Function with Multiple Parameters
If there are multiple parameters, parentheses are required.
Example:
const multiply = (a, b) => {
return a * b;
};
console.log(multiply(3, 4)); //12
Explicit Return
An explicit return uses the return keyword.
Example:
const add = (a, b) => {
return a + b;
};
This works the same way as a normal function.
Implicit Return
Arrow functions allow implicit return when there is only one expression.
Example:
const add = (a, b) => a + b;
No return keyword needed.
Example usage:
console.log(add(5, 3)); // 8
Normal Function vs Arrow Function
Normal Function
function greet(name) {
return "Hello " + name;
}
Arrow Function
const greet = name => "Hello " + name;
Arrow functions reduce boilerplate and improve readability.
Simple Transformation Example
//Normal Function
function double(num) {
return num * 2;
}
//Arrow Function
const double = num => num * 2;
You can see how arrow functions make code shorter.
Using Arrow Functions with Arrays
Arrow functions are commonly used with array methods like map().
Example:
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); //[2, 4, 6, 8]
The arrow function makes the code clean and readable.
Practice Assignment
Try these examples in your browser console.
1. Normal Function to Calculate Square
function square(num) {
return num * num;
}
console.log(square(5)); //25
2. Rewrite Using Arrow Function
const square = num => num * num;
console.log(square(5)); // 25
3. Check Even or Odd
const isEven = num => num % 2 === 0;
console.log(isEven(6)); // true
4. Use Arrow Function with map()
let numbers = [2, 4, 6];
let squares = numbers.map(num => num * num);
console.log(squares); // [4, 16, 36]
And now, you know what arrow functions are in JavaScript.
If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.
Thanks for reading, and see you in the next blog!
Peace ✌️ and Happy Learning!
