Ins & Outs of JavaScript — Understanding The Core

“JavaScript: It is the language that people use without bothering to learn it first”​ — Douglas Crockford​

​As we enter 2020, JavaScript still remains the language to accomplish web application development and is embarking on new areas. Having said that, a good understanding of the core will only help us foster better decision-making. The best resource for deeper understanding is indeed MDN, but here, I try to brief a few aspects. The aspects that have helped me in the journey of web application developments at the beginning.

Overview

1. Data types and Coercion​
2. Precedence and Associativity​
3. Variable Hoisting​
4. Execution Context, Scope, and Closure​
5. Javascript Runtime and Event Loop

Data Types and Coercion​

Data Types

As you can see from the above depiction, we have the basic data types and data types which are essentially objects. The primitives and non-primitive! A good point to notice is when you check for the type of a function it returns function although it is essentially an object.

A few more interesting aspects here include floating-point arithmetic’s ‘something not right moments’ and object references. A good read on the uncanny behavior of floating-point arithmetic can be found here and no, it’s not entirely just a JavaScript matter.

Coercion

Type coercion is the automatic or implicit conversion of values from one type to another.

Precedence and Associativity​

Operator precedence determines the order in which operations happen and associativity helps tackle the confusion when the same operators are involved, i.e., it says in what order operator functions get called, left-to-right / right-to-left.

console.log(3 + 4 / 2)
- console.log
- 4/2
- 3 + 2

A more detailed explanation and tables can be found here.

Variable Hoisting

Hoisting is essentially JavaScript’s default behavior of moving declarations to the top but if you try to understand the engine you’ll understand, that’s technically not the case.

The above behavior of having value as undefined instead of throwing error, called variable hoisting happens because of the creation and execution phases. In the creation phase, the parser runs through the code and sets up memory for variables and functions. When it reaches the execution phase, it identifies the default value which is undefined — the execution flow thus continues.

Execution Context, Scope, and Closure​

To understand the execution context, start by thinking of loading an empty script file and then working in to have the above content (test, accessMe and, outerFun with innerFun, test and exploiter)

As mentioned earlier, the engine goes through a two-phase process, i.e, the creation phase, and the execution phase. The execution context can be considered as the live execution stack.

The code will start with the creation of the first context, which is, the global one holding, test, accessMe, and outerFun. On reaching the execution phase of outerFun, it’s two-phase process kicks in to have test and innerFun. Since it returns what’s returned by innerFun and it’s executed, it gets popped off the execution stack. Hence, the garbage collection happens and its memory is free to be freed.

The lexical scope here can be easily interpreted based on the hierarchy. Each new execution stack can have access to its parent stack resources.

Now consider another scenario, where, instead of invoking the innerFun from outerFun, its reference is returned.

Here, the innerFun reference is retained, even if it’s popped out of the stack and this is basically what closure is.

Javascript Runtime and Event Loop

v8 is the JavaScript Runtime environment inhibiting chrome, nodejs, and many other modern browsers like Brave (from JS inventor, Brenden Eich). The other popular engine is Mozilla’s Spiermonkey but the workings are more or less the same.

As to the say, JavaScript is single-threaded, yes, the code is executed in a single thread but the JavaScript runtime environment is not single-threaded. The code is executed in one thread with the help of the event loop mechanism. The browsers generally have other pieces such as Web APIs, Callback Queue. An interesting application that demonstrates the working is LOUPE by Philip Robert and can be found here.

Conclusion

I hope this was a quick deep dive into the core that has helped you refresh or maybe even gave you some fresh insights. I would be more than happy to know how it turned out for you, so feel free to drop in your comments.