Variable Declaration in Javascript
Published: 2021-10-05 14:32:28

**Quick Summary**: in this article, we are going to learn about how to declare and name variables, block scoping, hoisting, redeclaration as well as the rules and conventions that guide declaring a variable. By the end, you will understand how to declare variables, the concept behind block scoping, redeclaration, and hoisting in javascript.

**variables** are an important part of the programming language. In general, variables are ways of storing data(value).

##Rules Guiding Variable Names

* variable names can only include letters, numbers, underscore(_), dollar sign($).
* variable names cannot start with a number.
* variable names are case sensitive. Meaning, letter "a" is considerably different from the letter "A".
* Reserved words (like JavaScript keywords e.g function) cannot be used as variable names.

##Declaring Variables
Before Es6, `var` keyword was the only way to declare a variable and it is problematic and it has caused a lot of bug issues in cases of scope, hoisting, and redeclaration. while `Let` and `const` were introduced in Es6 and came to solve those problems.

```
var name = 'Taiwo'
```

###Const
`const` as the name suggests constant, A constant is a variable that cannot be overwritten. Once declared, you cannot change its value.

```
const name = 'John'
console.log(name)  // John
name = 'Taiwo'  //TypeError: Assignment to constant variable.
```
A variable has a default value if no value is assigned to it but const has no default value and it requires an initializer.


```
var name; // undefined

const name;  // SyntaxError: Missing initializer in const declaration
```

##Let
The `Let` keyword allows mutability and it doesn't require an initializer just like `var`.
```
let name = 'Taiwo'
name = 'John'
console.log(name)  // John

// it defaults to undefined without an initializer
let name;  // undefined
```

###Block Scope

Block scope is an area between two curly braces {} which can be between `if`, `switch` conditions, or `for` and `while` loops. 

The `var` keyword is function scope and it doesn't have a true block scope because variable declared with `var` jumps out of the block and it can be accessed outside the scope. 
```
var name = 'john';

if (name) {
	var name = 'Taiwo';
	console.log('block scope', name); // block scope Taiwo
}
console.log('global scope', name); // global scope Taiwo
```

The `let` and `const` came to solve this, they have a true block scope because they exist only within the block they are declared in.
```
let name = 'john';
if (name) {
	let name = 'Taiwo';
	console.log('block scope', name); // block scope Taiwo
}
console.log('global scope', name); // global scope john
```

###Redeclaration
`var` allows you to redeclare a variable as many times as you like.
```
function addScore (){
	var score = 55
	if (score > 50){
	   var score = 70
	   console.log('Your score is', score) //Your score is 70
	}
	var score = 80
	console.log('Your score is', score) //Your score is 80
}
```
 `let` and `const` don't allow redeclaration within the same block. Redeclaring a variable would result in an error.
```
function addScore (){
	let score = 55
	if (score > 50){
		let score = 70
		console.log('Your score is', score) //Your score is 70
	}
	let score = 80 //SyntaxError: Identifier 'score' has already been declared
}
}
```

###Hoisting
Hoisting is the javascript default behavior of moving all declarations to the top of the current scope before code execution.
`var` variables are hoisted. with `var`, you can use a variable before you declare it.
```
name = 'Taiwo'
console.log(name) // Taiwo
var name
```

Note: javascript only hoist declarations, not the initializations.

In the case of the code above, only the `var` declaration is moved to the top of the function, not the initializer attached to it (the `'Taiwo'` part of `var name`).

`let` and `const` are also hoisted but they are hoisted differently compared to `var`. With let and `const` you can't use a variable until its declaration is processed.


```
name = 'Taiwo'
console.log(name) // ReferenceError: Cannot access 'name' before initialization
let name
```
`let` and `const` use the concept of Temporal Dead Zone(TDZ). It is a period within the code execution where the variable cant be used at all. Therefore, `let` and `const` variables exist in the TDZ from the start of their enclosing scope until they are declared. Meaning the variable cannot be accessible until it's been declared.

##Conclusion
`var` has been deprecated. it is advisable to always use `let` in place of `var` to avoid unforeseen errors. And always use `const` to declare constants.