Variable Declaration in Javascript for Beginners
Tags: javascript, thetechnicalwritingbootcamp, variables
Published: 2020-10-04 20:56:47

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.

```js
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.

```js
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.

```js
// ❌ 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 `$`

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

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

```js
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.

```js
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`.

```js
// ✔ 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! 🎉