Guide To JavaScript Variables and Scopes [2022]

Variables are an important part of many programming languages, and are among the first concepts for novice coders to learn. There are a number of different properties of variables in JavaScript, as well as several rules which must be followed when naming them.

In JavaScript, there are three keywords used to declare a variable: var, let, and const. While their meanings may seem similar at first glance, each one has a specific purpose for declaring a variable.

Understanding Variables

A variable is a named container that stores values. They are useful for storing information that may need to be modify multiple times. A piece of information stored in a variable can be any JavaScript data type, including numbers, strings, and objects.

There was only one way to declare variables in JavaScript before ES6 — that is var keyword. We’ll go over the differences between varlet, and const keywords

A var is used to demonstrate the concept of a variable itself. In the example below, we will declare a variable, and assign a value to it.

// Assign the string value Black Rupee to the site_name identifier
var site_name = "Black Rupee";

This statement consists of a few parts:

  • The declaration of a variable using the var keyword
  • The variable name (or identifier), site_name
  • The assignment operation, represented by the = syntax
  • The value being assigned, "Black Rupee"

Now we can use site_name in code. JavaScript will remember that site_name represents the string value Black Rupee.

In JavaScript, any data type can be represented by a variable. For example, a string, a number, a Boolean, a null, and an object can be assigned to a variable.

// Assignment of various variables
var name = "Chandra Mouli";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" };
var success = true;
var nothing = null;

Variables store data in memory. They can be accessed and modified later. They can also be given a new value and reassigned. A simplified example below demonstrates how a password might be stored to a variable and then updated.

// Assign value to password variable
var password = "hunter2";

// Reassign variable value with a new value
password = "hunter3";

console.log(password);
Output
'hunter3'

In a real program, we’d probably want to store the password in a database. But for this example, we’ll just store it as a value in memory. Now, we’ll change the value stored in the variable name ‘password’ to ‘hunter3’. The new value is now recognized by JavaScript.

Variable Naming

Variable names are known as identifiers in JavaScript.

There are some limitations on variable names in JavaScript:

  1. The name must contain only letters, digits, or the symbols $ and _.
  2. Variable names cannot contain any whitespace characters (tabs or spaces)
  3. Numbers cannot begin the name of any variable.
  4. Non-Latin letters are allowed, but not recommended. (Such names are allowed, but there is an international convention to use English in variable names.)
  5. Case matters (Variables named black_rupee and BlacK_RupeE are two different variables.)
  6. There are several reserved keywords which cannot be used as the name of a variable.
  7. An assignment withoutuse strict" (Normally, we must define a variable before we can use it. However, in the past, it was technically feasible to create a variable by just assigning the value without using let. This still works if we don’t use “use strict” in our scripts to keep old scripts compatible.)

Camel case is also used in the names of functions and variables specified using var or let in JavaScript. This is the habit of writing the initial word in lowercase, then capitalizing the first letter of each successive word with no spaces in between.

With a few exceptions, most variables that are not constants will stick to this standard. Constant variable names, which are declared with the const keyword, are commonly written in all capitals.

Difference Between var / let and const

To declare a variable in JavaScript, you can use one of three distinct keywords, which adds another degree of complication to the language. The distinctions between the three are determined by scope, hoisting, and reassignment.

KeywordScopeHoistingCan Be ReassignedCan Be Redeclared
VarFunction scopeYesYesYes
LetBlock ScopeNoYesNo
Const Block Scope NoNoNo

You might be wondering which of the three to utilize in your own programs. In the event of loops and reassignment, it is usual practice to use const as much as feasible, and let in the case of loops and reassignment. Outside of working on legacy code, var should be avoided in general.

Variable Scope

Scope of variables refers to the accessibility of a particular variable within the program.

JavaScript variables have two different scopes, they are:

  • Global variables are those declared outside of a block.
  • Local variables are those declared inside of a block.

A variable having global scope is one that may be accessed from anywhere in the application. Global variables can be declared with any of the three keywords: let, const, or var.

Any variable declared within a function is referred to as having Local Scope. Within a function, you can access a local variable. It produces an error if you try to access any variable specified inside a function from outside or another function.

// Initialize a global variable
var species = "human";

function transform() {
  // Initialize a local, function-scoped variable
  var species = "werewolf";
  console.log(species);
}

// Log the global and local variable
console.log(species); // human
transform(); // werewolf
console.log(species); // human

The local variable in this case is function-scoped. Variables defined with the var keyword are always function-scoped, which means that they recognize functions as having their own scope. As a result, this locally-scoped variable is not available from the global scope.

Thanks for reading.

Share your love

Leave a Reply