Variable Declaration in Javascript

Quick Summary: in this article, we are going to learn about how to declare and name variables, block scoping, hoisting, redeclaration as well as the rules and conventions that guide declaring a variable. By the end, you will understand how to declare variables, the concept behind block scoping, redeclaration, and hoisting in javascript.

variables are an important part of the programming language. In general, variables are ways of storing data(value).

Rules Guiding Variable Names

• variable names can only include letters, numbers, underscore(_), dollar sign($).
• variable names cannot start with a number.
• variable names are case sensitive. Meaning, letter "a" is considerably different from the letter "A".
• Reserved words (like JavaScript keywords e.g function) cannot be used as variable names.

Declaring Variables

Before Es6, var keyword was the only way to declare a variable and it is problematic and it has caused a lot of bug issues in cases of scope, hoisting, and redeclaration. while Let and const were introduced in Es6 and came to solve those problems.

var name = 'Taiwo'

Const

const as the name suggests constant, A constant is a variable that cannot be overwritten. Once declared, you cannot change its value.

const name = 'John'
console.log(name)  // John
name = 'Taiwo'  //TypeError: Assignment to constant variable.

A variable has a default value if no value is assigned to it but const has no default value and it requires an initializer.

var name; // undefined

const name;  // SyntaxError: Missing initializer in const declaration

Let

The Let keyword allows mutability and it doesn't require an initializer just like var.

let name = 'Taiwo'
name = 'John'
console.log(name)  // John

// it defaults to undefined without an initializer
let name;  // undefined

Block Scope

Block scope is an area between two curly braces {} which can be between if, switch conditions, or for and while loops.

The var keyword is function scope and it doesn't have a true block scope because variable declared with var jumps out of the block and it can be accessed outside the scope.

var name = 'john';

if (name) {
    var name = 'Taiwo';
    console.log('block scope', name); // block scope Taiwo
}
console.log('global scope', name); // global scope Taiwo

The let and const came to solve this, they have a true block scope because they exist only within the block they are declared in.

let name = 'john';
if (name) {
    let name = 'Taiwo';
    console.log('block scope', name); // block scope Taiwo
}
console.log('global scope', name); // global scope john

Redeclaration

var allows you to redeclare a variable as many times as you like.

function addScore (){
    var score = 55
    if (score > 50){
       var score = 70
       console.log('Your score is', score) //Your score is 70
    }
    var score = 80
    console.log('Your score is', score) //Your score is 80
}

let and const don't allow redeclaration within the same block. Redeclaring a variable would result in an error.

function addScore (){
    let score = 55
    if (score > 50){
        let score = 70
        console.log('Your score is', score) //Your score is 70
    }
    let score = 80 //SyntaxError: Identifier 'score' has already been declared
}
}

Hoisting

Hoisting is the javascript default behavior of moving all declarations to the top of the current scope before code execution.
var variables are hoisted. with var, you can use a variable before you declare it.

name = 'Taiwo'
console.log(name) // Taiwo
var name

Note: javascript only hoist declarations, not the initializations.

In the case of the code above, only the var declaration is moved to the top of the function, not the initializer attached to it (the 'Taiwo' part of var name).

let and const are also hoisted but they are hoisted differently compared to var. With let and const you can't use a variable until its declaration is processed.

name = 'Taiwo'
console.log(name) // ReferenceError: Cannot access 'name' before initialization
let name

let and const use the concept of Temporal Dead Zone(TDZ). It is a period within the code execution where the variable cant be used at all. Therefore, let and const variables exist in the TDZ from the start of their enclosing scope until they are declared. Meaning the variable cannot be accessible until it's been declared.

Conclusion

var has been deprecated. it is advisable to always use let in place of var to avoid unforeseen errors. And always use const to declare constants.