Variables and Datatypes in JavaScript

There are majorly two types of languages. 

• Statically typed language
• Dynamically typed languages

Statically typed language: Where each variable and expression type is already known at compile time. Once a variable is declared to be of a certain data type, it cannot hold values of other data types.

Example: C, C++, Java. 

Java

// Java(Statically typed)
int x = 5  // variable x is of type int and it will not store any other type.
string y = 'abc' // type string and will only accept string values

Dynamically typed languages: These languages can receive different data types over time. In this type of language, we don’t need to specify whether the value in the variable is an integer, string, or any other data type like float, double, etc. The JavaScript Engine automatically understands the data type. We can re-assign any variable with any other value having another data type as given below.

Example: Ruby, Python, JavaScript

Javascript

// Javascript(Dynamically typed)
let x = 5; // can store an integer
let name = 'string'; // can also store a string.

JavaScript is a dynamically typed (also called loosely typed) scripting language. That is, in JavaScript variables can receive different data types over time. Datatypes are basically typed data that can be used and manipulated in a program.

The latest ECMAScript(ES6) standard defines the following data types: Out of which six data types are Primitive(predefined). 

• Numbers: Represent both integer and floating-point numbers. Example: 5, 6.5, 7, etc.
• String: A string is a sequence of characters. In JavaScript, strings can be enclosed within single or double quotes. Example: “Hello GeeksforGeeks” etc.
• Boolean: Represent a logical entity and can have two values: true or false.
• Null: This type has only one value: null. It is left intentionally so that it shows something that does not exist. 
• Undefined: A variable that has not been assigned a value is undefined.
• Symbol: Unlike other primitive data types, it does not have any literal form. It is a built-in object whose constructor returns a symbol that is unique. 
• bigint: The bigint type represents the whole numbers that are larger than 2⁵³-1. To form a bigint literal number, you append the letter n at the end of the number.
• Object: It is the most important data-type and forms the building blocks for modern JavaScript. We will learn about these data types in detail in further articles.

Variables in JavaScript: Variables in JavaScript are containers that hold reusable data. It is the basic unit of storage in a program.  

• The value stored in a variable can be changed during program execution.
• A variable is only a name given to a memory location, all the operations done on the variable effects that memory location.
• In JavaScript, all the variables must be declared before they can be used.

Before ES2015, JavaScript variables were solely declared using the var keyword followed by the name of the variable and semi-colon. Below is the syntax to create variables in JavaScript: 

var var_name;
var x;

The var_name is the name of the variable which should be defined by the user and should be unique. These types of names are also known as identifiers. The rules for creating an identifier in JavaScript are, the name of the identifier should not be any pre-defined word(known as keywords), the first character must be a letter, an underscore (_), or a dollar sign ($). Subsequent characters may be any letter or digit or an underscore or dollar sign. 

Notice in the above code sample, we didn’t assign any values to the variables. We are only saying they exist. If you were to look at the value of each variable in the above code sample, it would be undefined.

We can initialize the variables either at the time of declaration or also later when we want to use them. 

Below are some examples of declaring and initializing variables in JavaScript:

// Declaring single variable
var name;

// Declaring multiple variables
var name, title, num;

// Initializing variables
var name = "Harsh";
name = "Rakesh";

JavaScript is also known as untyped language. This means, that once a variable is created in JavaScript using the keyword var, we can store any type of value in this variable supported by JavaScript. 

Below is an example of this:

// Creating variable to store a number
var num = 5;

// Store string in the variable num
num = "GeeksforGeeks";

The above example executes well without any error in JavaScript, unlike other programming languages. 
Variables in JavaScript can also evaluate simple mathematical expressions and assume their value.  

// Storing a mathematical expression
var x = 5 + 10 + 1;
console.log(x); // 16

After ES2015, we now have two new variable containers: let and const. Now we shall look at both of them one by one. The variable type Let shares lots of similarities with var but unlike var, it has scope constraints. To know more about them visit let vs var. Let’s make use of the let variable:  

// let variable
let x; // undefined
let name = 'Mukul';

// Can also declare multiple values
let a=1,b=2,c=3;

// Assignment
let a = 3;
a = 4; // works same as var.

Const is another variable type assigned to data whose value cannot and will not change throughout the script. It is a stricter version of let.

// const variable
const name = 'Mukul';
name = 'Mayank'; // will give Assignment to constant variable error.

Variable Scope in Javascript: The scope of a variable is the part of the program from which the variable may directly be accessible. 

In JavaScript, there are two types of scopes: 

• Global Scope: Scope outside the outermost function attached to the window.
• Local Scope: Inside the function being executed.

Let’s look at the code below. We have a global variable defined in the first line in the global scope. Then we have a local variable defined inside the function fun().

Example:

Javascript

let globalVar = "This is a global variable";

function fun() {
    let localVar = "This is a local variable";

    console.log(globalVar);
    console.log(localVar);
}

fun();

Output:

This is a global variable
This is a local variable

When we execute the function fun(), the output shows that both global and local variables are accessible inside the function as we are able to console.log them. This shows that inside the function we have access to both global variables (declared outside the function) and local variables (declared inside the function). Let’s move the console.log statements outside the function and put them just after calling the function.

Example:

Javascript

let globalVar = "This is a global variable";

function fun() {
    let localVar = "This is a local variable";
}

fun();

console.log(globalVar);
console.log(localVar);

Output:

We are still able to see the value of the global variable, but for the local variable, console.log throws an error. This is because now the console.log statements are present in the global scope where they have access to global variables but cannot access the local variables. 

Also, any variable defined in a function with the same name as a global variable takes precedence over the global variable, shadowing it. To understand variable scopes in detail in JavaScript, please refer to the article on understanding variable scopes in Javascript.

To understand more about the basics of global and local variables please refer to this Global and Local Variables in JavaScript article.