Without any further, let’s get started!
V8 engine powers by Google Chrome but also NodeJS.
How is the code compiled to machine code?
The computer’s processor only understands 0 and 1. Therefore every single computer program automatically needs to be converted into machine code. And this can happen using compilation or interpretation
- Compilation: entire code is converted into machine code at once and written to a binary file that can be executed by any compute
- Interpretation: interpreter runs through the source code and executes it line by line
The callback queue consists of callback functions that are ready to be executed. The callback queue ensures that callbacks are executed in a First-In-First-Out (FIFO) method, and they are passed into the stack when it’s empty.
Scope & Scope chain
Scoping: how our program’s variables are organized and accessed — “Where do variables live, or where can we access a certain variable and where not.”
Lexical Scoping: Scoping is controlled by the placement of functions and blocks in the code.
Scope: The space or environment in which a certain variable is declared.
Scope of a Variable: The region of our code where a certain variable can be accessed.
Conclusion: Scope is the current context of execution in which values are “visible” or can be referenced. If a variable is not in the current scope, it will not be available for use. Scopes can also be layered in a hierarchy so that child scopes have access to parent scopes, but not vice versa.
Global scope: Outside of any function or block, it can be accessible everywhere.
Function scope: Variables declared inside a function scope are only accessible inside that function. This is also called local scope.
Block scope(ES6): block means everything in curly braces such as the block of an if statement or a for loop. Variables declared inside a block are only accessible inside that block and not outside of it. However, This only applies to let and const variables. If declare variables using var in this block then that var would actually still be accessible outside of the block and would be scoped to the current function or to the global scope. Function are also block scoped (only in strict mode).
Define: Makes some type of variable accessible and usable in a code before they are actually declared. It’s often simplified as ‘variables being lifted to the top of their scope.’
However, behind the scenes, the process is different from this common description. The code is scanned for variable declarations before it is executed, and for each variable, a new property is created in the variable environment object. That’s how hoisting really works.
Now, hoisting does not work the same way for all variable types. Let’s analyze how hoisting works for function declarations, variables defined with var, variables defined with let or const, function expressions, and also arrow functions.
“This” keyword and Call, Bind, Apply method
“this” keyword/variables: a special variable that is created for every execution context (every function). It takes the value of (points to) the ‘owner’ of the function in which the ‘this’ keyword is used.
“this” is not static. It depends on how the function is called, and its value is only assigned when the function is actually called.
“this” does not point to the function itself, and also not the its variable environment
“this” keyword now is VietnamAirline object, but when do like that, we will get error: “Cannot read properties of undefined (reading ‘push’)”
Because now, book is a regular function, and in regular function, “this” keyword point to undefined (in strict mode) or point to window.
Call is a function that helps you change the context of the invoking function. In layperson’s terms, it helps you replace the value of this inside a function with whatever value you want.
Apply: Do the same things with calls, but arguments are an array.
We can also do it with Call method
Bind : bind does not immediately call the function. It helps you create another function that you can execute later.
Primitive type and reference type
Remember the JS engine. The engine has two components: the call stack where functions are executed and a heap where objects are stored in memory. Reference types get stored in the memory heap, while primitive types are stored in the call stack.
Define: Closures gives a function access to all the variables of its parent function, even after that parent function has returned. The function keep a reference to it outer scope, which preservers the scope chain throughout time.
In the above example, the parent function secureBooking has completed its execution and returned. However, the child function, named booker, maintains a persistent reference to the passengerCount variable. Upon each execution off booker, the passengerCount is incremented, even though the parent function has already concluded its execution.
Here’s a slightly more interesting example makeAdder function
In this example, we have defined a function, makeAdder(x), that takes a single argument x and returns a new function. The function it returns takes a single argument y, and returns the sum of x and y.
In essence, makeAdder is a function factory. It creates functions that can add a specific value to their argument. In the above example, the function factory creates two new functions—one that adds five to its argument, and one that adds 10.
add5 and add10 both form closures. They share the same function body definition but store different lexical environments. In add5’s lexical environment, x is 5, while in the lexical environment for add10, x is 10.
Notice: Closure has a higher priority than the global scope. For example, if there is a global variable with the same name as the variable in the function, then the “closure” will use the variable in the function during execution.”
Here is an example
As observed in the above code snippet, the result is 20 (10 * 2 = 20), not 38 (19 * 2 = 38). This outcome is influenced by closures, where the variable ‘a’ within function ‘g’ takes precedence over the ‘a’ in the global scope. Closures exhibit higher priority in accessing variables within their lexical scope compared to variables in the global scope.
Written by Nhat Vo Hoang – Front-End Engineer, FireGroup Technology
Embrace the opportunity to be part of our cutting-edge projects and tech-driven journey, join us now at https://firegroup.io/careers/