Table of Content

• Variables in JavaScript
  • Variable Declarations
  • Variable Naming Rules
  • Variable Scopes
    • Global Scope
    • Local Scope
      • Function Scope
      • Block Scope
  • Hoisting
    • Hoisting in var
    • Hoisting with let/const
    • Temproal Dead Zone

Variables in JavaScript

Variables are simply the identifiers used to store information.

Variable Declarations

We can create variable in JavaScript with keywords like let/const/var.

let name;
var age;
const gravity;

We can store some data in these variables using the assignment operator ’=’.

let name;
name = "Prabesh";

But the better option would be to combile the variable declarations and assignment in one line.

var age = 23;

We can also declare multiple variables in one line.

let name = "Prabesh",
  age = 23,
  nickname = "entry";

Variable Naming Rules

There are basically two rules while naming variable:

1. It must contain only letters(a-z), digits(0-9), or the symbols $ and _.
2. The first character must not be a digit.

Case Matters - Variables with name ‘age’ and ‘AGE’ are two different variables.

Valid Variable Names

let name = "Prabesh";
let _age = 23;
let $ = 127;
let nickName404 = "entry";

Invalid Variable Name

let 2name = "My Name"; // Cannot start with digit
let my-name = "My Name"; //hyphens (-) aren't allowed
//Symbols except '$ and _' aren't allowed.

Variable Scopes

When we declare a variable, it cannot just be accessed from anywhere in our code.

Global Scope

If a variable is available globally, the code can read or modify the variable from anywhere. We can declare the variable globally by declaring it outside the function.

There is only one Global scope throughout our program. When we begin writing our code, we are already in global scope. Something is considered global in JavaScript when the variable is the direct child of our browser’s window object.

var number = 20; //Global Variable

function addby2() {
  //Local Scope(Function)
  return number + 2; //Global variable can be accessed anywhere
}

console.log(window.a); //OUTPUT: 20
//variables declared with var belong to window object

NOTE: Variables declared outside the function with both var and let are in global scope but the difference is that variables declared with var belong to window object but variables declared with let do not belong to window object.

Local Scope

In JavaScript, we have two types of local scope.

• Function Scope
• Block Scope

Function Scope

Whenever we create a new function, a new scope is created. Every function has their own scope. So, when we declare a variable inside a function, we can access that variable within only that function. That variable cannot be accessed outside that function.

let firstName = "Prabesh"; //Global Scope Variable

function displayname() {
  //Local Scope Begins
  let lastName = "Thapa";
  console.log(`${firstName} ${lastName}`);
}
//displayName local scope ends

displayName();

console.log(lastname);
// OUTPUT: ReferenceError: lastName is not defined

Block Scope

By using let and const, we can declare local scope in block statements like for loop, if statements etc.

When we declare a variable with var, the variable has either global scope or local scope (inside a function). Even if we declare the variable with var inside any block like for, while, if statement, the variable is still avaiable throughout the function.

But when we declare the variable with let or const within a block, we can access that variable only within that block.

function getGender() {
  let gender = "male";

  if (gender === "male") {
    console.log(`${gender}: Boy`);
    //OUTPUT: male: Boy
  }
  console.log(gender);
  //OUTPUT: ReferenceError: gender is not defined.
}

Hoisting

Hoisting is the default behavior of JavaScript where it defines all the declarations at the top of scope before code execution. JavaScript only hoists declarations, not initialization.

JavaScript engine treats all variable declarations using var as if they are declared at the top of global scope (if declared outside function) or at the top of functional scope (if declared inside function) regardless of where the actual declaration is made. This simply is Hoisting.

Hoisting in var

console.log(name); //OUTPUT: undefined

var name = "Prabesh";

console.log(name); //OUTPUT: "Prabesh"

Normally, we would expect to get an error (ReferenceError) in the first console.log since the variable name wasn’t already declared before. But JavaScript hoists all variable declarations at the top.

Behind the Scene in interpreter

//variable declaration gets hoisted at top
var name;

console.log(name); //OUTPUT: undefined

name = "Prabesh";

console.log(name); //OUTPUT: "Prabesh"

In JavaScript, undeclared variable is assigned as type of undefined while ReferenceError is thrown when trying to access undeclared variable.

Hoisting in Functional Scope

Variables declared within function are in the local scope. variables in the local scope are only accessible within the function in which they are defined. Hence, we can use variable with same name and use it in different function.

If we declare local variable and a global variable with same name, the local variable will take precedence when we use it inside a function. In simple words, local variable shadows global variables.

function getName() {
  console.log(name);
  var name = "Prabesh";
}

getName();

//OUTPUT: undefined

Behind the Scene in interpreter

function getName() {
  var name;
  console.log(name); //OUTPUT: "Prabesh"
  name = "Prabesh";
}

getName();

To avoid such inconvinence, we need to declare and initialize the variable before we use it.

Note to Remember: JavaScript declares the variable first in the background, then initialize them.

ALl of the undeclared variables are global varibles.

// Example of Hoisting
function hoisting() {
  let name = "Prabesh";
  age = 23;
}
hoisting();

console.log(name); // Reference Error: name is not defined.
console.log(age); // Output: 23

So what exactly happened here?

In the above code, we have a function called hoisting() where we did not declare a variable using let/var/const and another variable declared with let. As mentioned above, assigning the undeclared variable to the global scope is done by JavaScript. Hence, age variable is availabe even outsode of scope(globally) but the scope of name variable is within the function, so we get the ReferenceError.

Hoisting with let/const

In ES6, let does not allow us to use undeclard variables and throws a ReferenceError. This makes sure that we always declare our variable first.

Example 1:

console.log(num);
//OUTPUT: ReferenceError: Cannot access 'num' before initialization

let num = 20;

console.log(num); //OUTPUT: 20

Let’s have a look at another example: Example 2:

console.log(number2);
//OUTPUT: ReferenceError: number2 is not defined.

let number = 20;

Do you notice something different in example 1 and 2?

The error in example 1 says: ReferenceError: Cannot access ’num’ before initialization but the error in example 2 is ReferenceError: number2 is not defined

The error “is not defined” means our JavaScript engine has no idea what number2 variable is because we never defined it. But the error “cannot access before initialization” means our JS engine knows the “num” variable since “num” is hoisted to the top of global scope.

To summarize, variables declared with let or const are hoisted without a default initialization but the variables declared with var are hoisted with default initialization of undefined.

Temproal Dead Zone

This is a period during execution where let/const variables are hoisted but not accessible.