JavaScript concepts you might be asked in an interview

We use Javascript frameworks like ReactJs, Angular, you name it, and before any technical interview, we make sure we remember the concepts of the library/framework we are familiar with but we neglect some of the core concepts of JavaScript.

At least that happened to me before, I planned for my interview by reviewing some React interview questions, remembering how to use useEffect correctly “I always forget the clean-ups”, and a quick review useMemo or useRef that sometimes I don’t get my head around them. Until a certain time, I applied for a job 2 years ago and didn’t know the library/framework that I was going to be asked about in the tech interview. The interviewer was looking for a JavaScript engineer that can wrap his/her mind around any of the language’s frameworks. It didn’t go well and it was clear I need to work on understanding the core of JS.

via GIPHY

In this article and the following ones, I'm going to tell you a brief on some core concepts an advanced javascript engineer should be familiar with.

What is JavaScript Engine?

• The engine simply translates the javascript file to the computer, the same as any other language, there are multiple javascript engines but the most famous one is the V8 Engine that Chrome uses, it’s written in C++ and was published in 2008. Another famous engine is the one created by the creator of javascript himself “Brendan Eich” which is called Spider Monkey used by Firefox. It was the first JavaScript engine that enables the browser to understand javascript not only HTML.
• We give the engine a javascript file and it does lexical analysis which breaks the code into tokens to identify their meaning.
• Tokens are formed into AST “Abstract Syntax Tree”
• Then it goes into an Interpreter, Profiler, or Compiler ⇒ get some code of zeros and ones that is understandable by the CPU “machine language”

Interpreter and Compilers

There are two ways to transform code into machine language that is understandable by computers:

• Interpreter ⇒ It reads the lines, line by line
• Compilers ⇒ It takes the whole code, tries to understand what we are trying to do, translates it into another language, and then interprets it line by line to get the same results in the end. This language happens to be in a lower-level language like machine code.

All languages have to be interpreted and compiled because it has to run “interpreted” and also it has to get translated to a lower-level language like machine code.

JIT compiler “Just-In-Time” compiler

Browsers started mixing compilers to make engines faster, it’s having the best of both “Interpreter” and “Compilers”, by this way it improves the speed of executing the javascript code. That’s why JavaScript language is not only an interpretive language, it could be also compiled.

Call stacks & memory heaps

A call stack is a place to run and keep track of what’s happening line by line in our code and run it in order. It stores functions and variables as your code executes, and it runs in a First In Last Out mode, what is good about it is that it tells the engine where it stands in the code file, whatever is on the top of the call stack, that’s what javascript is running or executing.

While memory heaps store and write information, where we can store our variables and data, think of it as a free store javascript engine provides to store any kind of data in an unordered fashion.

And the real challenge, if you don’t understand what is the call stack or the memory heap, you can run into some serious problems that would show poor engineering skills like:

Stack Overflow:

No, not the famous site you visit daily, it’s the big red error that pops in your console, with no clue what did you do wrong in order.

It happens when we keep trying to call functions nested inside of each other over and over again. Something like a recursive function without a success state or a return state.

// By this way, we would keep adding things to the stack more and more.
function inception(){
 inception();
}

Memory leaks:

I’m sure you encountered this error before, maybe after checking whether you’re iterating correctly in your array of data, and it means you ran into an infinite loop.

let arrayOfTrials = [];
while(1) {
 arrayOfTrials.push("hi");
}

Memory leaks don’t only happen on looping inside of an array but also in some unfamiliar cases like:

1. Keep adding variables to the environment as global variables will add more and more pieces of memory.

2. Adding event listeners to one of the elements in your document and never removing them when you don’t need them fills up your memory.

3. Using setInterval() which is a method that continues calling the function until you clear it, and you forget about clearing it by using the clearInterval() method.

via GIPHY

### Garbage collection Javascript is a garbage-collected language, which means when JS allocates memory within a function with objects, objects are stored in the memory heaps. On finishing the function and we don’t need this object anymore, JS automatically cleans it up for us, and only data that are still useful remains. It’s responsible for cleaning up our memory and saving some space to prevent memory leaks. That is not the case for low-level languages like C, where you control garbage collection and you specify what to remove part of the memory. It’s dangerous but that’s why programs in C are very fast and memory efficient.

JavaScript Engine itself is synchronous, one at a time, in order, only one thing can happen at a time. That’s different from JavaScript Runtime.

via GIPHY

In the following up articles, I’m going to talk more about the JavaScript Runtime, the foundation of JavaScript, and much more advanced concepts.

Conclusion

Always return to the origin of the language you use in your framework or library, I know companies are looking for a specific field in frontends like a React Developer or an Angular2+ Engineer, but it’s always better to adjust yourself to a new library or framework, rather than working with a language you don’t understand its core.

Don’t put yourself as a framework engineer, dig deep, know why, and understand the concepts of a certain language, that’s when you can do powerful things!

Never forget, You can always depend on JavaScript.