Interesting Aspects of JavaScript
Let me start saying that I love discovering new things about JavaScript. Especially because I do not know some of its features. This taught to me to go through a process of learning, and understanding this programming language and part of its core.
A while ago I had a nice and interesting interview. The first question the interviewer asked me, I failed. Fun fact: I answered with full confidence in my own knowledge. I actually had a good understanding but not enough to give a good and right answer. So after this event — This is something I always do when I fail an interview — I grabbed some books, found some articles, checked some docs, and I studied. Having said this, I’d like to share some of the things I found interesting about JavaScript that I didn’t manage well.
The Scope
When you create a function in JavaScript it has some properties, one of those properties is the [[scope]] and it is actually called lexical scope. The scope collects and maintains a searchable list of identifiers (variables) that can be accessed.
The internal [[scope]] properties contains a collection of objects representing the scope in which the function was created. This collections is called the function’s scope chain and it determines the data that the function can access — Nicholas C. Zakas, High Performance JavaScript.
Why is this important to know and understand? Because you can only access a variable from where you have declared it and depending on how nested your scope is, it might affect the performance of your code if you’re trying to reach a variable from an inner function to an outer scope.
Along with this scope, when a function is actually called, it creates an object called execution context, which contains:
- Global object — Reference of the Global Object.
- Special object.
The execute context has its own scope chain for the process of the identifier resolution and the values from the executing context are copied in the order they appear. Two distinct actions are taken for a variable assignment: first, the compiler declares a variable (if not previously declared) in the current Scope, and second, when executing, the engine looks up the variable in Scope and assigns to it, if found — Kyle Simpson, Scope and Closure.
A variable can be used before been declared and hold any other value; this is thanks to something called Hoisting.
Each time a variable is encountering during the function’s execution, the process of identifier resolution takes place to determine where to retrieve or store the data. During this process, the execution context’s scope chain is searched for an identifier with the same name. the search begins at the front of the scope chain, in the execution functions’s activation object. if found the variable with the specified identifier is used; if not, the search continue on to the next object in the scope chain. — Nicholas C. Zakas, High Performance JavaScript.
From the above quote, I think it is best to declare and keep variables within the scope of the function that is going to access these variables. Example, with a stateless React component:
A good rule of thumb is to always store out-scope values in local variables if they are used more than once within a function — Nicholas C. Zakas, High Performance JavaScript.
As an example for that side note, you can do something like this:
Accessing a variable from an outer scope might indeed affect the performance (which is not easily perceived nowadays due to the power of the contemporary computers) and it can lead to some undesirable effects. Scopes are nested inside other scopes. So, if a variable cannot be found in the immediate scope, the engine consults the next outer containing… The same identifier name can be specified at multiple layers of nested scope, which is called “shadowing” ( the inner identifier “shadows” the outer identifier)… — Kyle Simpson, Scope and Closure.
Hoisting
JavaScript is a compiled language. Yes, it is compiled before being interpreted. Part of the compilation phase is to find all the variables and functions and then execute the code. The variables can be assigned values before being declared and this will work. This is because the compiler first took the declared variables and put them into the scope and then the code is executed.
Only the declarations themselves are hoisted, while any assignments or other executable logic are left in place. If hoisting were to re-arrange the executable logic of our code, that could wreak havoc. — Kyle Simpson, Scope and Closure.
The Event Loop
The event loop is a concurrency modal that is in charge of keeping tasks, processing events, and executing the code. How the async/await functions, and multiple calls to an async/away functions work at the “same time” it is part of how the event loop works (Actually the async events are sync events 💥).The event loop is like the heart of JavaScript. Execute chunks of your code in a single thread over time.
With the implementation of async/await there’s a new understanding of how the event loop works with async/await. Reading about this I found a new concept: Microtasks. Microtasks are usually scheduled for things that should happen straight after the currently executing script, such as reacting to a batch of actions, or to make something async without taking the penalty of a whole new task. The microtask queue is processed after callbacks as long as no other JavaScript is mid-execution, and at the end of each task. Any additional microtasks queued during microtasks are added to the end of the queue and also processed. Microtasks include mutation observer callbacks, and as in the above example, promise callbacks — Jake Archibald.
Closure
Closure is a technique that allows you to return another function inside a function. You can “store” and persist the data from the scope of the parent functions and access to it from the inner function. This can be explained in a different way such as a function can access data that is outside of its local scope — Nicholas C. Zakas, High Performance JavaScript.
Something important to recall is when a function is called, the execution context is created, therefore a scope chain is created. When the inner function is called, an activation object is created. This object will contain any variable in the parent scope as the inner function; as both have a reference, the parent function scope cannot be destroyed because the inner function has its reference.
The Comma Operator
Many years ago it was very popular to see, and even nowadays, variables declaration like this:
var a, b, c, d;
The argument for some developers was that this is a shortened way of declaring variables and indeed it is. But in JavaScript the comma has a “behavior.” When you declare variables using the comma operator, you are actually returning the last variable. You can have some code like this:
Unary Operands
The unary operands are basic on each language. In JavaScript you can make cool — weird sometimes — things. Basically the unary operan either is plus or minus, when evaluating, it tries to convert its operant into a number that it isn’t already. You can use it as a shorthand for some built-in methods.
This is just a very small review of some interesting aspects of JavaScript. I really hope you enjoyed it 😃 and thanks for your time reading it.
Thanks to J. Drake, my husband, for helping me review this article. ❤️
Cheers!
