Variables

What is variable

Computer programs are all about storing and manipulating data. All the modern programming languages have a concept of variables, which is more or less the same. A variable is a named storage location that can store a value of a particular type, which can be changed later in the program.

Like other programming languages, in JavaScript, variables are containers that store values in memory. You can use variables to store number, strings, booleans, arrays, objects, etc types of values.

How to declare a variable

In JavaScript, you need to declare a variable before you use it except var, you can use it before declaring it. Declaring a variable means to give it a name, which will be used to refer to the variable later. When variable is declared it is assigned a space in memory to store the value. You can declare a variable using:

• const
• let
• var

Let's see each of them in detail:

const

The const keyword is used to declare which can't be reassigned a different value. A const variable must be given a value when it is declared, and it can't be changed afterward. const variables are also block-scoped, which means that they are only visible within the block of code in which they are defined.

const PI = 3.14;
// This will error
PI = 3.14159; // TypeError: Assignment to constant variable.

Note: Don't confuse const with const in C++, final in Java, or readonly in C#. const in JavaScript is not a constant value, it's a constant reference to a value. The value it holds is still mutable, just the variable identifier can't be reassigned.

Objects and arrays declared with const are mutable. For example, in the following code, the person object is declared as a constant:

const person = {
    name: "John",
    age: 30,
};

// However, the person object can still be changed:

person.name = "Peter"; // it'll change the name to Peter
person.age = 46; // it'll change the age to 46

// But you can't reassign a different object to person
// This will error
person = { name: "Amy", age: 20 }; // TypeError: Assignment to constant variable.

Same thing with arrays:

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Toyota"; // it'll change the first element to Toyota
cars.push("Audi"); // it'll add Audi to the end of the array

// But you can't reassign a different array to cars:
// This will error
cars = ["Toyota", "Volvo", "Audi"]; // TypeError: Assignment to constant variable.

let

The let keyword is used to declare a variable whose value can be changed later. let is similar to var, but it has some important differences. One of the main differences is that let variables are block-scoped, whereas var variables are function-scoped. This means that let variables are only visible within the block of code in which they are declared, whereas var variables are visible throughout the entire function in which they are declared.

let x = 5;
x = 10; // This is allowed

A variable declared with let can be reassigned a new value, but it can't be declared again in the same scope. For example:

let message = "Hello, world!";
message = "Hello, JavaScript!"; // works

// This will error
let message = "Hello, again!"; // SyntaxError: Identifier 'message' has already been declared

var

The var keyword is used to declare a variable whose value can be changed later. var is the oldest way to declare variables in JavaScript, still supported in modern browsers, and it has some limitations that make let a better choice in most cases. However, var variables are still widely used, and you will encounter them in older codebases.

var x = 5;
x = 10; // This is allowed

A variable declared with var can be reassigned a new value and declared again in the same scope. For example:

var message = "Hello, world!";
message = "Hello, JavaScript!"; // works

var message = "Hello, again!"; // works

When to use const, let, and var

It's generally a good idea to use const whenever you can, and only use let if you need to reassign a value to the variable. var should generally be avoided in favor of let or const because they provide better control over the scope and the lifetime of variables

Naming variables

In JavaScript, you can use letters, digits, underscores, and dollar signs to name variables. You can also use Unicode letters. However, a variable name must begin with a letter, underscore, or dollar sign. You can't use a number to begin a variable name.

// Valid variable names
let myName = "John";
let $myName = "John";
let _myName = "John";
let myName1 = "John";
let myName$ = "John";

// Invalid variable names
// This will error
let 1myName = "John"; // SyntaxError: Unexpected strict mode reserved word
// This will error
let my-name = "John"; // SyntaxError: Unexpected token '-'
// This will error
let my name = "John"; // SyntaxError: Unexpected identifier

Caution: JavaScript is case-sensitive. This means that myName and myname are different variables. It is a good practice to use camelCase for variable names. This means that the first word is in lowercase, and the first letter of each subsequent word is capitalized. For example, myName, myFirstName, myFavoriteColor, etc. You can also use underscores to separate words, but this is not recommended. For example, my_name, my_first_name, my_favorite_color, etc.

Reserved keywords

The following keywords can't be used as variable names:

• break
• case
• catch
• class
• const
• continue
• debugger
• default
• delete
• do
• else
• enum
• export
• etc.

A complete list of JavaScript keywords can be found here. If you use a reserved keyword as a variable name, you will get an error.

// This will error
let break = 5; // SyntaxError: Unexpected strict mode reserved word

Variable scope

Scope in JavaScript refers to the accessibility and visibility of variables, functions, and objects within different parts of a codebase.

There are two types of scope:

• Global scope
• Local scope

Global scope

Global scope refers to variables, functions, and objects that are defined outside any function and are accessible from anywhere in the codebase. For example:

let globalVariable = "This is a global variable";

function myFunction() {
    console.log(globalVariable);
}

myFunction(); // Output: "This is a global variable"

In this example, the variable globalVariable is defined outside any function and can be accessed by any function in the codebase, including myFunction().

Local scope

Local scope refers to variables, functions, and objects that are defined within a function and are only accessible within that function. For example:

function myFunction() {
    let localVariable = "This is a local variable";
    console.log(localVariable);
}

myFunction(); // Output: "This is a local variable"
// This will error
console.log(localVariable); // ReferenceError: localVariable is not defined

In this example, the variable localVariable is defined within the myFunction() function and can only be accessed within that function. If we try to access it outside the function, we get a ReferenceError.

Variable shadowing:

It's important to note that local scope variables can "shadow" global scope variables with the same name. For example:

let globalVariable = "This is a global variable";

function myFunction() {
    let globalVariable = "This is a local variable";
    console.log(globalVariable);
}

myFunction(); // Output: "This is a local variable"
console.log(globalVariable); // Output: "This is a global variable"

In this example, the local variable globalVariable within myFunction() takes precedence over the global variable with the same name. This is known as variable shadowing.

Conclusion

In this article, we learned about variables in JavaScript. We learned about the var, let, and const keywords, and we learned about variable scope. We also learned about naming variables and reserved keywords.