In the previous article, we got an introduction to JavaScript. As the first step in moving forward in the series, let us understand how we declare variables and constants in JavaScript. Before moving on, it's fair to understand what are variables and constants in JavaScript and why are they required. In a nutshell, variables serve as data storage containers. Primarily, high-level languages like JavaScript work with information, hence storing and retrieving information becomes basic essential, and variables play a vital role in doing so.
The identifier is a user-defined name which is assigned to that particular container so that we can store, retrieve and manipulate data according to our requirements.
Variables in JavaScript can be declared in three ways:
Though var, let, and const in JavaScript appear similar and almost interchangeable, one should be very cautious in using them according to the requirements. Let's explore them and understand their use cases well in order to use them effectively.
var in JavaScript
Syntax:
var identifier = value;
It's that simple to declare a variable in JavaScript where typecasting is not needed, unlike other high-level languages. JavaScript presumes datatype at the time of declaration and acts accordingly. For instance, consider the following case.
var a = 2;
var b = 'coding minutes';
var c = '3' ;
The above example demonstrates how to declare numeric variables and string variables in JavaScript. Remember, anything enclosed with ' ' and " " shall be treated as string irrespective of the information contained by those quotation marks. One has to be very cautious while dealing with these as they can be very tricky.
Do's and Don't while declaring a variable:
Identifier should start with an alphabet or _ (underscore).
var num1=23
var _num1=23
Do not start with any other symbols such as $ or with numeric.
var @gmail=46
var 7up=23
Do not assign any keyword as an identifier.
var some_random_name=100
var console=100
Do not give any space, separators like commas, or full stops between the characters.
var coding minutes="Awesome"
Use (_) to separate between characters. For example: "coding_minutes"
var coding_minutes=true
JavaScript is case sensitive. While declaring a variable, be cautious about upper and lower cases.
var firstName="Mike"
console.log(FirstName)
It's a good practice to use camelCase while declaring a variable.
JavaScript is a loosely/weakly typed language. Loosely typed language is flexible with its declarations, consider the following case
var a=10;
console.log (a);
var a="hello world";
console.log (a);
Shocked? Okay, hear me out! Unlike other high-level languages, where a number cannot be redefined as a string, JavaScript is different and redeclaration IS possible.
var is the oldest and is the only variable in use until 2015. let and const are two keywords introduced in the ES6/ES2015 version of JavaScript. They are "block-scope variables". This whole concept of block-scope was in the limelight after they were introduced. Before learning about let and const, it's important to understand block-scope and why they were introduced in spite of var, which was satisfying the requirement pretty well for JavaScript developers.
Block-scope
Anything enclosed between curly brackets { } is considered a block, while the scope is apparently the extent or reach. Variables that only exist inside that block and are accessible only within those brackets are known as block-scoped variables.
Let's try to understand the block-scope concept through analogy. Let's assume you were rigorously coding in your room for hours together, you eventually became hungry and decided to grab an apple. You get up walk up to your kitchen and grab an apple. Isn't it easy? Now hypothetically you don't have any apples in your kitchen and your neighbour's kitchen has them, can you go and grab them the same way you could from your kitchen? obviously not. Because it's out of your reach/extent to grab those apples. In JavaScriptThe same goes for block scope. Your house is within your scope, but your neighbour's house is out of yours.
Consider the following code:
{
let b = 20 ;
const pi = 3.141;
console.log (b);
console.log (pi);
}
console.log (b) ;
console.log (pi) ;
Observe the 'console.log' of b and pi within the block, they are accessible, but out of the block, they aren't. JavaScript will throw a reference error, and we'll explore types of errors in the later part of the series, but for now, a reference error simply means that the variable is not in existence.
let in JavaScript
Syntax:
let identifier = value;
let is a keyword introduced in JavaScript in the ES6 version to introduce the concept of block scope. To understand how let acts within the block and outside the block consider the following code
let b = ' welcome to Coding Minutes '
{
let b = ' Coding Minutes is the best ' ;
console.log ( b ) ;
}
console.log ( b ) ;
var variable allows us to redeclare the variable and the latest declaration shall be considered. That's not the case with let, it refrains us from redeclaring let variables,
let a = 35 ;
let a = 45 ;
console.log(a) ;
const in JavaScript
const is very strict and should be handled with care. const is introduced in the ES6 version as a block-scoped variable
Syntax:
const identifier = value;
Primary points to remember about const are, that const cannot be re-declared or re-assigned. The following piece of code explains that
const b;
b = 23;
console.log(b)
In the case of var and let we can define the variable and initialise it in the later part of the code. This is called re-assigning. That's not possible in the case of const. const should be declared and initialised simultaneously.
In case of re-declaration, JavaScript will throw a reference error.
It's better to use const when you are sure of a value and you don't want to change it throughout the code. For example const pi=3.141, const g=9.8 etc.
var vs let vs const
In JavaScript, var is flexible, let is stricter while const is the strictest among the lot. Let's examine in detail:
var is a function scoped and var does not have any restrictions in the block and out of the block. Its behaviour remains the same.
The same is not the case with let and const, they are block-scoped and act according to their location.
var can be re-declared and re-assigned in JavaScript. let can be reassigned but cannot be re-declared. const cannot be re-assigned nor re-declared.
var a;
a = 20
let b;
b = 30
const c;
c = 40
{
var a = 50;
let b = 60;
let b = 80;
const c = 70;
const c = 90;
console.log(a);
console.log(b);
console.log(c);
}
console.log ( a );
console.log ( b );
console.log ( c );
var is prone to error, and we may face unexpected errors. let is stable and unexpected errors are comparatively less. const is highly stable and the chances of unexpected errors are very less.
JavaScript constants best practices
Use const, otherwise prefer let as these two are less prone to error. Make sure you give readable names to variables and constants in JavaSript, as while building projects, accessing variables and constants is a real challenge.
The above discussion is just a basic part of how variables are declared and the types of variables in JavaScript. Everything in JavaScript is interconnected, in the later part of the series, when we explore concepts like lexical environment, hoisting, functions etc. we'll observe their behaviour in detail.
In the next article, we will explore different data types in JavaScript in detail.
