JavaScript Variables

JavaScript empowers millions and millions of websites and applications. While implementing such websites, it is important to organize your information and store data. JavaScript variables are a way of storing information or data in memory and giving it a name to easily remember where the information or data is stored.

Imagine building an eCommerce website where you have to store product information. For each product, there must be a need to store the product name, manufacturer, date launched, quantities available, and price. Now as a Developer, once you decide to store all this information, it becomes more and more difficult to remember where each piece of information is stored in memory because memory addresses on a computer are a long sequence of numbers and characters and it is impossible for any human to memorize them. A JavaScript variable is used to name these memory locations so that when the information is needed again, one can just use the variable name and the information will be retrieved.

JavaScript variables can be created in three different ways using keywords var, let and const. Initially, variables were created using only the var keyword. But due to some historic drawbacks of using var, let and const were implemented for creating variables. It is recommended that Developers don’t use the var keyword anymore to declare variables. Irrespective of which keyword you use to get your variable declared, the syntax still remains the same.

As seen on the right, a variable can be created by specifying the keyword, followed by a variable name that will be used to store the value and as well retrieve it later, a simple assignment operator (an equal sign) for assigning variable values, and the value to be stored itself.

You can choose to create a local variable or a global variable. Global variables are accessible from anywhere in the program. Local variables are variables declared inside a function, which avoids a conflict with another variable with the same variable name.

You can also declare multiple variables in one statement in JavaScript. Variable declaration can also span multiple lines.

JavaScript variables are powerful programming constructs. However, there is a convention that should be followed by creating a variable in JavaScript.

Following are the rules that a Developer should follow to properly get variables declared:

• Variable name should only contain alphabets, numbers, $ and _
• Variable name should not start with a number
• Variable names are case-sensitive i.e. result and Result are two different variables
• Variables can’t be named as one of the reserved keywords like let, return, const, etc.
• Variable should use camelCase i.e. numOne is preferred over NumOne or numone
• Variable can’t have hyphen - in its name
• Use easy-to-understand names that symbolize the value stored in variables. For e.g. instead of calling a variable phNum, a Developer can call it phoneNumber.
• Don’t use single-letter variable names like x, a, z, etc.

Variables can be created using the var keyword. The only thing to remember is that JavaScript won’t complain or throw an error if a variable is being used before it is declared using the var keyword. In modern programming using JavaScript code, using the var keyword for variables is discouraged and should be replaced with let or const keywords. Variables created using var keyword are also function-scoped or global-scoped i.e. it is very hard to limit wherein a large block of code the variable should be accessible. Hence, code written using the var keyword is hard to maintain.

let keyword was introduced to solve hoisting issues that the var keyword had. let variables are block-scoped and are only accessible to where they are declared. This limits the issues of variables being overwritten somewhere else in the code. Apart from this, the variables created using the let keyword follow the same syntax as the ones created using the var keyword. Variables created using let and var keywords can be reassigned a value of a different kind. Hence they are mutable.

Sometimes, variables created should not change the value assigned to it. This can’t be achieved if you declare a variable using let and var keywords. In such cases, a variable should be created using the const keyword. A variable created using const∏ can’t change the value assigned to it. It symbolizes constants.

let numOne = 20;
let numTwo = 30;

const result = numOne + numTwo; 
console.log(‘Result is: ‘, result); // should print 50

numThree = 60;
result = numOne + numThree; // this is not allowed as result is a constant variable
console.log(‘Result is: ‘, result); // this will not be executed as above line has error

const variables are also named differently sometimes when they store a value that would be otherwise hard to remember or store. Like private keys, colors, fonts, etc. usually have complex values and hence const are appropriate for it.

const LIGHT_GRAY = ‘#ccc’;
const DARK_GRAY = ‘#eee’;