Introduction

This is an ES6 series, ES6 also known as ECMAScript 2015 or ECMAScript6 is the latest version of JavaScript introduced in 2015. ECMAScript is the standard that JavaScript uses. It generally provides how JavaScript is written.

We will be looking at a concept named Hoisting. Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

The scopes in JavaScript

• global scope: is simply any variable declaration outside a function and can be accessed from anywhere in the program.

• local scope: is a variable declaration within a function.

The VAR keyword in JavaScript

In JavaScript, var is a reserved keyword that is followed by a reference variable name. The name defined after the keyword can be used as a pointer to the data in memory.

// declaring a variable and initializing it

var crude = 'oil';

or you could declare and afterwards initialize

var crude;

crude = 'oil';

The Scope of the VAR keyword in JavaScript

When it is declared outside a function, it is a global variable or local variable when it is within a function. example

var name = "Amara";

  function checksurName() {
    var surName = "Doe";
  }

In the example above, the name declared as Amara, is a global scope but surName is a local scope declaration.

The problem with the VAR keyword in JavaScript

The var keyword declaration which is the oldest, had a problem where a variable declared can be overwritten. var is not block-scoped. When you declare a variable within a code block, using curly braces ({}), its scope "flows out" of the block! For instance

var name = "Amara Kate";

var gender = female;
if (female) {
  var name = "Barley kate";
}

console.log(name);

Expecting that the name should be Amara Kate, but it turns out to be Barley kate because the name pointing to Amara Kate is global while the name pointing to Barley Kate is local.

But let's see the result

Barley Kate

Declaring variables using the var declarations everywhere in your code can lead to confusion, overwriting of existing global variables, and by extension - bugs, just as we saw in the code snippet. As your codebase expands, since var won't throw an error to redeclaring an already declared variable name leaves you in the confusion about what error it could be.

The Let keyword in JavaScript

The let keyword was introduced in ES6 as an improvement to the var keyword. It is block-scoped that variables are only accessed in the immediate block. Disallowing the circumvention of the var keyword.

The scope of the let keyword in JavaScript

The let keyword allows one to declare variables that are limited to the scope of a block statement, or expression on which it is used.

For example,

let firstName = 'Ben';
let lastName =  'Cracks';

let someBool = true;
if(someBool){
    let firstName = 'Kaycee' ;
    console.log(firstName);
}

console.log(firstName);

The result is:

Ben Kaycee

we don't have any case of over lapping because each scope is treated independently, as each instance are in different scopes.

The const keyword in JavaScript

The const keyword declaration was introduced in ES6 with let. It has similarity with let just that it doesn't permit variable reassigned which implies that its values are constant.

• Example:

const name = Amara;
const name = Tee;

• Results to an error:

Uncaught SyntaxError: Identifier 'name' has already been declared

The scope of the const keyword in JavaScript

The const keyword allows one to declare variables that are limited to the scope of a block statement, or expression on which it is used. The main uniqueness is that it remains constant throughout a scope, it can't be re-declared within the scope.

• Example:

const age = 16;
age = 18;

same error is generated due to its standards of non-reassignment of declaration.

Takeaways

• const is the most preferred keyword amongst the three, following is let and the least is var.

• let is preferred over const when the values will be changed over time.

If you liked this article please follow me on Hashnode for my latest articles. I'm tweeting my journey on Twitter daily, this way to my LinkedIn .

I share my knowledge on,

• 🌐 Web Development
• ✍️ Content Creation
• 💼 Career Development
• 🦾Personal Growth
• BlockChain
• And more!

Happy coding!