How to use variables in JavaScript

Variables are an essential part of every programming language. So, you should understand the variables’ basics before diving into the application.

In this article, I would like to present a few points about Javascript variables.

I. What are variables?

Variables are used to store data values. They simplify multiple usage by calling the variable name.

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: declare a variable globally or locally.
• let: declare a variable accessible in the block surrounded with the {} pair. (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;

1. The differences between let and var

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

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"

2. 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

Like other languages, JS variable name must follow these rules:

• Names must begin with a letter or an underscore.
• Names can contain letters, digits, underscores, and dollar signs.
• Names are case sensitive (y and Y are different variables).
• Reserved words (like JavaScript keywords) cannot be used as names.
• Names cannot contain special characters (Example: @, #, !, %, ^, &, ….).

Example

// Correct

const book;

const _book;

const book1;

// Wrong

const 10book;

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 are accessible only within the defined block.

The 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 the 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 the 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(name); // ReferenceError