• Dan Chamorro

My Weekly Full-Stack Developer Journey — Week 2: JavaScript Part1


This week I decided to build on my JavaScript foundation. Equipped with the tools that I wrote about in last weeks blog, I hit the web in search of gaining a better understanding of the language.


What I settled on was a Udemy course called Advanced Javascript Concepts by Andrei Neagoie. So far this course has taught things about JavaScript that I had no idea about, plus clarified things that I thought I knew already.


Here is what I learned and how I understand it.


JavasScript Engine


A JavaScript engine is a computer program that executes JavaScript (JS) code. The first JS engines were mere interpreters, but all relevant modern engines utilize just-in-time compilation for improved performance. JS engines are developed by web browser vendors, and every major browser has one. — Wikipedia

The above definition explains it perfectly. Just kidding. Before I learned about it this week, that definition was gibberish to me. The only thing I knew about an engine is that it is inside of vehicles and has a lot of moving parts. Obviously, the JavaScript engine isn't inside of vehicles but it does have a lot of moving parts, so Engine is defiantly an appropriate name. I'll get into the moving parts I've learned so far later.


For the rest of us here is how I understand it. Think of the engine like a translator. If you went to another country and didn't speak their language, you would use a translator. Someone who can understand what you're saying and convey that message to the other person. The JavaScript Engine is the translator. Our computers don’t understand JavaScript instead they understand Machine Code, which is a series of ones and zeros. So when we write JavaScript the Engine translates our code to something that a computer can read. Yaaaaay, that's the JavaScript Engine. But what about those moving parts?


Moving Parts


Interpreter

In computer science, an interpreter is a computer program that directly executes, i.e. performs instructions written in a programming or scripting language, without requiring them previously to have been compiled into a machine language program — Wikipedia

How I understand it. The interpreter reads your code line by line and returns an answer on the fly or you can look at like it takes a set of instructions and returns an answer on the fly. So when you do console.log(1 + 1); the interpreter give you back 2.


Compiler


A compiler is a computer program that transforms computer code written in one programming language (the source language) into another programming language (the target language). — Wikipedia

How I understand it. The compiler takes our Javascript and tries to understand it, so it can translate it into another language that the computer can understand. Usually, it will translate it to machine code, but compilers can also translate to any language. There are other compilers such as Babel and TypeScript. Babel is a Javascript compiler that takes your modern JavaScript code and returns browser compatible JavaScript (older JavaScript code). Typescript is a superset of JavaScript that compiles down to JavaScript. They both take one language and compile it down to another.


Jit Compiler

In computing, just-in-time (JIT) compilation (also dynamic translation or run-time compilations)[1] is a way of executing computer code that involves compilation during execution of a program — at run time — rather than prior to execution. — Wikipedia

How I understand it. The Jit Compiler is the browser companies way of combining the best of both worlds from the Interpreter and Compiler and making them one.


Call Stack


A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc. — MDN

How I understand it. The call stack is like a to-do list in JavaScript. Let's say your to-do list has a list of task. You must finish your todo-list in order one at a time starting from the last task in your list and you cant move on to the next one until the current task is done. Some of those tasks might also have sub-task. That's how JavaScript call stack is. You may have multiple functions waiting to return something. The call stack is checking which functions have started but are not done yet. It waits until one is done before it moves on to the next one. It follows the last in the first out rule.


Memory Heap


Low-level languages like C, have manual memory management primitives such as malloc()and free(). In contrast, JavaScript automatically allocates memory when objects are created and frees it when they are not used anymore (garbage collection). This automaticity is a potential source of confusion: it can give developers the false impression that they don’t need to worry about memory management. — MDN

How I understand it. Whenever we write a variable or object etc, we are asking the memory heap to store/allocate space in memory for our variable and its value. It's just a place to store our information. Also when our objects or variables are not being used, the memory heap will free up space. This is called garbage collection. BUT, garbage collection is not perfect. You can easily create what is called a memory leak. This is when you have used up all of your memory.


Single Threaded

Single threading. In computer programming, single-threading is the processing of one command at a time. The opposite of single-threading is multithreading. — Wikipedia

How I understand it. Being single threaded means that only one set of instructions are being executed at a time. The best way to determine if a language is single threaded is, it has only one call stack.


JavaScript Runtime


How I understand it. The JavaScript Runtime is the environment that houses the WebAPI, Callback Queue, Event Loop, and Engine


Web API


How I understand it. The web API comes with all browsers. All of them have their JavaScript engine implementation and all of them have a JavaScript runtime that provides a web API. These web APIs are applications which can do a variety of things like send HTTP request and listen to DOM events.


Callback Queue and Event Loop


How I understand it. When you write something in JavaScript that involves the web API, like manipulating the DOM or doing something likesetTimeout(). When the web API is finished with the task it will send it to the callback queue. The callback queue is like a waiting area that is waiting for the event loop to send the information to the call stack when the call stack is empty. Basically one big cycle.


Conclusion


This week was another awesome week of learning. This blog was no way intended to be an expert point of view. It's just how I understood these concepts. I welcome all readers to leave any comments that you might think will better help me understand these concepts, or if there are any concepts that you think I'm not really understanding. Thanks for reading see you next week.

 
  • Facebook
  • Twitter
  • LinkedIn

©2019 by Dan Chamorro.