JavaScript function declarations and function expressions

In JavaScript, understanding the distinction between function declarations and function expressions is crucial for writing effective and predictable code. Here's a comprehensive breakdown:

🧠 Function Declarations

A function declaration defines a named function using the function keyword

function greet(name) {
  return `Hello, ${name}!`;
}

Key Characteristics:

• Hoisting:Function declarations are hoisted entirely, meaning both their name and body are moved to the top of their scope during the compilation phase. This allows you to call the function before its declaration in the code

  console.log(greet('Alice')); // Outputs: Hello, Alice!

  function greet(name) {
    return `Hello, ${name}!`;
  }

• Named Functions:Always have a name, which is useful for recursion and debugging

• Global Scope (if declared globally):When declared in the global context, they become global functions

🧩 Function Expressions

A function expression involves creating a function and assigning it to a variable.

const greet = function(name) {
  return `Hello, ${name}!`;
};

Key Characteristics:

• Not Hoisted Only the variable declaration (greet) is hoisted, not the function assignment. Attempting to call the function before its definition results in an erro.

  console.log(greet('Alice')); // TypeError: greet is not a function

  const greet = function(name) {
    return `Hello, ${name}!`;
  };

• Anonymous or Named Can be anonymous (as above) or named. Named function expressions can aid in debuggin.

  const greet = function greetFunction(name) {
    return `Hello, ${name}!`;
  };

• Useful for Callbacks and IIFEs Commonly used in scenarios like callbacks or Immediately Invoked Function Expressions (IIFEs).

  (function() {
    console.log('IIFE executed!');
  })();

🔍 Comparative Summery

📌 When to Use Which?

• Function Declarations: Ideal when you need to define reusable functions that can be invoked before their definition in the code.

• Function Expressions: Preferable in situations requiring functions as values—such as callbacks, event handlers, or when creating closures. They offer more control over the function's scope and timing of execution.

Understanding these differences ensures better control over function behavior and scope in your JavaScript programs.