### Variable Scope

Variable scope defines the accessibility of a variable from different parts of the code. There are two main scopes in Javascript: Global and Local.

#### Local scope

Functions in Javascript have their own local scope. This means that variables created inside functions cannot be accessed from outside the function.

        function create_name() {
            var name = 'Mary';
            console.log(name);
        }

        create_name(); // The console will show 'Mary'

        console.log(name); // The console will show an error because
        // we don't have access so the name variable.

#### Global Scope

Variables created outside functions belong to the global scope and can be accessed from anywhere in the code, including from inside functions.

        var name = 'Helen';

        function show_name() {
            console.log(name);
        }

        show_name(); // The console will show 'Helen'

Variables created without the var keyword also belong to the global scope, even if they were created inside functions.

This is something that should only be done intentionally as it can result in errors in your program that can be hard to spot.

        function create_name() {
            name = 'Mary';
            console.log(name);
        }
        create_name(); // The console will show 'Mary'
        console.log(name); // The console will show 'Mary'

#### Local scope inside blocks (loops, conditionals, etc.)

Before version ES6 (ECMAScript 2015), only functions had their own local scope. ES6 introduced a new keyword called let which creates a local scope inside these blocks.

        var a = 0;

        if (true) {
            let a = 20;
        }

        console.log();

        console.log(a); // This will return 0, because a was created as
        // a loval cariable inside the block

##### An example with problems with variable scope on nested loops:

    for (var a = 0; a < 3 ; a++) {
        console.log('Parent loop count: ', a);

        for (var a = 0; a < 3 ; a++) {
            console.log('Child loop count: ', a);
        }
    }

By running the above code we can see that the a variable used inside the child loop affected the variable of the parent loop, because they have the same names and variable created inside loops are accessible from outside of it.

To solve this, we can use the let keyword.

    for (let a = 0; a < 3 ; a++) {
        console.log('Parent loop count: ', a);

        for (let a = 0; a < 3 ; a++) {
            console.log('Child loop count: ', a);
        }
    }

Now the loops are working fine.

ATTENTION: ES6 features are not compatible with some versions of Internet Explorer (IE), therefore this keyword should not be used in front end web development projects.

To maintain full compatibility, it's recommended to change the names of variables when working with nested loops.

    for (var a = 0; a < 3 ; a++) {
        console.log('Parent loop count: ', a);

        for (var b = 0; b < 3 ; b++) {
            console.log('Child loop count: ', b);
        }
    }

##### The const keyword - for constants

ES6 also introduced a new keyword called const. Like let, they also belong to the local scope. The difference is that we can't change constants values.

        const PI = 3.14159;
        PI = 0; // This will result in error because we can't change the constant's value.
        // Why would we want to change PI's value anyway?

By using constants when they are appropriate we add more security to our code, because when there's an attempt to change them, an error raised will indicate something is wrong. But please note that constants will also break in some versions of IE.

### Contents