This content originally appeared on DEV Community and was authored by Jess Alejo
Okay, so I keep running into this: should I use an arrow function or a function declaration? They both work, but there are some sneaky differences. Let's talk it out.
The Two Approaches
Here’s what I mean. Both of these do the same thing—find a user by id from a list:
Arrow Function Expression
const getUserById = userId => usersFromServer.find(user = user.id === userId);
Function Declaration
function getUserById(userId) {
return usersFromServer.find(user = user.id === userId);
}
Looks basically the same, right? But nah, there's more going on here.
The Real Differences
1. Syntax & Readability
- Arrow functions are slick and short, especially for simple stuff. No need for
returnif it's a one-liner. - Function declarations are a little bulkier but sometimes clearer, especially for bigger functions.
2. Hoisting
- Function declarations? Hoisted. I can use them before they're even written in the code. Magic.
- Arrow functions? Nope. They exist only after the line they're defined on. Try calling one before, and boom—error.
Example:
const usersFromServer = [{id: 1, name: "Jess"}, {id: 2, name: "Jane"}];
console.log(getUserById(1));
function getUserById(id) {
return usersFromServer.find(user => user.id === id);
}
//-> {id: 1, name: 'Jess'} ✅ Works fine
const usersFromServer = [{id: 1, name: "Jess"}, {id: 2, name: "Jane"}];
console.log(getUserById(1));
const getUserById = (id) => usersFromServer.find(user => user.id === id);
//-> Uncaught ReferenceError: getUserById is not defined ❌ Error
3. this is Weird
- Arrow functions don't have their own
this. They just borrow it from wherever they're written. - Function declarations? They have their own
thisand change depending on how they're called.
Check this out:
const user = {
id: 1,
getId: () => this.id // ❌ 'this' is NOT the user object
}
console.log(user.getId());
//-> undefined
Now compare:
const user = {
id: 1,
getId() { return this.id } // ✅ 'this' actually refers to the user object
};
console.log(user.getId());
//-> 1
See the problem? Arrow functions don't play nice in objects.
4. When to Use What?
| Feature | Arrow Function | Function Declaration |
|---|---|---|
| Short & clean? | ✅ Yes | ❌ Nope |
| Hoisted? | ❌ Nope | ✅ Yep |
Own this? |
❌ Nope (inherits) | ✅ Yep (changes dynamically) |
| Good for objects? | ❌ Nope | ✅ Yep |
So, What's the Verdict?
- Arrow functions = great for quick, simple stuff, especially when
thisdoesn't matter (like callbacks). - Function declarations = better when hoisting or
thismatters, like object methods.
Final Thought
Honestly, I just use arrow functions whenever possible—unless this starts acting up. Then I switch. Simple as that. 🚀
This content originally appeared on DEV Community and was authored by Jess Alejo
Jess Alejo | Sciencx (2025-02-03T23:13:56+00:00) Arrow Functions vs Function Declarations in JavaScript. Retrieved from https://www.scien.cx/2025/02/03/arrow-functions-vs-function-declarations-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.