Func Declaration vs Expression vs Statement vs Anonymous vs First Class

Functions in programming are like recipes in cooking. They are sets of instructions that we can reuse whenever we need to perform a specific task. In JavaScript, functions are fundamental building blocks that allow us to organize code and make it reusable.

Function Declaration

Definition

Function declarations are a way to create named functions. They start with the keyword function, followed by the function name, parameters (if any), and the function body enclosed in curly braces {}.

Example

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

Explanation

In this example:

• function keyword declares a function named greet.
• name is a parameter that the function expects.
• { return ... } is the function body where the actual code executes.

Function Expression

Definition

Function expressions are similar to function declarations but are assigned to variables. They can be named (like below) or anonymous.

Example

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

Explanation

Here:

• const greet creates a variable greet.
• function(name) { ... } is the function expression itself.
• It can be used like greet("Alice") to get "Hello, Alice!".

Function Statement (Hoisting)

Definition

Function statements, also known as function declarations, are hoisted in JavaScript. This means they are moved to the top of their scope during the compilation phase, allowing them to be used before they are defined in the code.

Example

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

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

Explanation

Here:

• The function greet is called before its definition in the code.
• JavaScript's hoisting moves the function declaration to the top, making it accessible even before its actual placement in the code.

Anonymous Functions

Definition

Anonymous functions are functions without a name. They are usually defined inline and are commonly used as arguments to other functions or assigned to variables.

Example

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

console.log(greet("Bob")); // Outputs: "Hello, Bob!"

Explanation

• function(name) { ... } is an anonymous function assigned to const greet.
• It behaves similarly to named functions but lacks a name for direct referencing.

First-Class Functions

Definition

In JavaScript, functions are first-class citizens, meaning they can be:

• Assigned to variables and properties of objects.
• Passed as arguments to other functions.
• Returned from other functions.

Example

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

const greetFunc = greet;

console.log(greetFunc("Charlie")); // Outputs: "Hello, Charlie!"

Explanation

• greet is assigned to greetFunc, demonstrating functions as values that can be stored and used just like other data types.

Conclusion

Understanding the different types of functions in JavaScript—declarations, expressions, statements, anonymous functions, and first-class functions—provides a solid foundation for writing clean, reusable, and efficient code. By mastering these concepts, you empower yourself to create more organized and modular programs.

Comments

[Jon Randy 🎖️]

Function expressions are similar to function declarations but are assigned to variables. They can be named (like below) or anonymous.

Function expression doesn't have to involve assignment. Assignment and function expression are two different things.

Also, your 'named' function expression doesn't have it's own name... and the function in the 'anonymous function' example is being assigned to a variable, which makes it cease to be anonymous. Whether or not a function has a name (and therefore whether it is anonymous or not) can be verified by checking the function's name property.

[Alexandre Lima]

Gostei e é justamente o que estou aprendendo agora em minhas aulas de javascript.