Let vs Var in JS

Yeah 🤓. Today we must starting learning more about how really JS works. It should be really strange but don't worry about that, I will try to make it really clear and understandable to make sure that you have just understood it 🥰

First of all, we should understand 🙀 what is exactly a variable, a variable is a container when you can save whichever data you need, think in a container, you can save a data inside it and make sure that it will be safe 🤓. The main point is that it will be safe until your program die, let's doing an example:

var myName = "Manu"
console.log(myName);

As you can see above, we have just made a brief example where we have saved up my name into a value 🤝, but STOP, saving data inside var is really dangerous, it hasn't had any scope, the data can change whenever you want, imagine that this data need to be always the same, it means isn't able to change it, then I introduce you constants, let's see an example:

const myName = "Antonio",

This is exactly what a constant looks like, his value will never change, you can be sure of that. But then, 😵‍💫

What are the different between var and const?.

The const will never mutate 😇. This is the key.

Nevertheless, there are another way to get a variable in JS, and it's the best approach to make your vars more secure, it's a pleasure to meet you let, let's see an example:

let myAge = 20;
console.log(myAge);

What is exactly that 🤓?

Apparently it's the same meaning that var, it's able to mutate and re-asign a new value, but let is block-scope, it means understand what is exactly a scope, then if you declare it inside an if it won't never mutate 🤕, let's see an example:

if (true) {
  var myName = "Manu";
}
myName = "Antonio";

In this code, we can mutate the value from the var because var doesn't understand why it shouldn't mutate, however look at the following example:

if (true) {
  let myName = "Manu";
}
myName = "Antonio";

Oh shit 💩!!!, it gets an error because let understand that you have just declared inside an if scope, then why did you want to mutate this value? Here, you can see clearly which is the difference between let and vars.

I hope you have just understood ☺️ why using a var is a good practice when you are writing your code. If you have any question please don't hesitate to write a comment 😙, it will be a pleasure to help you.

Comments

[Luke Shiru]

There are a few serious mistakes in this post, I'll address them separatedly:

The const will never mutate 😇. This is the key.

That's actually wrong. const will not avoid mutations, the only thing it blocks is re assignments. So ...

const foo = "foo";
foo = "bar"; // Error, can't reassign a `const`!

// but...
const bar = { value: "bar" };
bar.value = "baz"; // No error, mutation done!

Apparently it's the same meaning that var, it's able to mutate and re-asign a new value, but let understand what is exactly a scope, then if you declare it inside an if it won't never mutate 🤕

That's also wrong. let doesn't avoid mutations nor re-assignments. The only difference between var and let is that let is "block scoped", which means that when you declare it, it only "exists" inside that block, while var is "function scoped", which means that its declaration "exists" everywhere inside the current function. Here:

function example() {
    if (true) {
        // (1) Here `foo` is undefined, and `bar` will give you an error
        var foo = "foo";
        // (2) Here `foo` is "foo", and `bar` will give you an error
        let bar = "bar";
        // (3) Here `foo` is "foo", and `bar` is "bar"
    }
    // (4) Here `foo` is "foo", and `bar` will give you an error
}

Explaining further:

1. foo is undefined because is a var and it's declaration is moved to the top of the example function (because of hoisting). bar will give you an error because you're trying to read it before you define it.
2. foo now is "foo" because we assigned that value to it, but bar will still give you an error for the same reason as before.
3. Now both foo and bar have values.
4. Outside of the if, bar doesn't exist, so it will give you an error of an undefined value, while foo will still be "foo" because of hoisting.

As you can see, let's behavior doesn't have anything to do with mutation.

Hope this makes it more clear for you, Manu!

Cheers!

PS: @whitehatdevv is it really a good move from your point of view to hide comments that point out mistakes in your posts? Can you at least update the post with the corrections so junior folks reading your post don't learn something that is wrong?