Introduction to Modern Javascript

Objectives of the article.

1. Get a better understanding of different scopes in javascript.
2. Differentiate between var, let, and const and how to apply them in your code.

Introduction.

Javascript is a scripting language and is mostly used to build interactive web applications. It was first created for the Netscape web browser in 1995. The first prototype of Javascript was written by Brendan Eich.

Working with ECMAScript.

ECMAScript was created to standardize Javascript in an attempt to allow for the independent and compatible implementation of various Javascript concepts. The 6th edition, ECMAScript 6(ES6) came with a lot of syntaxes which helped Javascript developers write more complex applications.

Dive into scope.

The scope is a region in a program where the binding of a name to an entity, such as a variable or function is valid. There are two kinds of scopes in Javascript.

• Function scope

• Block scope

Function scope.

Function scope is created inside a function. When a function is declared a new scope is created inside that function. Variables declared inside that function cannot be accessed from outside that function but variables outside the function scope can be accessed within the function. Example of a function scope:-

let name = "John";
function displayGreetings(){
  let greetings = `Hello ${name}`;
  console.log(name); // prints John
  console.log(greetings); //prints Hello John
};
console.log(greetings); // uncaught ReferenceError: greetings is not defined
displayGreetings();

Hoisting

It means that all declarations are moved at the top of the scope before code execution. Functions and variables are always hoisted once they are declared using var. Be sure not to use a variable declared using var without assigning it a value, it will return undefined, and it can cause problems, especially if variables are used in the global scope.

console.log(num); // prints undefined
num = 20 // assign value
console.log(num); // prints 20
var num; // declare variable

Block scope

Block scope is the area within curly brackets. If statements, switch conditions, for loops and while loops will have their own block scope. In ES6, const and let keywords allow developers to declare variables in the block scope.
Block scope variables are not hoisted therefore cannot be accessed until they are declared. This means variables that are created within the block scope are on the Temporal Dead Zone which is the period when a scope is entered and a variable is declared.

Variables declaration

In Javascript, you can declare variable using either var, let or const keywords. The let keyword supports the variable reassignment, you can easily reassign your variables. It is also used in block scope and variables declared using let keyword are not hoisted e.g

let student = "John Katua";
console.log(student); // prints John Katua
student = {
  name: "John Katua",
  age:  19
};
console.log(student); // prints the student object

When using var keyword, you can reassign those variables and you get access to those variables from anywhere in the function.
The const keyword implies that the variable cannot be reassigned(a read-only reference to a value). You cannot also declare a variable without assigning a value e.g:-
const name; // Uncaught SyntaxError: Missing initializer in const declaration