Difference between let and var in JavaScript [duplicate]

Question

I was going through the javascript style guide by Airbnb (https://github.com/airbnb/javascript).

In section 2.2 it is explained that

let is block-scoped rather than function-scoped like var.

// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}

I didn't get why the first one is bad practise and second is bad and if both let and var are block scoped then what difference does it make, if I use either of them?

Also what is the difference between function scoped and block scoped?

Answer 1

When something is block scoped it means that you can control the lifetime better and more intutive ways

for example

function a() {
    if (true) {
        var a = 7;
        let b = 42;
    }
}

The var a is pulled out in the scope of the function, rather than stying isolated in the block for the if, so like this;

function a() {
    var a;  // The JS compiler pulls the var out to this level
    if (true) {
        a = 7;
        let b = 42; // but keeps the let in this block.
    }
}

.. and that is counter intuitive and sometimes lead to problems -- the let does not have that problem.