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:

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

---

🔹 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 b → Parameters (used in function definition)
• 3 and 4 → 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

---

🎯 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