if you’ve been writing javascript for a while, you’re used to the function keyword. it’s like a classic formal letter—it gets the job done, but it’s a bit wordy and feels a bit old-school.
arrow functions (introduced in ES6) are like sending a quick text message. they are shorter, cleaner, and honestly, they just look more modern. they were built to reduce "boilerplate"—that extra fluff code we used to write over and over again.
open your browser console (f12) and let's see why everyone is switching to the arrow.
Why did arrow functions even come?
imagine you’re at a cafe. instead of saying, "excuse me, waiter, could i please have one cup of black coffee,"
you just say, "one black coffee, please.
" the "problem" with old functions was that they were too wordy.
every time you wanted to do something tiny, you had to write the word function, then {}, then return.
arrow functions were created to cut the noise and let you focus on the logic.
1. The basic syntax: the conversion
the "arrow" (=>) basically replaces the function keyword. it’s like a shortcut that tells javascript: "here is an input, and here is what i want you to do with it."
the old way (normal function):
function sayHi() {
return "hey, what's up?";
}
the modern way (arrow function):
const sayHi = () => {
return "hey, what's up?";
};
2. handling parameters (one vs. many)
arrow functions get even cooler when you start passing data into them.
one parameter: the ultra-shortcut
if you only have one input, you don't even need the parentheses ().
// old way
function square(n) {
return n * n;
}
// arrow way (look how clean this is!)
const square = n => n * n;
multiple parameters: keep the brackets
if you have two or more inputs, you keep the parentheses so the computer doesn't get confused about where the inputs start.
const add = (a, b) => a + b;
console.log(add(5, 10)); // result: 15
3. implicit vs. explicit return (the magic trick)
this is where arrow functions really shine.
explicit return: you manually write the word return inside curly braces {}.
implicit return: if your code is just one line, you can delete the {} and the word return.
it’s "implied"—javascript just knows you want to return that value. it’s like your best friend knowing exactly what you want to eat without you having to say the whole order.
// explicit (formal)
const double = (n) => {
return n * 2;
};
// implicit (modern/short)
const double = n => n * n;
4. arrow vs. normal: what’s the difference?
besides looking cooler, there are a few things to keep in mind:
no function keyword: you save space and time.
readability: when you use arrow functions inside things like map or filter, your code starts reading like a sentence.
this keyword: normal functions and arrow functions handle the word this differently. for now, just think of arrow functions as being more "loyal"—they keep the context of where they were born, which makes them great for things like timers or buttons.
try it in your console!
the best way to learn is to type it out. don't just copy-paste; try to write these from memory in your console:
the greeting: create an arrow function that takes a name and returns "hello [name]".
the math: create an arrow function that takes two numbers and returns their product (multiplication). use the implicit return (no {} or return keyword!).
the array challenge:
create an array: let nums = [2, 5, 10, 15];
use map() with an arrow function to double every number.
use filter() with an arrow function to only keep numbers greater than 10.
