All about JS functions(Part - 1)

·

3 min read

Functions (Reusable block of code)

Functions are like storing specific parts of code inside it and whenever we want to use that part of code we simply call that function. This helps us no need to write the code again and again. If we want to execute the code multiple times, then we call functions but not by repeating code.

Syntax :

function function_name(){
     Statements
}
Ex: 
function printHello() {
    console.log("Hello");
}

We declare and define a function as per shown above. When we need to invoke or call a function we specify like below :

printHello();        // It will print Hello to the console

There are already built-in functions in Javascript like replace(), random()...

Function is a Value :

A function is a value, no matter how it is created.

function sayHello() {
  console.log("Hello");
}
console.log( sayHello );   // shows the function code

The above code prints the function code of sayHello, as the function is a value. When we call with parenthesis () then only it will run. Kindly note that the last line does not run the function, because there are no parentheses after sayHello.

We can copy a function to another variable:

function sayHello() {
  console.log("Hello");
}
let hello = sayHello; 
/* assigns sayHello function code to hello variable, now hello is a variable which carries the same         
function code of the sayHello function*/
hello ();          // prints Hello to the console
sayHello();    // prints Hello to the console

Function expression :

We can also write the above code in the following way :

let hello = function (){
console.log("Hello");
};
hello();                // outputs "Hello" to the console.

Here what we are doing is assigning a function to a variable hello. The right-hand side function doesn't have a name. The functions without names we call it as an anonymous function. This is called a function expression because it was created inside an expression that is (created on the right side of the “assignment expression” =).

In the case of function declaration, we will directly start with a functional keyword like below

function(){
console.log("Hello")
}              // this is a function but an anonymous function as no name is given

But the main purpose of function serves in both cases whether it is function declaration or function expression that is reusability of code.

However, there is one difference when the JS engine comes into the picture i.e while running the program.

sayHello();
function sayHello(){                    ---> This is function declaration case
console.log("Hello");
}

The above doesn't throw any errors whereas the below code throws an error

sayHello();
let sayHello = function (){          ---> This is function expression case
console.log("Hello");
};

That is because in the function declaration case even calling a function sayHello() before the function sayHello declaration works that is because of functional hoisting. Below is stated regarding functional hoisting.

A global Function Declaration is visible in the whole script, no matter where it is.

When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an “initialization stage”. And after all Function Declarations are processed, the code is executed. So it has access to these functions.

In the case of function expressions, Once the execution flow passes to the right side of the assignment let sayHello = function… – here we go, the function is created and can be used (assigned, called, etc. ) from now on.