Hoisting, Scope, Block and Storage

Hoisting:

Hoisting means that the relevant code is hoisted to the top of the code block, or script. This means that they are read before the code is actioned.

One thing to note with hoisting is that the variable is hoisted, but not its assigned value. In other words, the code reads that the variable exists, but does not read what the variable is until that variable is actioned.

Not all types of variable declarations are hoisted:

  • var:

    • var is hoisted:

    Here, we can see that var apple; has been declared after we tell the code what to do with apple. Because it has been declared as var, it has been hoisted to the top of the code block, and is thus accessible.


  • let and const :

    • let and const are NOT hoisted:

    Here, we can see that let apple; has been declared after we tell the code what to do with apple. Because it has been declared as let, it has not been hoisted to the top of the code block, and is thus inaccessible.

    The same is true for const.


Scope:

Scope can be considered as your environment. Declaring things in the global scope is like littering - it should be avoided. Declaring things in the local scope is like having a well-ordered book cabinet. Except in certain circumstances, variables should always be declared in the local scope - that is, within its own function.


  1. Global Scope:

    2. The global scope is effectively your script. If you have a 100 page website and just one JavaScript file, declaring vaiables in the global scope can cause huge problems by corrupting code:

    In the above code, we see that:

    var =

    We redeclare var inside the if statement, and expect that Lupin is either a human or a werewolf, depending on whether it is a full moon or not:


    It is a full moon. Lupin is currently a


    The code runs smoothly for when it is a full moon, however:


    It is not a full moon. Lupin is currently a


    The code has been corrupted because we redclared var inside the code block.


    The above is a good example of why we should declare our variables in the local scope rather than the global scope.


  2. Local Scope:

    3. This is declaring variables within your code blocks (functions, in this case:

    It is a full moon. Lupin is currently a

    It is a full moon. Lupin is currently a


    Above, having declared out variable animal within the local scope of our function, we can see that the results are correct. When it's a full moon, Lupin is a werewolf, when it isn't he is human.


    Another advantage to declaring variables in local scope is memory usage of the computer. As globally declared variable live for the length of the script, they are hogging memory. Declaring them locally means that the memory is only being used while the function is running.


On the Home page, we spoke about variables and how var can be redeclared, while let and const cannot.

Let's reuse our first Lupin block of code, but this time we shall use let instead of var:

It is a full moon. Lupin is currently a

It is not a full moon. Lupin is currently a


We have changed simply one word in the code - the var to let inside the if code block. However, doing so now returns the result that we want. This is because we have declared let inside the local scope of the if code block.

What happens if we do the same, but the other way around?

It is a full moon. Lupin is currently a Uncaught SyntaxError: Identifier 'species' has already been declared

It is not a full moon. Lupin is currently a Uncaught SyntaxError: Identifier 'species' has already been declared


And below, where we have changed both instances of var into let, we can see truly that the scope is local:

The code has completely ignored the globally declared let and returned only the locally scoped let, thus the code block functions as it should.

It is a full moon. Lupin is currently a

It is not a full moon. Lupin is currently a


Scope and Scripts

When pages are loaded, the browser concatenates scripts into one big file. Thus, we need to be careful when writing our scripts, because effectively, as the script files are now one big file, these scripts can "talk" to each other, and thus skew expected results:

We can see from the above embed that the two script files are talking to each other, and ths skewing the results. Now, if we simply wrap one of the commands inside a function(), we can see that they no longer communicate together.

Block:

JavaScript also functions by code blocks. What this means is that, according to how the variable is declared (either as var, let or const), code is either blocked (is not accessible) or not:

  • var:

    • Declaring "a" as var means that it is not blocked:


  • let and const:

    • Declaring "a" as let or const means that it is blocked:


Storage

Depending on the browser, there is a limited amount of memory available. Thus, in JavaScript, data can either be stored as local strorage or as session storage.

  • Session Storage:

    • Session storage is not persistent. It stays in the memory until the page is closed.

    Note that when you set the session storage, you have to set its key / value pairs. It is an Object.

    Also, when resetting the count, if you do not add the || 0;, the count returns undefined.

  • Local Storage:

    • Local storage is persistent. It stays forever in the memory of the page and always shows in the browser:

    Enter your name:

    Now close and then open this page.

    In the code block above, you can also see a function called resetName(). It is triggered using the button below:

    Now close and then open this page.

So why are these storage solutions important?

Imagine a website where you have to sign in. Keeping your log in details can either be good, or bad, depending on the website. You might want to keep your details for a personal site, of course. But you probably don't want them stored on the back end of your bank company's site!

The storage sessions also help if you need to store details but don't want to declare global variables.

Code Examples
Numbers:The Basics