Javascript Variable Assignments

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!

Comments

[Michiel Hendriks]

when declaring with const is that the values can not be changed once they have been declared, can not be re-assigned

Values can be changed. Just the assignment cannot.

const foo = {
  "bar": false
};
foo.bar = true;
console.log(foo.bar); // prints true

In other languages which offer const it is actually constant and cannot be changed (e.g. C, C++, also C# but limited).