Variables in JavaScript: Declaration, Types, Scope

What is a Variable in JavaScript Programming?

A variable is a named storage location for data in memory. The data stored in the variable can later be modified.

Example

var x = 8;       

In this JavaScript tutorial, we'll learn about JavaScript variables, the declaration, and initialization of variables in JavaScript using var, let, and const keywords, JavaScript variables' scope, dynamic typing, and more. 

Read More: JavaScript Interview Questions and Answers (Fresher + Experience)

Rules for Naming JavaScript Variables

Variable names are called as identifiers. Identifiers must be unique.

• Names can consist of letters (both uppercase and lowercase), digits, and underscores (_).
• The first character must be either an alphabet, an underscore (_), or a dollar sign ($).
• Variable names are case sensitive, i.e., num and Numare are two different variable names.
• A keyword cannot be your variable name. e.g. var, function, return.

Declaration of Variables in JavaScript

We can declare variables in JavaScript in three ways:

1. Using the var keyword

Initially, all variables in JavaScript were declared using the var keyword until ES6 was introduced. It declares variables with function scope or globally.

Syntax

var variablename;

Example

var name;

2. Using the let keyword

The let keyword was introduced in the ES6 version of JavaScript. You cannot declare a duplicate variable using the let keyword with the same name and case, and JavaScript will throw a syntax error.

Syntax

let variablename;

Example

let name;

3. Using the const keyword

The const keyword in JavaScript defines variables that cannot be modified once they’ve been assigned a value.

Syntax

const const_name;

Example

const x;

Initialization of Variables in JavaScript

The assignment operator "=" is used to assign a value to a variable when you declare it or after the declaration and before accessing it.

Example of Variable Declaration using let keyword

// variable declaration
let num;

// initialization of the declared variable
num = 50;
console.log(num)       

Output

50

Example of Variable Declaration using the var keyword

var str = "Welcome to ScholarHat";
var x = 14;
var y = 20;
var z = x + y;

console.log(str);
console.log(x);
console.log(y);
console.log(z);
 

Output

Welcome to ScholarHat
14
20
34

Example of Variable Declaration and Initialization in the same line

let name = "ScholarHat"; //assigned string value
let num = 150; //assigned numeric value
let isCompleted = true; //assigned boolean value
console.log(name)
console.log(num)
console.log(isCompleted)      

Output

ScholarHat
150
true

Example of Multiple Variables Declaration and Initialization in the same line

let name = "ScholarHat", num = 150, isCompleted = true;
console.log(name)
console.log(num)
console.log(isCompleted)   

Output

ScholarHat
150
true

Variable Declaration without Initialization

The default value of variables that do not have any value is undefined.

let num; 
console.log(num); 

Output

undefined

Change the Value of Variables

We can change the value of a variable after assigning it.

let marks = 500; 
console.log(marks); 

// change the value of marks
marks = 300; 
console.log(marks);

Output

500
300

Types of Variables/Scope of Variables in JavaScript

1. JavaScript global variables

Global variables in JavaScript are variables declared outside of any function or block scope. They are declared at the beginning of the program and can be accessed from any part of the program. Variables declared without the var keyword inside any function become global variables automatically.

Example of Global Variables in JavaScript

// Declaring global variables using var keyword
var globalVar1 = "Welcome";
var globalVar2 = "Students";

// Declaring global variables using let keyword
let globalVar3 = "to the";
let globalVar4 = "JavaScript tutorial";

// Declaring global variables using const keyword
const PI = 3.14;
const CompanyName = "ScholarHat";

// Accessing and printing global variables
console.log(globalVar1 + " " + globalVar2); 
console.log(globalVar3 + " " + globalVar4); 
console.log("The value of PI is " + PI); 
console.log("Company Name: " + CompanyName);

Output

Welcome Students
to the JavaScript tutorial
The value of PI is 3.14
Company Name: ScholarHat

2. JavaScript local variable

Local variables are declared and initialized at the start of a function or block and allocated memory inside that execution scope.

Example of Local Variables in JavaScript

function addNumbers(a, b) {
    // Local variable 'result' declared within the function
    let result = a + b;
    
    // Local variable 'message' declared within the function
    let message = "The sum is: " + result;
    
    console.log(message);
}
addNumbers(5, 7); // function call

console.log(result); 

In the above code, the result and message are local variables declared inside the function addNumbers(). Hence, the variable result could not be accessible outside the addNumbers() function.

Output

The sum is: 12

/index.js:13
console.log(result); 
            ^
ReferenceError: result is not defined
    at Object. (/index.js:13:13)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Variable Declaration without var and let keywords

You can declare or initialize a variable without using the var and let keywords. However, to do so, a value must be assigned to the variable. Such variables become global variables automatically, regardless of their declaration place.

function myfunction(){
	msg = "Hello JavaScript!"; 
}

myfunction();
console.log(msg)

In the above code, the variable msg is declared inside the function myfunction() without using var or let keywords. Hence, the variable msg becomes a global variable. Therefore, it is accessed outside the function.

Output

Hello JavaScript!

Dynamic Typing

In JavaScript, there's no need to specify the type of data a variable will contain. You can update the value of any type after initialization. It is also called dynamic typing.

let variable = 10;  //numeric value

variable = 'ScholarHat'; //string value

variable = 10.7; //decimal value

variable = true; //Boolean value

variable = null; //null value
console.log(variable)

In the above code, we declared the variable named "variable" with an integer value. After that, we initialized the variable with different values.

Output

null

Also read similar articles:

• Variables in C++ Programming
• Variables in C Programming - Types of Variables in C ( With Examples )
• Variables in Java
• What are Python Variables - Types of Variables in Python Language
• Variables in C#: Types of Variables with Examples

Summary

Becoming familiar with variables in JavaScript is essential for creating successful programming solutions. Understanding how to declare and use a variable correctly will help developers structure their code correctly. Experimenting with different techniques and researching the different types of variables can also give valuable insight into how each type of variable behaves. Take the time to practice and understand JavaScript variables, and consider pursuing a JavaScript Certification Course to demonstrate your skills to potential employers.

Take our Javascript skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE