Arrow Functions in JavaScript
Arrow functions were introduced in ES6 and have become the standard way to write functions in modern JavaScript. They are not just syntactic sugar — they behave slightly differently from regular functions in certain situations, which matters more as you go deeper. For now, let's focus on understanding them well enough to use them confidently.
What are Arrow Functions
An arrow function is a shorter way to write a function expression. Instead of using the function keyword, you use => (the fat arrow). That is literally it at the surface level.
Basic Syntax
Here is a regular function expression:
const greet = function() {
return "Hello there";
};
The same thing written as an arrow function:
const greet = () => {
return "Hello there";
};
You drop the function keyword and add => after the parentheses. The body still works the same way — curly braces, return statement, all of it.
Arrow Functions with One Parameter
When your function takes a single parameter, you can drop the parentheses around it. This is optional, but you will see it a lot in real codebases.
// with parentheses — totally fine
const double = (n) => {
return n * 2;
};
// without parentheses — also fine
const double = n => {
return n * 2;
};
Both work the same. Most style guides pick one and stick with it.
Arrow Functions with Multiple Parameters
When you have more than one parameter, the parentheses are required.
const add = (a, b) => {
return a + b;
};
console.log(add(3, 4)); // 7
No way around the parentheses here. Same goes for zero parameters — you need empty parentheses ().
Implicit Return
This is where arrow functions get genuinely useful. If your function body is just a single expression being returned, you can skip the curly braces and the return keyword entirely. The value is returned automatically.
// explicit return (normal style)
const square = n => {
return n * n;
};
// implicit return (arrow function shorthand)
const square = n => n * n;
Both do the same thing. The second one is called an implicit return because you never write return — it is implied.
More examples of implicit return:
const greet = name => "Hello, " + name;
const isAdult = age => age >= 18;
const multiply = (a, b) => a * b;
Clean, readable, no noise.
Implicit Return — Gotcha with Objects
Here is something that trips people up. If you want to implicitly return an object literal, you have to wrap it in parentheses. Otherwise JavaScript reads the curly braces as a function body, not an object.
// this does NOT work — JS thinks {} is a function body
const getUser = name => { name: name };
// this works — wrap the object in ()
const getUser = name => ({ name: name });
If you forget the parentheses, the function returns undefined and you get no error. That makes it hard to debug.
Explicit vs Implicit Return Side by Side
// explicit — use this when you have multiple lines of logic
const processNumber = n => {
const doubled = n * 2;
const result = doubled + 10;
return result;
};
// implicit — use this when the return is one clean expression
const processNumber = n => n * 2 + 10;
Implicit return is great for short, single-purpose functions. If your logic needs multiple steps, just use the curly braces and write it out clearly.
Basic Difference Between Arrow Function and Normal Function
The main thing to know right now: arrow functions do not have their own this. This matters a lot when working with objects and classes, but for standalone utility functions and array methods, it makes no practical difference.
// normal function
function sayHello() {
console.log("Hello");
}
// arrow function
const sayHello = () => {
console.log("Hello");
};
For most beginner use cases — math operations, string manipulation, working with arrays — they behave identically. The this difference becomes relevant later.
One more difference worth knowing early: you cannot use arrow functions as constructors. This will throw an error:
const Person = (name) => {
this.name = name;
};
const p = new Person("Alice"); // TypeError: Person is not a constructor
Just use a regular function or a class for that.
Real Use Cases
Inside map()
This is probably where you will use arrow functions the most.
const numbers = [1, 2, 3, 4, 5];
// normal function
const doubled = numbers.map(function(n) {
return n * 2;
});
// arrow function
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
The arrow function version is much easier to read at a glance.
Inside filter()
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]
Greeting function
const greet = name => "Hey, " + name + ". Good to see you.";
console.log(greet("Riya")); // Hey, Riya. Good to see you.
Gotcha Cases
1. Forgetting parentheses with no parameters
// wrong
const sayHi = => "Hi";
// correct
const sayHi = () => "Hi";
2. Implicit return with multiline logic
// this looks like implicit return but is actually returning undefined
const calculate = n =>
const result = n * 2; // SyntaxError — can't declare variables without {}
result + 1;
// correct
const calculate = n => {
const result = n * 2;
return result + 1;
};
3. Returning an object without parentheses
Already covered above, but worth repeating because it happens often:
// broken
const makePoint = (x, y) => { x: x, y: y }; // returns undefined
// fixed
const makePoint = (x, y) => ({ x: x, y: y });
