Javascript Variable Assignments
Tags: beginners, javascript, webdev, tutorial
Published: 2021-06-19 19:14:18

## Introduction

If you wanna get a bit more in depth on the differences between the ways of declaring variables with  **var**, **let**, and **const**, then this is the article for you. We will be learn about scoping, features, and other important things we should really know about when declaring variables for our data. Let's take a step back and freshen up our javascript variable knowledge.

In javascript we are allowed to store _data_ values / types in what we know as _variable_names_ or in technical terms _identifiers_. It's easier for the developer to work with data when we give it a name and can pass it any where in our code simply by using its variable name. When we want to declare a variable we have the options to choose from three keywords _var_, _let_, or _const_. Each have there pros and cons on when to be used but it really comes down to it on how your data will work. We will dig a bit more in depth on each of these keywords to understand what the differences are and when to use the proper declarations. 

## Declaring variables with var

Before we were introduced into ES6 (modern javascript) there was only one way to declare variables and that was with the `var` keyword, also there was no other way to declare constants either. But luckily for us the *syntax* for declaring variables are all alike. Even though they have the same _syntax_ they have important differences.
 
Variables when declared with `var` do not have a block scope, instead they are `body` scoped. If we were to take _MDN_'s definition. 

MDN : "The scope of a variable declared with var is its current execution context and closures thereof, which is either the enclosing function and functions declared within it, or, for variables declared outside any function, global."

Meaning no matter how deep nested the variables are, if they are declared inside a function they stay within the scope of that function. 

```
var x = 'xyz';
var name = 'oscar';
var age = 25;
var data = [];

// can be declared in a single line statement too
var name = 'oscar', age = 25, data = [];
```

If you do decided to declare a variable outside a function, globals declared with `var` are implemented as properties to the `globalObject`. You can go inside your dev tools and access the console, while on the console declare a variable globally and access it with the `globalThis` object like so. 

```
var x = 2; // global variable

function greet(str) {
   const name = str; // body scoped variable
   
   return "Hello" + name
}

console.log(globalThis.x); // output 2
```

It's strange to say that you can have duplicates variable names when declared with `var` and won't trigger any errors even in _strict mode_.   


## Declaring variables with let

In modern _javascript_ we declare variables with the `let` keyword, which has a block-scope, it does not create properties of the `globalObject` when declared globally. 

For example

```
let name = 'oscar';
let i = 0;
let o; 
```

If you don't assign any value to your declared `let` variable, it will still be declared but will be `undefined`. Meaning the variable exists but has no `value`. You can also declare multiple variables with a single `let` statement. 

```
let a = 0,b = 12,c = 4;
```

The main difference between `var` and `let` is the power of `scope`. Here is an example of seeing them both in action. 

```
var x = 'global';
let y = 'global';

console.log(this.x); // "global"
console.log(this.y); // undefined
```
`let` variables on the other hand are allowed to have their values changed unlike our other keyword `const` which will give us an _error_ if we tried to change it's when already declared. So if you know that your data is going to be dynamic, you can save your from future bugs that sometimes are very hard to spot because of the way we declared our variables. 


## Declaring variables with const

It's important to not that the major difference when declaring with `const` is that the values can not be changed once they have been declared, can not be re-assigned, otherwise it will throw a `TypeError`. But just like the `let` keyword, when declared globally it will not become a property of the `window` object unlike `var` variables. But it is _required_ to initialize the when its declared, cause again you can not re-assign or change data of a `const` in the future, which makes sense on why you need to initialize it right away.  

```
const name = 'oscar';
const age = 25;

```

>In one approach, we use const only for values that must not change. In the other, we use const for any value that does not happen to change. I prefer the former approach in my own code.  
David Flanagan 


## Conclusion 

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!