Variable Declaration in Javascript for Beginners

Variables in JavaScript are like containers that hold reusable data. These data containers need to be declared with some specific keywords in Javascript.

Right now there are 3 ways to declare a keyword in JavaScript:

1. var (older/outdated way)
2. let (introduced in ES6 ✨)
3. const (introduced in ES6 ✨)

Before the standardization of ES6 (ES2015), everyone used to declare variables with the var keyword. Now we have let and const for every possible case.

Rules for using const and let

Follow these two rules to decide:

1. Use const as a constant when you are sure that the variable will not be redeclared.
2. Use let for everything else.

Rules for naming variables

Variable names are case sensitive, so name and Name both will be considered different variables.

let name = 'Pankaj';
let Name = 'Batman';

console.log(name); // 'Pankaj'
console.log(Name); // 'Batman'

Variable names cannot begin with a number but the numbers can be used in the middle and end of the variable name.

let 1name; // ❌ invalid
var 1name; // ❌ invalid
const 1name; // ❌ invalid

let name1; // ✔ valid
var name1; // ✔ valid
let my1name; // ✔ valid
const name1; // ❌ invalid
const name1 = 'Pankaj' // ✔ valid

A variable declared with const must be initialized.

// ❌ invalid
const name; // SyntaxError: missing initializer

// ✔ valid
const name = 'Pankaj';

Variables can start, end, or contain the following:

1. Uppercase strings
2. Lowercase strings
3. Underscores _
4. Dollar sign $

let _name; // ✔ valid
var $name; // ✔ valid
const my_name; // ✔ valid
let my$name; // ✔ valid

Variables cannot start, end, or contain symbols and special characters:

let my@name; // ❌ invalid
const #name; // ❌ invalid
var my%name; // ❌ invalid
let -name; // ❌ invalid
const my^name; // ❌ invalid
var *name; // ❌ invalid

Multiple variables can be chained by comma, but it's not considered good practice to do this.

let x, y, z; // ✔ valid
var x, y, z; // ✔ valid
const x, y, z; // ❌ invalid

// ✔ valid with let, const and var
let x = 1, y = 2, z = 3;
const a = 1,
    b = 2,
    c = 3;

Subsequent declaration of a variable is possible with var but not with let and const.

// ✔ valid
var age = 80;
var age = 81;
console.log(age) // 81

// ❌ invalid for let and const
let age = 80;
let age = 81;
// SyntaxError: Identifier 'age' has already been declared

// ✔ valid for var and let
let age = 80;
age = 81;
console.log(age) // 81

// ❌ invalid for const
const name = 'Hulk';
name = 'Thor'; // Uncaught TypeError: Assignment to constant variable.

// ✔ valid for let, var, and const if the variable is an object/array
const hero = {};
hero.name = 'Thor'; // ✔

const hero = { name: 'Hulk' };
hero.name = 'Thor'; // ✔

Notice in the above last example that we are just modifying one of the keys in the object and not replacing the entire object so it's working perfectly fine.

Why should we prefer let and const over var

It is good practice to avoid using var declaration in your code. let was introduced to provide a level of organization while managing the large data structures as it is safer knowing that your variable cannot be reassigned anywhere in its scope.

A quick tip

End all your statements with a semicolon. Although, JavaScript will do it for you when reading your code. But as a general guideline, we should always terminate each statement with a semicolon.

Thanks for reading! 🎉