Function Declaration vs Function Expression

Jul 24, 2025

JavaScript Functions: Declaration vs. Expression Explained

Functions are the building blocks of JavaScript, but did you know there are different ways to define them? Terms like Function Declaration, Function Expression, Anonymous Function, and Named Function Expression can sound confusing. In this post, we’ll break them down with clear examples, so you can understand their differences and use them confidently.

Function Declaration (aka Function Statement or Definition)

A Function Declaration (also called a Function Statement or Function Definition) is the standard way to define a function in JavaScript. It starts with the function keyword, followed by a name, parameters in parentheses, and a body in curly braces.

Here’s the structure:

function functionName(param1, param2) {
  // function body
}

When the JavaScript parser sees a statement starting with function, it recognizes it as a Function Declaration. These are hoisted, meaning you can call the function before its definition in the code.

For example:

greet(); // Works! Prints: Hello, JavaScript!

function greet() {
  console.log("Hello, JavaScript!");
}
ℹ️

Function Declarations are hoisted, so you can call them anywhere in your code, even before they’re defined. But avoid this to keep your code readable!

Function Expression

A Function Expression involves assigning a function to a variable. In JavaScript, any statement that assigns a value to a variable is an expression, so this is called a Function Expression.

Here’s how it looks:

var fun = function() {
  console.log("This is a Function Expression!");
};

You can invoke the function using the variable name:

fun(); // Prints: This is a Function Expression!
console.log(typeof fun); // Prints: function

The function in this example is an Anonymous Function because it has no name. You use the variable (fun) to call it.

Named Function Expression

You can also give the function a name, creating a Named Function Expression:

var fun = function myFunction() {
  console.log("This is a Named Function Expression!");
};

Here’s a key point: the name myFunction is only available inside the function’s scope. Outside, you must use the variable fun to call it:

fun(); // Works! Prints: This is a Named Function Expression!
myFunction(); // Error: myFunction is not defined

This is useful for debugging or recursion, as the function can refer to itself by name within its scope.

Key Differences: Declaration vs. Expression

The biggest difference between Function Declarations and Function Expressions is hoisting:

  • Function Declarations are fully hoisted. The entire function (name and body) is available before execution, so you can call it anywhere:
sayHi(); // Works! Prints: Function Declarations are hoisted

function sayHi() {
  console.log("Function Declarations are hoisted");
}
  • Function Expressions are not hoisted. Only the variable declaration is hoisted (set to undefined), so calling the function before its assignment causes an error:
sayHello(); // Error: sayHello is not a function

var sayHello = function() {
  console.log("Function Expressions are not hoisted");
};
⚠️

Avoid calling functions before their declaration to keep your code predictable and easier to maintain.

Conclusion

Understanding the difference between Function Declarations and Expressions helps you write cleaner, more predictable code. Declarations are great for top-level functions, while Expressions are useful when you need to assign functions to variables or pass them as arguments. Knowing about hoisting and scope also prevents common bugs.

Hope this article helps you understand the differences between Function Declarations and Function Expressions! If you have any questions feel free to reach out to me on LinkedIn.

Manak Upadhyay