JavaScript – hoisting, var, let, const

JavaScript – hoisting, var, let, const

This post is a quick summary of the differences in JavaScript variable declaration.

Before ES2015 (previously named ES6), there was only one keyword to declare variables: var. The newer standard introduced two extra useful keywords: let and const.

Briefly:

  • var declares “almost global” variables
  • let declares block variables
  • const declares block read-only variables

Explanation follows.

Table of contents

My related project

E-book: How to set up free WordPress platform for IT blogs

Do you want to set up a typical blog but you don’t know how to start, which plugins to use or how to customize the site? I spent a few weeks in total doing that from scratch – from learning the ecosystem to adjusting the platform to my very specific needs. Now I want to share with my experience and make the start easier for you.

  1. Hoisting
    1. var
      1. let
        1. const
          1. Summary

            Hoisting

            There is something irrational about how JavaScript freed variables. It is possible to use variables without any declaration keyword! So it’s perfectly legal (but not the best idea) to write: a = 3.

            What’s more confusing, it is legal to write:

            JS

            The declaration in line 3 does absolutely nothing and does not protect before using an undeclared variable a in line 1.

            Fortunately, that trick will not work the let or const – an error will be thrown that you tried to access the variable before initialization.

            var

            Variables declared with var in global scope are available everywhere.

            Variables declared with var inside a function are accessible only in that function, but in any (even higher) block:

            JS

            That’s crazy… Forget about var for your sanity!

            let

            Variables declared with let are available only in this and deeper blocks. This is how it should work:

            JS

            const

            Variables declared with const are not variables but constants ;). They behave alike let in terms of scope, but their values cannot be modified. An attempt to change the value will throw an error.

            JS

            Why and when to use variables that cannot be modified? All the time, actually!

            This is a protection against making mistakes in code and changing values that were not supposed to be changed. It turns out that there are many variables that should not be changed – when you want to store a return value from other function, you usually do not modify it, just reuse it. This concept of using immutable values comes from Functional Programming and is a great idea to follow to make the code cleaner. In functional programming it’s more strict – imagine you cannot change any variable’s value, you can only return new values through functions…

            It’s worth remembering what const guards in JavaScript: only changing an assignment to the variable. So it is not possible to assign another value to a constant, but it is still possible to change that constant’s property, for example:

            JS

            Summary

            var
            let
            const
            function test() {
              var a = 1;
              if (true) {
                var a = 4;
                console.log(a); // 4
              }
              console.log(a); // 4
            }
            test();
            function test() {
              let a = 1;
              if (true) {
                let a = 4;
                console.log(a); // 4
              }
              console.log(a); // 1
            }
            test();
            function test() {
              const a = 1;
              if (true) {
                const a = 4;
                console.log(a); // 4
              }
              console.log(a); // 1
            }
            test();
            5 1 vote
            Article Rating

            Want more?

            Share!

            Subscribe
            Notify of
            guest
            0 Comments
            Inline Feedbacks
            View all comments
            0
            Would love your thoughts, please comment.x
            ()
            x