Functional Programming Hoisting

What is hoisting ?

The hoisting is, the browser takes all the declarations such as a,b,c it takes out of the code before showing anything in the browser. It takes these declarations and puts them on top of the website or top of the file that we have up here so I can access them at any point inside the code that I have here.

Declaring a variable and assigning a value is going to affect hoisting because when you load the code inside the browser.

var a ="First";
var b ="Second";
var c ="Third";
console.log(a + " " + b + " " + c)

console.log(d): undefined logically console.log should know there is variable d inside the code because the console.log is before the variable d. Inside the console we should not get undefined.

var d; we declared a variable here without assigning a value because that can’t find the variable but there is no value assigned to it

Instead what we should be getting logically a references error that i don’t know this variable is this but we get undefined which means

we have a variable declared inside the document but there is no value assign for variable d thats show when i declared a variable then

the variable taken out of the code console.log can find it variable d because variable is hoisted top of the document.Its pulled up tp top

so console.log knows that there is a variable d.

Example

ar a ="First";
var b ="Second";
var c ="Third";
console.log(d)  -> undefined

Because hoisting just takes declaration out and put on the top. It doesn’t take values.

var d = "Fourth";

Example

var a ="First";
var b ="Second";
var c ="Third";
var d = "Fourth"
console.log(d) -> Fourth

We assigned value in order to see in the console.

var a ="First";
var b ="Second";
var c ="Third";

d = “fourth” assigned the value before the console.log its still gets the value inside of the browser. Because we declared variable below the console.log and its hoisted. Only declaration can hoisted and we assigned the value before console.log.

console.log(d) -> Fourth
var d ; declared variable d below the console.log

Example name function(expression) Hoisting

function example(){
var a = 10
return a;
}
console.log(example()) ->

Example 2 name function(expression) Hoisting

console.log(example()). The name function is the same way as variable gets taken out the code and placed it top(hoisted) of the file. We can use it any point inside our code we can use it whenever want inside of the code because its been hoisted

function example(){
var a = 10
return a;
}

How do we Avoid the hoisting ?

1. We declared and assign the variable inside the function
2. we should use anonymous function because name function always gets hoisted in the browser
3. Hoisting is takes a lot of space in the browser and if we have alotof codes hoisting like above it gets slower to browser.

Anonymous Function Example

var a = function (){
var a = 20
return a;
}
console.log(a())  -> 20

What is the difference between to name function and anonymous function ?

Anonymous function which we just assign a variable to function and call it.

console.log(a()) -> caught TypeError: a is not a function at index.js. Because anonymous function can’t hoisting.

var a = function (){
var a = 20
return a;

According to MDM

Hoisting is a term you will not find used in any normative specification prose prior to ECMAScript® 2015 Language Specification. Hoisting was thought up as a general way of thinking about how execution contexts (specifically the creation and execution phases) work in JavaScript. However, the concept can be a little confusing at first.

Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

Technical example

One of the advantages of JavaScript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code. For example:

function catName(name) {
console.log("My cat's name is " + name);
}
catName("Tiger");
The result of the code above is: "My cat's name is Tiger"

The above code snippet is how you would expect to write the code for it to work. Now, let’s see what happens when we call the function before we write it:

catName("Chloe");
function catName(name) {
console.log("My cat's name is " + name);
}
The result of the code above is: "My cat's name is Chloe"

Even though we call the function in our code first, before the function is written, the code still works. This is because of how context execution works in JavaScript.

Hoisting works well with other data types and variables. The variables can be initialized and used before they are declared.

Only declarations are hoisted

JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined. For example:

console.log(num);  Returns undefined, as only declaration was hoisted, no initialization has happened at this stage
var num;  declaration
num = 6;  initialization

The example below only has initialization. No hoisting happens so trying to read the variable results in ReferenceError exception.

console.log(num); throws ReferenceError exception

num = 6; initialization

Below are more examples demonstrating hoisting.

Example 1

Only y is hoisted

x = 1; Initialize x, and if not already declared, declare it — but no hoisting as there is no var in the statement.

console.log(x + " " + y);  '1 undefined'

This prints value of y as undefined as JavaScript only hoists declarations.

var y = 2; Declare and Initialize y

Example 2

No hoisting, but since initialization also causes declaration (if not already declared), variables are available.

a = 'Cran'; Initialize a
b = 'berry'; Initialize b
console.log(a + "" + b);  'Cranberry'

Functions (and variables defined with ~var~) are put into the memory during the compilation phase.This way these functions can be executed from anywhere even before the actual definition. When we declare the function, the function declaration being read through JS has two phases: first compilation and second execution.

const a = compute(9,5 );
function compute(x, y){
return x + y;
}
console.log(a)=> 14
Example 2
console.log(doSomething)
doSomething();

Function declaration is hoisting meaning the code is parsed at its elevated top of the page,It means you can call the function above. Before it’s defined, that doesn’t work for function expression.

function doSomething(){
console.log('Declare Something') function declaration
}
console.log(something);
something();