Functions and Hoisting| Using javascript in day to day routine

In this part we will cover most used function syntax function types that we refer) in our day to day coding practices.

Javascript Functions | declarations, expressions, pure functions, IIFE, hoisting

Functions

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.

— MDN

In simple terms functions are building block of a program which contains set of instructions or statements which will produce certain outs and helpful in doing repetitive tasks. Any function would have the following behaviours

1. It can have a name — optional
2. It can have a return value — optional
3. It can accept any no of parameters as arguments — optional (The parameters of a function call are the function’s arguments)

A simple function for adding two numbers in javascript looks like this

A simple javascript function to add two numbers

Function declarations

A function declaration must be defined with a name followed by function keyword and which can optionally access any number of arguments

Function declaration | where non-primitive values are being mutated

Primitive parameters (number, string, etc) are passed to function by value , which means the values that is being passed to function as parameter doesn’t mutate the actual variable value (where the variable is having a function level scope). Where as non-primitive type values would be mutated.

Function declaration | primitive values are being not mutated

If we see the above example, we are adding a new user called Gru to users array, which doesn’t have any impact on actualUsers array.

Function expressions

When a function is defined and assigned to a variable like other primitive values (number, string), is referred as Function expression

The only difference is the function expressions doesn’t need a function name.

Function expression

Functions — in ES 6 way

ES6 Arrow Functions, also known as Fat Arrows, are one of the simpler new features in ES6. They provide two benefits: more concise syntax, and lexical scoping of this.

The following example depicts how we can define a function expression, with a fat arrow => notation. (In some other programming languages like python these are referred as lambda functions)

arrow function (ES6)

this | lexical scoping problem with javascript functions

addressing this issue with fat arrow function

IIFE & Anonymous functions

A function without a name is referred as anonymous function. Anonymous function expressions can be invoked / called immediately upon definition, which are referred as IIFE (Immediately Invoked Function Expression).

Anonymous function and IIFE

In the above example we are iterating with the help of for loop, to print numbers from 0 to 5 without using let keyword. As the for loop contains an asynchronous operations it doesn’t retain the values when the program execution is completed. To solve this problem, we are invoking a function, which will be called immediately with the outer scope variable i , which is having function level scope.

Hoisting

Hoisting is a Javascript mechanism where function declarations and variable definitions are moved to top of their scope before code execution.

Hoisting in functions

1. Function declarations can be hoisted
2. Function expressions wont be hoisted
3. Anonymous / IIFE wont be hoisted

In simple terms the advantage of hoisting is, we will be able to invoke or call a function before the function declaration.

Function declarations will be hoisted

In the above example printMinions is called before function declaration. Under the hood, the Javascript engine will move all function declarations to top of their scope (here the scope is global).

Function expressions wont be hoisted

In the above example, when we tried to call printMinions it will throw an error ReferenceError as the function named printMinions is not hoisted / moved to top of the scope.

Pure functions

A pure function is also a function which shouldn’t have any side effects and it should return the same output for the given same input.

Pure function rules

1. Should not have any side effects, which means it should not mutate any outside variables that are defined outside of function block.
2. The function should always returns same output for the same input at any given point of time.

Some javascript built-in pure functions Math.ceil, Math.floor

Some javascript built-in impure functions Math.random and new Date

Functions - JavaScript | MDN