JavaScript Tricky Parts | Closure , Hoisting & Scope…

There are some JavaScript topics which sometimes makes new developer confused. Closures, Hoisting & Scope are some of those tricky parts.
I’ll tell what I’ve learn so far…

Scope…

Global Scope

We all know what variables are. I found scope by finding the answer of a question, “In where my variables are available to me?”…

we can simply write a variable(not in a function or in methods). and try it out in console that is called Global scope. which means you can access it from any where in your application.

const name = ‘Nayeem’;

let lastName= ‘Uddin’;

var uses = ‘Dell’

Both of them are easily accessible in the console.

There is one thing I must mention, “Window” is a global scope in console.

window.name //undefined

window.lastName //undefined

window.uses // Dell

Its Because var is attached to window(object) like the other method(window.setTimeOut…etc ) and let and const are not attached to window. But both of them are Global Scope.

Function Scope

We’ve see variables written anywhere in the file are available to us in the console. What happens if we write variables inside of a function?

const name = ‘Nayeem’;

function tuna(){

const lastName = ‘Uddin’;

console.log(name); // Nayeem

}

console.log(lastName); // gives you an error.

tuna(); // Even If I call it in, it still will give error

Here I’ve declared two variables. One is inside of a function and other one is outside of a function.
If we want to see both variables by writing console.log out of function, lastName will not be accessible this is called function Scope. That variable is only available inside of that function.

There is another interesting behavior of JavaScript, which is…

Variable name will give us the result. Here JavaScript tried to find the name variable inside of the function. When its not available inside of it, Its goes a level high to check if its available. It go higher and higher to find if its available or not.

So function scope is, The variable created inside of a function are only available in that function.

Its just like a little world between those curly brace…

Blocked Scope

We know that we cannot get the access of the variables inside of a function. So what happen if We need one? So here comes the Blocked scope.

function info(name){

let uses;

if (uses === ‘Dell’){

uses = true;

}

console.log(uses);

return uses;

}

info(‘Dell’); // true

In here we’ve declared a variable inside of a function which updates its value and we’ve just returned it so that we can get access it outside of a function. this is called blocked scope. similar example given below…

function go(name){

let tuna;

if (name === ‘nayeem’){

tuna = true;

}

return tuna;

}

let me = go(‘nayeem’);

console.log(me);

Hoisting…

Hoisting is a very interesting topic. It actually allow you to have an access to functions and variables which is not created yet!!! This maybe sound crazy to you but let me explain
There are two types of hoisting, functional and variable.

Functional Hoisting

Lets see an example and then I’ll tell the story behind…

tuna();

function tuna(){

console.log(‘I am tuna’);

}

Here, I Just called tuna() before its declaration!!! So here the JavaScript compiler took the functional declaration and put it up to the tuna function.
This not something that people often use, But this is an ability that JavaScript has…

Variable Hoisting

This is has some similarity like hoisting where we try to do something before its declaration!

console.log(age); //undefined

// console.log(cool); //gives you an error

var age = 10; (to test this you should use var, not let)

In here I’ve declared the variable after the console.log, and it give me undefined. And when I tried to see the output of a variable which is not defined give me an error.
So, JavaScript will only hoist the declaration of the variable, not the value. That’s why it gave us undefined.

note: If you put a function in variable it will behave like variable hoisting.

Closure coming soon…