How to Declare a Variable

A JavaScript variable is nothing more than a name for a storage area. It is a container for storing information. “Declaring” a variable is the process of creating one in JavaScript.

In JavaScript, there are two different sorts of variables: local variables and global variables. When declaring a JavaScript variable, there are several guidelines (also known as identifiers). The name must begin with a letter from a to z, or A – Z, an underscore (_), or the dollar sign ($) symbol, but not with a number or other special characters.

let userName;

let is the “Declaration” while “userName” is the variable (The storage location)

The variable is always empty after the declaration (it has no value).

Now we can assign a value to it by using the assignment operator

userName = “Flourish” // Now the value of this variable is “Flourish” and the name is “username”

console.log(userName)

Output

Flourish

To simplify it, the variable declaration and assignment would be done in a single line for simplicity: as shown in the code below

let userName = “Flourish”;

Variables can be declared as many as possible in a single line as shown in the example below

let userName = ‘Flourish’, age = 20, message = ‘Hello World’;

Although it could seem shorter, we don’t suggest it. Please use one line per variable for the benefit of easier reading.

Although slightly longer, the multiline version is simpler to read:

let userName = 'Flourish';
let age = 20;
let message = 'Hello World';

All of these processes accomplish the same task in theory. Therefore, everything comes down to aesthetics and personal taste.

We can declare a variable using the keyword: let, var, or const each with its slight differences

The const keyword

When you use the const keyword to declare a variable its value (content) would never change, which means the value will remain the same throughout the program, let’s look at the code snippet in the example below

//daclaring a variable using const keyword.
const myVar = "Hello World" 
myVar = "Good Morning" //this will throw an error

The value of myVar was declared to be “Hello World” now changing it to “Good Morning ” won’t be possible because it has been assigned to a const keyword.

The let and var keywords are almost the same thing their differences lie in their scope

The var is a function scope, while the let is a block scope; what does this mean, let’s consider the code snippets below

Using the var keyword

The function scope

function myFunc() {
  // x is known here but not defined.
  console.log(“The value of x is ” x)
  {
    var x = 5;
    x = x + 10;
  }
  // x is still known here and has a value.
  console.log(“The value of x is “ x)
}
// x is NOT known here.
myFunc()

output:

  The value of x is undefined

                The value of x is 15

The code snippet above uses var; take note of how var is declared in line 5 within a block. Above the block, this variable is known (but undefined). After the block, it is known and defined, though.

The places where x has a scope are represented by the highlighted lines. Var is referred to as having function scope because it encompasses the entire function.

Note that x is only known and defined within the function it is declared in—the highlighted lines—in the second code tab, where it is declared using let in line 5. Everywhere outside of its block is outside of its scope.

The Block scope

Take into account the following illustration to further illustrate the block scope for var:

var userName = "Flourish"
if (userName === "Flourish"){
  var userName = "Joseph"
  console.log(userName)
}
console.log(userName)

Output:

Joseph

Joseph

Using the let keyword

Function scope

function myFunc() {

  // x is NOT known here. 
 // console.log(‘The value of x  is ', x)
//Uncommenting the line above will throw an error
  {
    let x = 10;
    x = x + 5;
  }
  // x is NOT known here. Try uncommenting the line below.
  // console.log(‘The value of x is ', x)
}
// x is NOT known here.
MyFunc()

Note that x is only known and defined within the block it is declared in—the highlighted lines—in the second code tab, where it is declared using let in line 5. Everywhere outside of its block is outside of its scope.

Block scope

let userName = "Flourish"
if (userName === "Flourish"){
  let userName = "Joseph"
  console.log(userName)
}
console.log(userName)

Output:

Joseph

Flourish

TYPES OF VARIABLE

There are two types of variables global variable and the local variable

Local variable

A local variable is a specific kind of variable that can be utilized when the method or statement block in which it is declared defines the variable’s scope and extent.

Global variable

A global variable is any variable that is defined in the global scope or is accessible from all other scopes and is referred to as a global variables. It is a property of the global object in JavaScript.

A global variable is one that is accessible throughout the whole program

Let’s consider the code snippet below

let x = 10; //this is a global variable it is accessible anywhere in this program

function myFunc{ 
           let y = 10; //This is a local variable it can only be accessed within 
                       this block of code
           console.log(x, y); 
}
   myFunc()
   console.log(x, y)

Output:

Conclusion: A variable is a container that is used to hold a value; it might be a username, the name of an institution, age, personal details, and lots more. To initialize a variable, we use the words let, var, or const.

For more insights consider the table below

Keyword	Variable Scope	Reassign?	Redeclare?	Hoist?
const	Block	true	False	False
var	Function	True	true	true
let	Block	False	False	False

Read Next: JavaScript Datatypes

Originally posted 2022-11-18 09:26:36.