okay so i finally get arrow functions
so i've been avoiding this topic for like two weeks ngl. every time i opened the MDN page i just closed it after 30 seconds. but today i sat down and actually got it i think?? so im writing this while i still remember everything lol
okay so basically arrow functions are just a shorter way to write functions in javascript. that's literally it. i was so scared for nothing.
the normal function (the old way)
so you know how you'd normally write a function like this right:
function add(a, b) {
return a + b;
}
yeah that's fine. but arrow functions let you write the same thing way shorter. let me show you the transformation —
normal function
function add(a, b) {
return a + b;
}
→
arrow function
const add = (a, b) => {
return a + b;
}
okay so what changed? you remove the word function, you put the parameters, then you write => (that's the arrow btw, hence the name lol), then the body. and you store it in a const.
syntax breakdown
let me break it down piece by piece because i needed this when i was learning:
const greet = (name) => {
return "hello " + name;
}
// const → stores the function in a variable
// greet → that's the function name
// (name) → parameter(s), just like normal
// => → the arrow! this is what makes it "arrow function"
// { } → the function body
one parameter? you can skip the brackets
okay this one is cool. if your function only has ONE parameter you don't even need the parentheses around it
// with parentheses (also fine)
const square = (n) => {
return n *n;
}
// without parentheses (also fine, same thing)
const square = n => {
return n* n;
}
both work. personally i still write the brackets because i keep forgetting i can skip them lol but its good to know when you're reading other people's code
multiple parameters
multiple params? just put them all in the brackets with commas, same as always:
const multiply = (a, b) => {
return a * b;
}
multiply(3, 4); // returns 12
nothing tricky here honestly
okay THIS part took me a while — implicit return
so here's the thing that confused me for a bit. if your function only has ONE line and it's just returning something, you can skip the curly braces AND the return keyword. it's called an implicit return.
with explicit return
const double = n => {
return n * 2;
}
→
with implicit return
const double = n => n * 2;
same exact function!! the second one is just shorter. no curly braces, no return keyword, javascript just knows you want to return that value.
just remember — implicit return only works when your function body is a SINGLE expression. if you have multiple lines of logic you still need the curly braces and return.
// this works with implicit return
const greet = name => "hey " + name;
// this CANNOT use implicit return (multiple lines)
const greetFormal = name => {
const msg = "Good morning, " + name;
return msg;
}
arrow function vs normal function — quick difference
so i won't go deep into this right now because honestly that'll need its own post but the main simple difference is:
// normal function — you call it by name anywhere
function sayHi() {
console.log("hi");
}
sayHi(); // works even if defined below the call (hoisting)
// arrow function — stored in a variable, no hoisting
const sayHi = () => console.log("hi");
sayHi(); // works, but only if defined BEFORE the call
for most stuff you're doing as a beginner this doesn't matter much. arrow functions are just cleaner and most modern js code uses them everywhere.
arrow functions inside map() — this is so useful
okay one quick thing before the assignment. arrow functions look SO clean inside array methods like map():
const nums = [1, 2, 3, 4, 5];
// without arrow function
const doubled = nums.map(function(n) {
return n *2;
});
// with arrow function (same result, much cleaner)
const doubled =* nums.map(n => n 2);
console.log(doubled); // [2, 4, 6, 8, 10]
yeah. that's why everyone uses arrow functions. readability goes up a lot.
assignment (i did these too, try them yourself)
1. write a normal function that returns the square of a number, then rewrite it as an arrow function
// normal
function square(n) {
return n *n;
}
// arrow (explicit return)
const square = n => n* n;
2. arrow function that returns whether a number is even or odd:
const evenOrOdd = n => n % 2 === 0 ? "even" : "odd";
evenOrOdd(4); // "even"
evenOrOdd(7); // "odd"
3. use arrow function inside map():
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9, 16, 25]
okay that's everything i learned today. honestly arrow functions are not scary at all, i think the syntax just looks weird at first. once you write like 10 of them it becomes second nature.
next i want to learn about .filter() and .reduce() because i keep seeing them everywhere and have no idea what they do lol