Introduction

This topic covers the different ways to define functions in JavaScript, including function declarations and function expressions. It explains the syntax and nuances of each method.

Function Declarations

Function declarations are defined using the function keyword, followed by the function name, parentheses () for parameters, and curly braces {} for the function body. Function declarations are hoisted, meaning they can be called before they are defined in the code.

 function greet(name) {
                return "Hello, " + name + "!";
            }

            console.log(greet("World")); // Output: Hello, World! 

• Syntax: function functionName(parameters) { // function body }
• Hoisting: Function declarations are hoisted, allowing you to call the function before it is declared in the code.
• Named functions: Function declarations always have a name.

Function Expressions

Function expressions define a function as part of an expression. The function can be anonymous (without a name) or named. Function expressions are not hoisted, so they must be defined before they are called.

Anonymous Function Expressions

An anonymous function expression assigns a function without a name to a variable.

 const greet = function(name) {
                return "Hello, " + name + "!";
            };

            console.log(greet("World")); // Output: Hello, World! 

• Syntax: const variableName = function(parameters) { // function body };
• Not hoisted: Function expressions are not hoisted and must be defined before they are used.
• Anonymous: The function itself does not have a name.

Named Function Expressions

A named function expression assigns a function with a name to a variable. While the name is available within the function, it is typically not accessible outside of it. This can be useful for debugging and recursion.

 const greet = function greetFunction(name) {
                return "Hello, " + name + "!";
            };

            console.log(greet("World")); // Output: Hello, World!
            // console.log(greetFunction("World")); // Throws an error: greetFunction is not defined 

• Syntax: const variableName = function functionName(parameters) { // function body };
• Not hoisted: Function expressions are not hoisted and must be defined before they are used.
• Named: The function itself has a name which is accessible within the function's scope.

Arrow Functions (ES6)

Arrow functions provide a more concise syntax for writing function expressions. They are always anonymous.

 const greet = (name) => "Hello, " + name + "!";

            console.log(greet("World")); // Output: Hello, World! 

• Syntax: (parameters) => expression or (parameters) => { // function body }
• Not hoisted: Arrow functions are not hoisted.
• Concise syntax: Ideal for simple, single-expression functions.
• Lexical this binding: Arrow functions do not bind their own this value; they inherit it from the surrounding scope. This is a key difference from regular function expressions.

Choosing a Function Definition Method

• Use function declarations when you need hoisting.
• Use function expressions (especially arrow functions) when you need more control over the function's scope and when writing concise functions.
• Arrow functions are well-suited for callbacks and short, functional operations.