Concept of functions in JavaScript

JavaScript Functions: 

Functions are first class citizens in JavaScript. Function can be stored in variables, passed as arguments and returned from other functions.

function f1(args) // optional

{

        

            // code

            return value; // optional

    

}

Function topics

1. Function declaration (named function) - Same as C

2. Function Expression 

3. Arrow function

4. Anonymous function

5. Default parameters

6. Immediately, invoked function, expression

7. argument Object

8. Constructor function

9. Generator function

10. Async function

.. many more

Function prevents script to be loaded on very first page, as function block get executed only upon call.

If we don't use function, JavaScript code will get executed during HTML page load.

formatted string usages

function hello(username){

    console.log(`Hello, ${username}`)

}

hello('Hari')

Concept of hoisting

Declarations of variables, functions, constants are hosted on top of the same scope.

in case of variable

console.log(x)

let x = 4 ;

Here we will get error as can not access x. In actual x is defined in the scope ahead of call due to concept of hoisting but value is unavailable. 

ReferenceError: Cannot access 'x' before initialization

Let's say we replace let with var, then x is allocated at the top of call, and we get undefined.

console.log(x)

var x = 4;

output : undefined

for function

For function also, similar to variable, if we use function prior declaration; then due to concept of hoisting, function is defined ahead in scope.

So, below code works as intended.

hello();

function hello(

{M    console.log('Hello World');

}

Output: Hello World

In actual hello is a reference name which is created on top and entire code is converted into function object which is pointed by hello

Thus variable hello is a reference variable which contains the address of function object(containing block of code) in heap. hello.

When JavaScript code is run following happens

i) Memory is allocated, function and variables are hoisted.

        Inside memory two sections are allocated call stack and heap.

ii) Execution context

•         Global execution context
•         Function execution context

Execution context has a lexical environment which has this variable and meta data. 

In lexical environment there are two components

    i) variable environment and

    ii) reference environment

In global execution context - This is created which JavaScript program runs, if it has variables and functions defined, then a global execution context is created.

All the variables are assigned variable environment and objects in reference environment.

During execution of JavaScript code, GEC gets loaded in call stack, all the global variable and function

references are loaded in variable environment of GEC context and respective object are loaded in heap space.

• GEC context gets loaded during program execution and remains till program is running. 
• Function execution gets called when a function object which is allocated by GEC is invoked. Function execution context is created so that function can be ran. Whenever function is invoked function execution context gets created and it comes to call stack similar to GEC. 
• When function execution is completed, function execution context is released from call stack, however GEC remains till programs' life. 

Here in the example, we cannot call f2(). We will get below error. 

ReferenceError: f2 is not defined

let a = 10;

var b = 20;

f1();

f2();

function f1(username){

    let b =2;

    console.log('Hello',username);

    function f2()

    {

        console.log('Inside f2');

    }

}

Under the hood, f2 variable and heap object is created in Lexical Environment and heap area when function context is created for f1. Once call for f1 is completed then the variable f2 created in function context environment is lost. Now the object f2 is eligible for garbage collection. Hence, we cannot call f2 from outside f1.