Variables

I. What are variables?

Variables are used to store data values.

II. Declaring Variables

An equal sign is used to assign values to variables.

To declare a variable in JavaScript, we can use three keywords:

  • var: is used in pre-ES6 versions of JavaScript.
  • let: declare a variable when it can be reassigned. (ES6+)
  • const: declare a variable with a constant value. (ES6+)
let x = 5;

You can declare many variables in one statement.

var name = "Butter", age = 2;

The differences between let and var

  • let only allows us to declare variable once
  • When we declare a variable with var, it’s declared globally or locally if it’s inside a function.
  • The scope of let is limited to a block statement that it’s declared

With var

function checkScope() {
"use strict";
  var i = "function scope";
  if (true) {
    i = "block scope";
    console.log("Block scope i is: ", i);
  }
  console.log("Function scope i is: ", i);
  return i;
}

checkScope();
// Block scope i is: ,"block scope"
// Function scope i is: ,"block scope"

With let

function checkScope() {
"use strict";
  let i = "function scope";
  if (true) {
    let i = "block scope";
    console.log("Block scope i is: ", i);
  }
  console.log("Function scope i is: ", i);
  return i;
}

checkScope();
// Block scope i is: ,"block scope"
// Function scope i is: ,"function scope"

const

const has all features of let, but it’s read-only, and we can’t reassign the value of const.

However, we can mutate an array declared with const

const s = [1, 2, 3];
function edit() {
  "use strict";

  //s = [4, 5, 6];
  s[0] = 4;
  s[1] = 5;
  s[2] = 6;

}
edit();

III. Rules for variable’s name

The general rules for variable’s name:

  • Names can contain letters, digits, underscores, and dollar signs.
  • Names must begin with a letter
  • Names can also begin with $ and _ (but we will not use it in this tutorial)
  • Names are case sensitive (y and Y are different variables)
  • Reserved words (like JavaScript keywords) cannot be used as names.

IV. Scopes and variables

Scope indicates if some variables are accessible/inaccessible from other parts of the program.

  • Global scope refers to the context within which variables are accessible to every part of the program.
  • Block scope refers to the context within which variables that are accessible only within the block they are defined.

Global namespace is the space in our code that contains globally scoped information.

We have scope pollution when too many variables exist in a namespace or variable names are reused.

1. Global variables

Global variables are variables that exist within global scope. They can be accessed by any code in the program, including code in blocks.

const name = 'Mira'

const returnName = () => {
  return name; 
};

console.log(returnName()); // Mira

2. Local variables

Local variables are variables that exist within block scope.

When a variable is defined inside a block, it is only accessible to the code within the curly braces {}

const returnName = () => {
  let name = 'Mira'; 
  console.log(name); // Mira 
};

returnName(); // Mira
console.log(color); // ReferenceError