[MicroArticle] [JavaScript] Variable Declarations

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)

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.

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?

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?

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.