03.Functions.md

Functions In Javascript

What is a Function?

A function in JavaScript is similar to a procedure - a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

In simpler words, A JavaScript function is a block of code designed to perform a particular task.

---

Defining Functions

Function Definition Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

function name(parameter1, parameter2, parameter3) { // any number of parameters

  // code to be executed

}

Lets take an example:

function areaOfSquare(side) {
    return side * side;
}

Here, the function areaOfSquare takes one parameter, called side. The function consists of one statement that says to return the parameter of the function multiplied by itself to calculate the area of the square. The statement return specifies the value returned by the function.

---

Parameters and Arguments

• Parameters

---

Function Invocation

The code inside a function is executed when it is invoked (or called).

Defining a function does not execute it. Defining it names the function and specifies what to do when the function is called.

Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function areaOfSquare, you could call it as follows:

function areaOfSquare(side) { // Function Definition
    return side * side;
}

areaOfSquare(5); // Function Call

To actually use the value returned by the function, We have to either store it in a variable or use it in a expression.

const side5 = areaOfSquare(5); // Storing returned value in variable
const side 10 = areaOfSquare(10);

const sumOfAreas = areaOfSquare(6) * areaOfSquare(8); // Using returned value in a expression

Anonymous Functions

Anonymous Function is a function that does not have any name associated with it. Normally we use the function keyword before the function name to define a function in JavaScript, however, in anonymous functions in JavaScript, we use only the function keyword without the function name.

An anonymous function is not accessible after its initial creation, it can only be accessed by a variable it is stored in as a function as a value. An anonymous function can also have multiple arguments, but only one expression.

Function Expressions

Function Expression allows us to create an anonymous function which doesn’t have any function name which is the main difference between Function Expression and Function Declaration.

A function expression can be used as an IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined.

(function () {
  // …
})();

A function expression has to be stored in a variable and can be accessed using variableName.

const getRectArea = function(width, height) { // Function Expression
  return width * height;
};

console.log(getRectArea(3, 4));

Function expressions are convenient when passing a function as an argument to another function.

Higher Order Functions

A higher order function is a function that takes a function as an argument, or returns a function.

Higher order functions provide a higher level of abstraction than typical functions.

Lets take an example of adding a number to an array without using higher order functions:

const numbers = [1, 2, 3, 4, 5];

function addOne(array) {
  for (let i = 0; i < array.length; i++) {
    console.log(array[i] + 1);
  }
}

addOne(numbers);

The function addOne() accepts an array, adds one to each number in the array, and displays it in the console. The original values remain unchanged in the array, but the function is doing something for each value.

However, using what may be the most common higher order function, forEach(), we can simplify this process:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => console.log(number + 1));

You've noticed that the forEach() higher order function is predefined JavaScript function.

Here's an example of a user made higher order function:

function map(func, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = func(a[i]);
  }
  return result;
}

const f = function (x) {
  return x * x * x;
}

const numbers = [0, 1, 2, 5, 10];
const cube = map(f, numbers);
console.log(cube);

---

---