Functions in JavaScript – Part 2

In Part 1, we learned about function declaration, function calling, parameters, arguments, and the return statement.

In this part, we will learn about different ways of creating functions in JavaScript. These include Function Expression, Anonymous Function, Arrow Function, and Default Parameters.

1. Function Expression

A function expression is a function that is stored inside a variable.

For example:

let greet = function() {
    console.log("Hello, JavaScript");
};

greet();

Output:

Hello, JavaScript

Here, the function does not have a name. Instead, the function is assigned to the variable greet.

We call the function using the variable name:

greet();

Function Declaration vs Function Expression

Function Declaration	Function Expression
Uses the function keyword with a function name	Function is assigned to a variable
Example: function greet() {}	Example: let greet = function() {}
Function has a name	Function can be anonymous
Can be called before its declaration because function declarations are hoisted	Cannot be safely called before the assignment

2. Anonymous Function

An anonymous function is a function without a name.

For example:

let message = function() {
    console.log("Welcome");
};

message();

Output:

Welcome

Here, the function does not have a name. It is stored inside the message variable.

Anonymous functions are commonly used when we need a function for a specific purpose and do not need to give the function a separate name.

3. Arrow Function

An arrow function is a shorter way of writing a function. It was introduced in ES6 and uses the arrow => syntax.

For example:

let greet = () => {
    console.log("Hello");
};

greet();

Output:

Hello

Here, () represents the parameters and => is the arrow syntax.

Arrow Function with Parameters

An arrow function can also accept parameters.

let add = (a, b) => {
    return a + b;
};

console.log(add(10, 20));

Output:

30

Here, a and b are parameters, and the function returns their sum.

Shorter Arrow Function

If an arrow function contains only one statement that returns a value, we can write it in a shorter form.

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

console.log(add(10, 20));

Output:

30

Here, the return keyword and curly braces are not required because the expression is returned automatically.

4. Default Parameters

Default parameters allow us to provide a default value for a parameter when no argument is passed to the function.

For example:

function greet(name = "Guest") {
    console.log("Hello, " + name);
}

greet();

Output:

Hello, Guest

Here, no argument is passed to greet(), so JavaScript uses the default value "Guest".

If we provide an argument, the provided value is used instead.

function greet(name = "Guest") {
    console.log("Hello, " + name);
}

greet("Maha");

Output:

Hello, Maha

Here, "Maha" replaces the default value "Guest".

Conclusion

JavaScript provides different ways to create and write functions. A function expression stores a function inside a variable, while an anonymous function is a function without a name. An arrow function provides a shorter syntax for writing functions, and default parameters allow us to provide default values when arguments are not supplied.

These function types make JavaScript code more flexible, reusable, and easier to write. In the next part, we will explore more advanced function concepts such as callback functions, nested functions, and closures.