Book Image

Learn ECMAScript - Second Edition

By : MEHUL MOHAN, Narayan Prusty
Book Image

Learn ECMAScript - Second Edition

By: MEHUL MOHAN, Narayan Prusty

Overview of this book

Learn ECMAScript explores implementation of the latest ECMAScript features to add to your developer toolbox, helping you to progress to an advanced level. Learn to add 1 to a variable andsafely access shared memory data within multiple threads to avoid race conditions. You’ll start the book by building on your existing knowledge of JavaScript, covering performing arithmetic operations, using arrow functions and dealing with closures. Next, you will grasp the most commonly used ECMAScript skills such as reflection, proxies, and classes. Furthermore, you’ll learn modularizing the JS code base, implementing JS on the web and how the modern HTML5 + JS APIs provide power to developers on the web. Finally, you will learn the deeper parts of the language, which include making JavaScript multithreaded with dedicated and shared web workers, memory management, shared memory, and atomics. It doesn’t end here; this book is 100% compatible with ES.Next. By the end of this book, you'll have fully mastered all the features of ECMAScript!
Table of Contents (18 chapters)
Title Page
PacktPub.com
Contributors
Preface
Index

Hoisting


Hoisting is JavaScript's default behavior: moving declarations to the top. That means the following code will work in JavaScript:

bookName("ES8 Concepts");
function bookName(name) {
   console.log("I'm reading " + name);
}

If you're coming from a C/C++ background, this might seem a little weird at first because those languages do not allow you to call a function before at least declaring its prototype. But JavaScript, behind the scenes, hoists the function, that is, all function declarations are moved to the top of the context. So, essentially, the preceding code is the same as the following:

function bookName(name) {
   console.log("I'm reading " + name);
}

bookName("ES8 Concepts");

Hoisting only moves the declarations to the top, not the initializations. Therefore, although the preceding code works, the following code won't work:

bookName("ES8 Concepts"); // bookName is not a function
var bookName = function(name) {
   console.log("I'm reading " + name);
}

This is because, as we said earlier, only declarations are hoisted. Therefore, what a browser sees is something like this:

var bookName; // hoisted above
bookName("ES8 Concepts"); // bookName is not function 
                          // because bookName is undefined
bookName = function(name) { // initalization is not hoisted
   console.log("I'm reading " + name);
}

Guess the output of the following code:

function foo(a) {
   a();
   function a() {
      console.log("Mehul");
   }
}

foo(); // ??
foo( undefined ); // ??
foo( function(){ console.log("Not Mehul"); } ); // ??

Ready to find out? Your possible answers are:

  • Mehul
    undefined
    Not Mehul
  • Program throws error
  • Mehul
    Mehul
    Mehul

The output will be :

Mehul
Mehul
Mehul

Why? Because this is how your browser see this code (after applying the hoisting thing):

function foo(a) { 
   // the moment below function is declared, 
   //the argument 'a' passed is overwritten.
   function a() {
      console.log("Mehul");
   }
   a();
}

foo();
foo( undefined );
foo( function(){ console.log("Not Mehul"); } );

Once the function is hoisted, it doesn't matter what you pass in that function. It is always overwritten with the function defined inside the foo function.

Therefore, the output is just Mehul written three times.