JavaScript Functions

What is Function?

In JavaScript, a function is a block of code that can be executed one or multiple times, optionally with some input (referred to as "arguments"), and potentially returning some output (referred to as the "return value"). A function can also be defined as a reusable piece of code that can be called by other parts of the program. Functions can help to organize and structure your code, making it easier to read, debug, and maintain.

A function is defined using the function keyword, followed by a name (for named functions), a list of parameters within parentheses, and a block of code within curly braces.

function exampleFunction(param1, param2) {
    // code to be executed
    return result;
}
//invoked or called by using its name followed by the parentheses and passing in any required arguments.
exampleFunction(arg1, arg2);

Function Declaration :

A function declaration is a way to define a function in JavaScript. It uses the function keyword, followed by the function's name, a list of parameters within parentheses, and a block of code within curly braces. The function name is required, and it is called a named function because it has a name.

function addNumbers(x, y) {
    return x + y;
}
//In this example, the function's name is "addNumbers", and it has two parameters "x" and "y", the function takes two arguments and return the sum of both.

ExampleFunction();
function ExampleFunction(){
    console.log('Hello World')
}

Function declaration also can be defined as part of a statement and a function object will be returned but it will not have a name.

Function Expression :

A function expression is another way to define a function in JavaScript. It is similar to a function declaration, but it is typically assigned to a variable.

In function expression, you can create a function and assign it to a variable at the same time. It uses a variable, then the function keyword and the function definition. The function definition can be anonymous (does not have a name) or named.

let addNumbers = function(x, y) {
    return x + y;
};
//the variable addNumbers references the anonymous function, which has the same functionality as the function declaration example I provided earlier.

Function expressions are called in the same way as function declarations.

You can call a function expression by using the variable name assigned to it, followed by parentheses and any required arguments.

//console.log(sum(10, 50)); function exprssion not hoisted won't work
let sum = function (a, b) {
  return a + b;
};

console.log(sum(10, 50));

Named Function Expression :

A named function expression is a type of function expression that has a name. It is defined by assigning a variable to a function using the function keyword, followed by the function's name, a list of parameters within parentheses, and a block of code within curly braces.

let addNumbers = function namedAddNumbers(x, y) {
    return x + y;
};
console.log(addNumbers(10,20)) //work
//console.log(namedAddNumbers(10,20)) Error:

The name of the function can be useful in certain situations, such as for debugging. For example, in certain environments, the name of the function will appear in stack traces, making it easier to trace the source of an error.

Arrow Function :

An arrow function, also known as a "fat arrow function", is a shorthand syntax for defining anonymous functions in JavaScript. It was introduced in ECMAScript 6 and has a more concise syntax than traditional function expressions or declarations.

Here's an example of an arrow function:

let addNumbers = (x, y) => {
  return x + y;
};

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

In this example, the addNumbers variable references an anonymous function that takes two arguments x and y, and returns the sum of both. This can be written in more traditional way as

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

//they both are same

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

console.log(addNumber(10, 54));

If your code contains only a single line of code so you can omit the {} bracket and return.