These are JavaScript’s main ways of declaring variables:

    • declares mutable variables.
    • const declares constants (immutable variables).
      Before ES6, there was also var. But it has several quirks, so it’s best to avoid it in modern JavaScript. You can read more about it in .

    Variables declared via let are mutable:

    You can also declare and assign at the same time:

    10.2. const

    Variables declared via const are immutable. You must always initialize immediately:

    1. const i = 0; // must initialize
    3. assert.throws(
    5.   {
    7.     message: 'Assignment to constant variable.',
    9. );

    10.2.1. const and immutability

    In JavaScript, const only means that the binding (the association between variable name and variable value) is immutable. The value itself may be mutable, like obj in the following example.

    4. obj.prop = obj.prop + 1;
    8. assert.throws(
    10.   {
    12.     message: 'Assignment to constant variable.',
    14. );

    10.2.2. const and loops

    You can use const with for-of loops, where a fresh binding is created for each iteration:

    1. const arr = ['hello', 'world'];
    3.   console.log(elem);
    5. // Output:
    7. // 'world'

    In plain for loops, you must use let, however:

    2. for (let i=0; i<arr.length; i++) {
    4.   console.log(elem);

    10.3. Deciding between let and const

    I recommend the following rules to decide between let and const:

    • const indicates an immutable binding and that a variable never changes its value. Prefer it.
    • let indicates that the value of a variable changes. Use it only when you can’t use const.

    10.4. The scope of a variable

    The scope of a variable is the region of a program where it can be accessed. Consider the following code.

    1.   const x = 0;
    3.   { // Scope B. Accessible: x, y
    5.     assert.equal(x, 0);
    7.     { // Scope C. Accessible: x, y, z
    9.       assert.equal(x, 0);
    11.       assert.equal(z, 2);
    13.   }
    15. // Outside. Not accessible: x, y, z
    17.   () => console.log(x),
    20.     message: 'x is not defined',
    22. );
    • Scope A is the (direct) scope of x.
    • Scopes B and C are inner scopes of scope A.
    • Scope A is an outer scope of scope B and scope C.
      Each variable is accessible in its direct scope and all scopes nested within that scope.

    The variables declared via const and let are called block-scoped, because their scopes are always the innermost surrounding blocks.

    10.4.1. Shadowing and blocks

    You can’t declare the same variable twice at the same level:

    You can, however, nest a block and use the same variable name x that you used outside the block:

    2. assert.equal(x, 1);
    4.   const x = 2;
    6. }

    Inside the block, the inner x is the only accessible variable with that name. The inner x is said to shadow the outer x. Once you leave the block, you can access the old value again.

    All remaining sections are advanced.

    10.6. Terminology: static vs. dynamic

    These two adjectives describe phenomena in programming languages:

    • Static means that something is related to source code and can be determined without executing code.
    • Dynamic means at runtime.
      Let’s look at examples for these two terms.

    10.6.1. Static phenomenon: scopes of variables

    1. function f() {
    3.   // ···

    x is statically (or lexically) scoped. That is, its scope is fixed and doesn’t change at runtime.

    Variable scopes form a static tree (via static nesting).

    10.6.2. Dynamic phenomenon: function calls

    Function calls are a dynamic phenomenon. Consider the following code:

    2. function h(y) {
    4. }

    Whether or not the function call in line A happens, can only be decided at runtime.

    Function calls form a dynamic tree (via dynamic calls).

    10.7. Temporal dead zone: preventing access to a variable before its declaration

    For JavaScript, TC39 needed to decide what happens if you access a variable in its direct scope, before its declaration:

    1. {
    3.   let x;

    Some possible approaches are:

    • The name is resolved in the scope surrounding the current scope.
    • If you read, you get undefined. You can also already write to the variable. (That’s how var works.)
    • There is an error.
      TC39 chose (3) for const and let, because you likely made a mistake, if you use a variable name that is declared later in the same scope. (2) would not work for const (where each variable should always only have the value that it is initialized with). It was therefore also rejected for let, so that both work similarly and it’s easy to switch between them.

    The time between entering the scope of a variable and executing its declaration is called the temporal dead zone (TDZ) of that variable:

    • During this time, the variable is considered to be uninitialized (as if that were a special value it has).
    • If you access an unitialized variable, you get a ReferenceError.
    • Once you reach a variable declaration, the variable is set to either the value of the initializer (specified via the assignment symbol) or undefined – if there is no initializer.
      The following code illustrates the temporal dead zone:
    1. if (true) { // entering scope of `tmp`, TDZ starts
    3.   assert.throws(() => (tmp = 'abc'), ReferenceError);
    7.   assert.equal(tmp, undefined);

    The next example shows that the temporal dead zone is truly temporal (related to time):

    1. if (true) { // entering scope of `myVar`, TDZ starts
    3.     console.log(myVar); // executed later
    5.   // We are within the TDZ:
    9.   func(); // OK, called outside TDZ

    Even though func() is located before the declaration of myVar and uses that variable, we can call func(). But we have to wait until the temporal dead zone of myVar is over.

    10.8. Hoisting

    Hoisting means that a construct is moved to the beginning of its scope, regardless of where it is located in that scope:

    You can use func() before its declaration, because, internally, it is hoisted. That is, the previous code is actually executed like this:

    1. function func() {
    3. }
    5. assert.equal(func(), 123);

    The temporal dead zone can be viewed as a form of hoisting, because the declaration affects what happens at the beginning of its scope.

    A variable is global if it is declared in the top-level scope. Every nested scope can access such a variable. In JavaScript, there are multiple layers of global scopes (Fig. 5):

    • The outermost global scope is special: its variables can be accessed via the properties of an object, the so-called global object. The global object is referred to by window and self in browsers. Variables in this scope are created via:

      • Properties of the global object
      • var and at the top level of a script. (Scripts are supported by browsers. They are simple pieces of code and precursors to modules. Consult for details.)

    • Nested in that scope is the global scope of scripts. Variables in this scope are created by let, const and class at the top level of a script.

    • Nested in that scope are the scopes of modules. Each module has its own global scope. Variables in that scope are created by declarations at the top level of the module.

    Figure 5: JavaScript has multiple global scopes.

    10.9.1. The global object

    The global object lets you access the outermost global scope via an object. The two are always in sync:

    • If you create a variable in the outermost global scope, the global object gets a new property. If you change such a global variable, the property changes.

    • If you create or delete a property of the global object, the corresponding global variable is created or deleted. If you change a property of the global object, the corresponding global variable changes.
      The global object is available via special variables:

    • window: is the classic way of referring to the global object. But it only works in normal browser code, not in Node.js and not in Web Workers (processes running concurrently to normal browser code; consult the chapter on asynchronous programming for details).

    • self: is available everywhere in browsers, including in Web Workers. But it isn’t supported by Node.js.
    • global: is only available in Node.js.
      Let’s examine how self works:
    2. var myGlobalVariable = 123;
    6. assert.throws(() => console.log(myGlobalVariable), ReferenceError);
    8. // Create a global variable anywhere:
    10.   self.anotherGlobalVariable = 'abc';
    12. assert.equal(anotherGlobalVariable, 'abc');

    10.9.2. Avoid the global object!

    Brendan Eich called the global object one of his biggest regrets about JavaScript. It is best not to put variables into its scope:

    • In general, variables that are global to all scripts on a web page, risk name clashes.
    • Via the global object, you can create and delete global variables anywhere. Doing so makes code unpredictable, because it’s normally not possible to make this kind of change in nested scopes.
      You occasionally see window.globalVariable in tutorials on the web, but the prefix “window.” is not necessary. I prefer to omit it:
    1. window.encodeURIComponent(str); // no

    10.10. Closures

    Before we can explore closures, we need to learn about bound variables and free variables.

    10.10.1. Bound variables vs. free variables

    Per scope, there is a set of variables that are mentioned. Among these variables we distinguish:

    • Bound variables are declared within the scope. They are parameters and local variables.
    • Free variables are declared externally. They are also called non-local variables.
      Consider the following code:
    2.   const y = 123;
    4. }

    In the body of func(), x and y are bound variables. z is a free variable.

    10.10.2. What is a closure?

    What is a closure, then?

    A closure is a function plus a connection to the variables that exist at its “birth place”.

    What is the point of keeping this connection? It provides the values for the free variables of the function. For example:

    1. function funcFactory(value) {
    3.     return value;
    5. }
    7. const func = funcFactory('abc');

    funcFactory returns a closure that is assigned to func. Because func has the connection to the variables at its birth place, it can still access the free variable value when it is called in line A (even though it “escaped” its scope).

    10.10.3. Example: A factory for incrementors

    The following function returns incrementors (a name that I just made up). An incrementor is a function that internally stores a number. When it is called, it updates that number by adding the argument to it and returns the new value.

    2.   return (step) => { // (A)
    4.     return startValue;
    6. }
    8. assert.equal(inc(2), 7);

    We can see that the function created in line A keeps its internal number in the free variable startValue. This time, we don’t just read from the birth scope, we use it to store data that we change and that persists across function calls.

    We can create more storage slots in the birth scope, via local variables:

    10.10.4. Use cases for closures

    What are closures good for?

    • For starters, they are simply an implementation of static scoping. As such, they provide context data for callbacks.

    • They can also be used by functions to store state that persists across function calls. createInc() is an example of that.

    • And they can provide private data for object (produced via literals or classes). The details of how that works are explained in “Exploring ES6”.

    10.11. Summary: ways of declaring variables

    Tbl. 1 lists all ways in which you can declare variables in JavaScript: var, let, const, function, class and .

    10.12. Further reading