Difference between let and var in JavaScript

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

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.