The Fundamentals Of Javascript 1

Javascript is one of the most popular programming languages today. You may know Javascript through frameworks like jQuery or React. But in this blog, I am writing about the fundamentals that people who built jQuery and React utilized to build such frameworks. It helped me become a better programmer.

Javascript is abstracting us away from how the computer and the browser works. This helped me how the tools are functioning and what’s happening under the hood in Javascript.

Those Javascript fundamentals helped me understand what’s going under the hood with how the code runs from the moment we create a Javascript file.

Syntax Parser: A program that reads your code and determines what it does and if the grammar is valid. Such as — compilers that check if your code matches and converts it to the computer understanding or the programmer who wrote it. Your code is a translation for the code it was built in.

Lexical Environment: where something sits physically in the code you write. Checks where you see things written and how it interacts with other elements in the program.

Execution Context: A wrapper to help manage the code that is running. If you are running lexical environments, each one of them is managed via Execution contexts.

First phase: creation phase.

Second phase: Code Execution phase.

Base Execution Context (Global): Accessible anywhere: it creates a global object & ‘this’ object. Global: “Not inside a function”

Whenever code is run in JS inside of execution context. A wrapper that the javascript engine, parsing, verifying your code in an exception context.

this: window object that is created by the JS engine which is the window you are in.

Hoisting: Most definitions of Hoisting on the internet are wrong, such as “ Hoisting is moving all the code to the top of the js file”.

The truth is before your code gets executed, the JS engine has already set aside a memory space for the variables and functions that you built. However, When it comes to variables, it’s quite different, it puts a placeholder for the variable if it’s not yet assigned.

let myVar,
console.log(myVar)
myVar = 'Hello'

This will print undefined on our console. Which was hoisted because myVar is inside the engine’s memory but not yet assigned.

However, if we don’t declare a variable myVar at all, we will get an error:

console.log(myVar)
Uncaught ReferenceError: myVar is not defined?

Yet Hoisting is amazing when it comes to functions.

a()
function a(){
    console.log('Hello World!')
}
'Hello World!'

When we call the function, the Javascript engine goes through the rest of the lines and memory to get the function.

Undefined: A special value means the variable is in memory but not assigned yet.

Single-Threaded: One command at the time execution.

Synchronous: One command at the time execution in order. Which is JS.

Asynchronous: To understand Asynchronous we have to understand Event Queues and The Execution Stack.

Event Queue The browser Synchronously goes to the event Queue after running all the Execution stacks, such as onClick or HTTP requests.

Function Invocation And The Execution Stack:

- Every time a function is called, an execution context is being called and executed.

- First Global execution then a stack after a stack, then goes back to the previous stack.

- Line by line at a synchronous level.

The Scope Chain: A scope is where a var is available in your code.

OBJECTS is a collection of name-value pairs.

Name-Value Pair: A name that maps to a unique value.

{Address: ‘100 main street’}

I hope this helps for future interviews!