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

Mitesh KukdejaMitesh Kukdeja
4 min read

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:

  1. Function Statement (Declaration)
  2. Function Expression
  3. Anonymous Functions
  4. Named Function Expression
  5. Hoisting Differences
  6. Parameters vs Arguments
  7. 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

FeatureFunction StatementFunction Expression
Syntaxfunction 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 and bParameters (used in function definition)
  • 3 and 4Arguments (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

ConceptDescription
Function StatementNamed, hoisted
Function ExpressionCan be anonymous, not hoisted
Anonymous FunctionNo name, used as value
Named Function ExpressionName scoped inside only
First-Class FunctionUsed as value, argument, or return
ParametersLocal labels in function definition
ArgumentsActual 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

1
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!