JavaScript Functions and Function Expressions

---

In JavaScript, functions are fundamental building blocks that allow you to organize code, make it reusable, and perform specific tasks. A function is a block of code designed to perform a particular task when called upon. JavaScript also offers function expressions, which allow you to assign functions to variables.

---

1. What is a JavaScript Function?

A JavaScript function is a block of reusable code that performs a specific task. Functions allow you to write code that can be invoked multiple times, making your programs more organized and efficient. A function is defined using the function keyword followed by a name, parameters (optional), and a block of code.

Syntax of a Function Declaration:

function functionName(parameter1, parameter2) {
  // Code to be executed
  console.log(parameter1, parameter2);
}

• functionName: The name of the function.
• parameter1, parameter2: Parameters are optional and represent values passed to the function when called.
• The code inside the curly braces {} is executed when the function is invoked.

---

2. Example of a Function Declaration

Let’s take a look at a simple function that calculates the sum of two numbers.

Example 1: Basic Function Declaration

function add(a, b) {
  return a + b;
}

let result = add(5, 3);
console.log(result); // Output: 8

Explanation:

• The function add takes two parameters (a and b) and returns their sum.
• When called with add(5, 3), it returns 8, which is then logged to the console.

---

3. Function Expressions in JavaScript

A function expression is a function that is defined inside an expression, typically assigned to a variable. Unlike function declarations, function expressions are not hoisted, meaning the function cannot be called before it is defined.

Syntax of a Function Expression:

const functionName = function(parameter1, parameter2) {
  // Code to be executed
  console.log(parameter1, parameter2);
};

• In a function expression, the function is assigned to a variable (functionName), which can then be used to invoke the function.
• Function expressions can be anonymous (without a name) or named.

---

4. Example of a Function Expression

Here’s an example where we use a function expression to create a function that multiplies two numbers.

Example 2: Basic Function Expression

const multiply = function(x, y) {
  return x * y;
};

let result = multiply(4, 5);
console.log(result); // Output: 20

Explanation:

• The function is assigned to the variable multiply. It takes two parameters (x and y) and returns their product.
• When called with multiply(4, 5), it returns 20, which is logged to the console.

---

5. Key Differences Between Function Declarations and Function Expressions

Both function declarations and function expressions are used to define functions, but there are important differences between them:

Function Declarations:

1. A function declaration is hoisted, meaning it can be called before it is defined in the code.
2. It is defined with the function keyword followed by a name.
3. Example:

   function greet() {
     console.log("Hello!");
   }
   

Function Expressions:

1. Function expressions are not hoisted, meaning the function cannot be invoked before its definition.
2. They are usually anonymous functions (functions without a name), but can be named.
3. They are assigned to variables and are often used for creating callback functions or inline functions.
4. Example:

   const greet = function() {
     console.log("Hello!");
   };
   

Comparison Table:

Feature	Function Declaration	Function Expression
Hoisting	Hoisted and can be called before defined	Not hoisted, must be defined before called
Syntax	function functionName()	const functionName = function()
Name	Must have a name	Can be anonymous or named
Use	Typically used for general-purpose functions	Often used for callback functions, event handlers

---

6. Anonymous Functions

A function expression can be anonymous, meaning the function does not have a name. Anonymous functions are commonly used for one-time tasks or passed as arguments to other functions.

Example 3: Anonymous Function Expression

setTimeout(function() {
  console.log("This is an anonymous function!");
}, 1000);

Explanation:

• This example uses an anonymous function expression as a callback for the setTimeout method. After 1 second, the anonymous function is executed, and the message is logged to the console.

---

7. Arrow Functions

JavaScript also provides a shorthand syntax for writing function expressions called arrow functions. Arrow functions are more concise and do not have their own this context.

Syntax of an Arrow Function:

const functionName = (parameter1, parameter2) => {
  // Code to be executed
  return parameter1 + parameter2;
};

Example 4: Arrow Function Expression

const add = (a, b) => a + b;

let result = add(3, 4);
console.log(result); // Output: 7

Explanation:

• The arrow function add takes two parameters and returns their sum. The => syntax makes the function more concise.
• It’s a more modern way to write function expressions in JavaScript.

---

8. IIFE (Immediately Invoked Function Expression)

An IIFE is a function that is defined and executed immediately after its creation. This is commonly used to create a private scope for variables, preventing them from polluting the global scope.

Syntax of an IIFE:

(function() {
  // Code to be executed immediately
  console.log("I am an IIFE!");
})();

Example 5: IIFE

(function() {
  let message = "Hello from the IIFE!";
  console.log(message);
})();

Explanation:

• The function is defined and immediately executed inside the parentheses. The message variable is not accessible outside the IIFE, creating a local scope.

---

---