JavaScript Variables

Variable means anything that can vary. In JavaScript, a variable stores data that can be changed later on.

Declare a Variable

In JavaScript, a variable can be declared using var, let, const keywords.

• var keyword is used to declare variables since JavaScript was created. It is confusing and error-prone when using variables declared using var.
• let keyword removes the confusion and error of var. It is the new and recommended way of declaring variables in JavaScript.
• const keyword is used to declare a constant variable that cannot be changed once assigned a value.

Here, we will use the let keyword to declare variables. To declare a variable, write the keyword let followed by the name of the variable you want to give, as shown below.

Example: Variable Declaration

let msg; // declaring a variable without assigning a value

In the above example, var msg; is a variable declaration. It does not have any value yet. The default value of variables that do not have any value is undefined.

You can assign a value to a variable using the = operator when you declare it or after the declaration and before accessing it.

Example: Variable Initialization

let msg;
msg = "Hello JavaScript!"; // assigning a string value

In the above example, the msg variable is declared first and then assigned a string value in the next line.

You can declare a variable and assign a value to it in the same line. Values can be of any datatype such as string, numeric, boolean, etc.

Example: Variable Declaration and Initialization

let name = "Steve"; //assigned string value
let num = 100; //assigned numeric value
let isActive = true; //assigned boolean value

Multiple variables can be declared in a single line, as shown below.

Example: Multiple Variables

let name = "Steve", num = 100, isActive = true;

You can copy the value of one variable to another variable, as shown below.

Example: Copy Variable

let num1 = 100; 
let num2 = num1;  

JavaScript allows multiple white spaces and line breaks when you declare a variables.

Example: Whitespace and Line Breaks

let name = "Steve",
    num = 100,
    isActive = true;

Variable names are case-sensitive in JavaScript. You cannot declare a duplicate variable using the let keyword with the same name and case. JavaScript will throw a syntax error. Although, variables can have the same name if declared with the var keyword (this is why it is recommended to use let).

Example: Syntax Error

let num = 100; 
let num = 200; //syntax error  

var num = 100; 
var num = 200; //Ok

JavaScript Variable Naming Conventions

• Variable names are case-sensitive in JavaScript. So, the variable names msg, MSG, Msg, mSg are considered separate variables.
• Variable names can contain letters, digits, or the symbols $ and _.
• A variable name cannot start with a digit 0-9.
• A variable name cannot be a reserved keyword in JavaScript, e.g. var, function, return cannot be variable names.

Dynamic Typing

JavaScript is a loosely typed language. It means that you don’t need to specify what data type a variable will contain. You can update the value of any type after initialization. It is also called dynamic typing.

Example: Loosely Typed Variable

let myvariable = 1;  // numeric value

myvariable = 'one'; // string value

myvariable = 1.1; // decimal value

myvariable = true; // Boolean value

myvariable = null; // null value

Constant Variables in JavaScript

Use const keyword to declare a constant variable in JavaScript.

• Constant variables must be declared and initialized at the same time.
• The value of the constant variables can’t be changed after initialized them.

Example: Constant Variables

const num = 100; 
num = 200; //error  

const name; //error
name = "Steve";

The value of a constant variable cannot be changed but the content of the value can be changed. For example, if an object is assigned to a const variable then the underlying value of an object can be changed.

Example: Constant Variables

const person = { name: 'Steve'};
person.name = "Bill";
alert(person.name); //Bill

It is best practice to give constant variable names in capital letters to separate them from other non-constant variables.

Variable Scope

In JavaScript, a variable can be declared either in the global scope or the local scope.

Global Variables

Variables declared out of any function are called global variables. They can be accessed anywhere in the JavaScript code, even inside any function.

Local Variables

Variables declared inside the function are called local variables of that function. They can only be accessed in the function where they are declared but not outside.

The following example includes global and local variables.

Example: Global and Local Variable

let greet = "Hello " // global variable

function myfunction(){
    let msg = "JavaScript!"; 
    alert(greet + msg); //can access global and local variable
}

myfunction();
		
alert(greet);//can access global variable
alert(msg); //error: can't access local variable

Declare Variables without var and let Keywords

Variables can be declared and initialized without the var or let keywords. However, a value must be assigned to a variable declared without the var keyword.

The variables declared without the var keyword become global variables, irrespective of where they are declared.

It is Recommended to declare variable using the let keyword.

Example: Variable Declaration Without var or let Keyword

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

myfunction();
alert(msg); // msg becomes global variable so can be accessed here

Points to Remember:

1. Variables can be defined using let keyword. Variables defined without let or var keyword become global variables.
2. Variables should be initialized before accessing it. Unassigned variable has value undefined.
3. JavaScript is a loosely-typed language, so a variable can store any type value.
4. Variables can have local or global scope. Local variables cannot be accessed out of the function where they are declared, whereas the global variables can be accessed from anywhere.