Comprehensive Overview of JavaScript Functions: From Basic Statements to First-Class Functions


JavaScript functions are incredibly powerful. But when terms like function statement
, function expression
, or first-class functions
come up, many developers get confused—even though they’ve been using these concepts for years.
This article explains these essential JavaScript concepts in a beginner-friendly and example-rich way, helping you understand what they truly mean — and how they work under the hood.
📌 Topics Covered:
- Function Statement (Declaration)
- Function Expression
- Anonymous Functions
- Named Function Expression
- Hoisting Differences
- Parameters vs Arguments
- First-Class Functions Explained Simply
🔹 1. Function Statement (aka Function Declaration)
A function statement (also called a declaration) is the most common way of creating functions.
function greet() {
console.log("Hello!");
}
greet(); // Output: Hello!
✅ This form is hoisted — meaning it can be called before it is defined in the code.
sayHi(); // ✅ Works
function sayHi() {
console.log("Hi!");
}
🔹 2. Function Expression
In JavaScript, functions are first-class values. That means they can be assigned to variables — this is called a function expression.
const greet = function () {
console.log("Hello from expression!");
};
greet(); // Output: Hello from expression!
❌ Not hoisted! Calling this before the line it's defined will throw an error:
greet(); // ❌ Cannot access 'greet' before initialization
const greet = function () {
console.log("Oops");
};
However, if you use var
instead of const
, the behavior changes due to how var
is hoisted. With var
, the variable is hoisted (initialized as undefined
), but the function itself is still assigned at runtime.
greet(); // ❌ TypeError: greet is not a function
var greet = function () {
console.log("Oops");
};
In this case, greet
is hoisted as a variable with value undefined
, so calling it before initialization results in a TypeError
instead of a ReferenceError
.
🔹 3. Anonymous Function
An anonymous function is simply a function without a name:
const log = function () {
console.log("I'm anonymous!");
};
log();
⚠️ Anonymous functions cannot be used in a standalone way:
function () {
console.log("Invalid syntax");
}
// ❌ SyntaxError: Function statements require a function name
✅ They are valid only as values — such as when passed into a function:
setTimeout(function () {
console.log("This is anonymous");
}, 1000);
🔹 4. Named Function Expression
Sometimes, a function expression also has a name:
const greet = function sayHello() {
console.log("Hello from named function expression");
};
greet(); // ✅ Works
sayHello(); // ❌ ReferenceError: sayHello is not defined
🧠 The name sayHello
exists only inside the function body. Useful for recursion or self-reference.
🔹 5. Hoisting: Function Statement vs Function Expression
Feature | Function Statement | Function Expression |
Syntax | function foo() {} | const foo = function(){} |
Hoisted? | ✅ Yes | ❌ No |
Name Required? | ✅ Yes | ❌ Optional |
Execution Before Declaration | ✅ Allowed | ❌ Not Allowed |
🔹 6. Parameters vs Arguments
These two are often misunderstood but serve different roles:
function sum(a, b) {
return a + b;
}
sum(3, 4);
a
andb
→ Parameters (used in function definition)3
and4
→ Arguments (passed when calling the function)
Understanding this distinction helps build better function APIs and prevents confusion when reading technical docs.
🔹 7. First-Class Functions
JavaScript treats functions as first-class citizens — meaning they can:
✅ Be assigned to variables\ ✅ Be passed as arguments\ ✅ Be returned from other functions
♻️ Functions as Values
const greet = function () {
console.log("Hello!");
};
➕ Passing Functions as Arguments
function run(callback) {
callback();
}
run(function () {
console.log("Callback called");
});
↺ Returning Functions
function outer() {
return function () {
console.log("Inner function returned");
};
}
const inner = outer();
inner(); // Output: Inner function returned
📌 This behavior — treating functions as values — is what makes them first-class functions in JavaScript.
✅ Summary Table
Concept | Description |
Function Statement | Named, hoisted |
Function Expression | Can be anonymous, not hoisted |
Anonymous Function | No name, used as value |
Named Function Expression | Name scoped inside only |
First-Class Function | Used as value, argument, or return |
Parameters | Local labels in function definition |
Arguments | Actual values passed to function |
🎯 Final Thoughts
JavaScript functions are far more powerful than they seem at first glance. From how they’re created, hoisted, passed around, and returned — to their special status as first-class citizens — functions form the very foundation of modern JS development.
Grasping these concepts helps not only in writing better code but also in understanding others’ code, documentation, and frameworks more effectively.
🙏 Thank You!
Thank you for reading!
I hope you enjoyed this post. If you did, please share it with your network and stay tuned for more insights on software development. I'd love to connect with you on LinkedIn or have you follow my journey on HashNode for regular updates.
Happy Coding!
Mitesh Kukdeja
Subscribe to my newsletter
Read articles from Mitesh Kukdeja directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Mitesh Kukdeja
Mitesh Kukdeja
Turning ideas into smooth, scalable mobile experiences — one line of code at a time. Hi, I’m Mitesh Kukdeja — a passionate React Native developer with 2+ years of hands-on experience building cross-platform apps that delight users and deliver results. From health and fitness platforms to job boards and music contest apps, I’ve helped bring a wide range of product visions to life. What sets me apart is my obsession with clean, reusable code and user-centric UI/UX. I specialize in React Native, TypeScript, Redux Toolkit, Firebase, and REST API integration—making sure every app I build is responsive, secure, and ready for scale. I’ve also deployed apps to both the Play Store and App Store, managing the full release cycle. My projects have included integrating real-time features like video conferencing (Agora), personalized push notifications, and advanced security implementations for enterprise clients like Godrej. Whether it’s debugging a performance bottleneck or designing a scalable component architecture, I’m all in. My goal is to keep solving meaningful problems through technology while collaborating with creative minds. I thrive in fast-paced environments where innovation and impact matter. If you’re building something exciting in mobile or looking for a tech partner who values quality and performance — let’s connect!