[MicroArticle] [JavaScript] Variable Declarations 
Tags: javascript
Published: 2020-05-17 08:48:23

---
title: [MicroArticle] [JavaScript] Variable Declarations 
published: true
description: Variable Declarations in JavaScript
tags: JavaScript
---
>*MicroArticle is a bite-sized learning technique that focuses on learning just one key objective, applying them practically and feeling accomplished.*

***Well, what's in it for me and why do I care?***
*Turns out that, attention spans are getting shorter and the learners want to be engaged, entertained, motivated to learn something new and be able to see improvements*  

***Motivation behind why I started this initiative:***
*I have always been passionate about writing and I am struggling to find time to write lately for the past couple of years and the greatest hurdle I am facing is going from inertia to mobility.* 

*I had to come up with some strategies to resume my "habit" of writing. Having said that, I believe that most of our lives are governed by our habits. If you want to build a new habit, make that habit as easy to adopt as possible. Hence my idea of writing an almost ridiculously tiny article as possible - I ended up naming it as "MicroArticle". Picking an easy goal eliminates any perceptions of difficulty and is hardly daunting enough to make you feel fatigued.*

___
In this MicroArticle, we will discuss on how to declare variables in JavaScript and what is the difference between different keywords `var`, `let` and `const` 

**What are Variables?** 
They are just containers for storing data values - you can place data into these containers and then refer to the data by naming the container. Before using a variable in JavaScript, it must be declared. 

**Keywords to declare Variables:** 
Before JavaScript ES6 introduced, the only keyword available to declare a variable was the `var` keyword. Now there are 2 more additions to it - `let` and `const` 

**Why these 2 new keywords are introduced?** 
This is to allow programmers to decide scope options for the defined variables. 
`var` - Function Scope
`let` and `const` - Block Scope

**What is a Function Scope?**
Refer to the below example - the variable `i` which is defined in the `for` loop is scoped even outside the for loop within the function. That's the reason why the console output till the number 5 (See the result tab)

{% jsfiddle https://jsfiddle.net/naveenrtr/mx1c0ydq/ js,result %}

**What is a Block Scope?**
Variables declared with the `let` keyword can have Block Scope - Variables declared inside a block { }. As a result, the Below code would throw an error since the variable `i` is accessed outside the block of for loop. 

```javascript
function foo() {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log(i);
}

foo();
```
What if I have the same variable say `x` defined both inside and outside the block scope?

```javascript
var x = 1;
{
  var x = 2;
}
// What's the value of x here?
```
The above code will have the value of variable `x` as 2 (modified)

Try to guess what's the value of variable `x` in the below code snippet? 
```javascript
var x = 1;
{
  let x = 2;
}
// What's the value of x here?
```
If you guessed it right, the value of x outside the block would still be 1. 
 
**Best Practices**
- Declare variables at the top of each script or function - your code looks much cleaner and it makes it easier to avoid unwanted re-declarations
- Initialize variables when you declare them - again, your code looks much cleaner and it provides a single place to initialize variables instead doing it all over the place
- Use `let` if you think that the value of the variable is intended to get modified, else use `const` 
- Treat numbers, strings, or booleans as primitive values and not as objects - declaring as objects have performance impacts and side effects

---
Let me know what you all think about my initiative. The article might seem too trivial or basic for many of you here - but my idea is to get myself started with something small and also keeping my point on short attention span in mind.