In JavaScript, there are two common ways to define functions: function expressions and function declarations. Although they achieve the same result—creating a callable function—there are important differences between the two.

---

1. var functionName = function() {} (Function Expression)

A function expression defines a function as part of a variable assignment.

Example:

javascriptCopy codevar myFunction = function() {
    console.log("This is a function expression.");
};

Key Characteristics:

1. Anonymous or Named:
   Function expressions can be anonymous (no name) or named.javascriptCopy codevar myFunction = function namedFunction() {}; // Named var myFunction = function() {}; // Anonymous
2. Not Hoisted:
   Function expressions are not hoisted to the top of their scope. This means you cannot call the function before it is defined.javascriptCopy codeconsole.log(myFunction); // undefined var myFunction = function() { console.log("Hello!"); };
3. Variable Scope:
   The function’s scope depends on the variable’s scope (e.g., var, let, or const).

---

2. function functionName() {} (Function Declaration)

A function declaration defines a named function directly.

Example:

javascriptCopy codefunction myFunction() {
    console.log("This is a function declaration.");
}

Key Characteristics:

1. Always Named:
   Function declarations are always named.
2. Hoisted:
   Function declarations are hoisted, meaning the entire function is moved to the top of its scope during the compilation phase. This allows the function to be called before it is defined.javascriptCopy codemyFunction(); // Works! function myFunction() { console.log("Hello!"); }
3. Global Object Binding (Non-Strict Mode):
   In non-strict mode, if a function is declared in the global scope, its name is added as a property of the global object (window in browsers).

---

Differences at a Glance

Feature	Function Expression	Function Declaration
Syntax	var func = function() {}	function func() {}
Name	Optional (can be anonymous)	Always named
Hoisting	Not hoisted	Hoisted
Call Before Definition	Results in undefined or error	Works fine
Use Case	Dynamic or conditional function creation	Static, reusable functions

---

Practical Examples

Example 1: Hoisting

javascriptCopy code// Function Declaration
hello(); // Works!
function hello() {
    console.log("Hello, world!");
}

// Function Expression
try {
    greet(); // Error: greet is not a function
} catch (e) {
    console.error(e);
}
var greet = function() {
    console.log("Hi!");
};

---

Example 2: Anonymous vs. Named Function Expressions

javascriptCopy code// Anonymous Function Expression
var sayHello = function() {
    console.log("Hello!");
};
sayHello(); // Hello!

// Named Function Expression
var sayHi = function greet() {
    console.log("Hi!");
};
sayHi(); // Hi!

---

Example 3: Use in Conditional Logic

Function expressions are ideal for defining functions conditionally.

javascriptCopy codeif (true) {
    var myFunc = function() {
        console.log("Conditionally defined function.");
    };
}
myFunc(); // Works only if the condition is true

Function declarations cannot be used conditionally in the same way.

---

When to Use Which?

• Use Function Declarations when:
  • You need the function to be available throughout its scope (hoisting).
  • You are writing reusable utility functions or library functions.
• Use Function Expressions when:
  • The function needs to be defined conditionally or dynamically.
  • You want tighter control over when the function is available.
  • You prefer using modern syntax like const or let for scoping.

---

Conclusion

Both function expressions and function declarations are useful, but understanding their behavior—especially hoisting and scope—is crucial for writing clean, bug-free JavaScript code.