Press "Enter" to skip to content

Must Know Topics For Any Javascript Interview: Part 1

 

must know topics for any javascript interview
must know topics for any javascript interview

In this post, I will dive into the few of the most important topics which any good javascript developer MUST know.

I had been thinking to write on this topic for a long time. It took a little longer just because I was collaborating all my findings from several discussion with javascript interviewers and interviewees.

This is a comprehensive list of core topics in javascript. Breaking them down will result in many subtopics that I will discuss in several blog post soon. If you don’t want to miss my upcoming articles, then subscribe below (At the end of this article).

Disclaimer:

Simply memorizing these topics that I have mentioned and discussed below might land you a decent job. But, a majority of the great companies will never ask you the difference between “==” and “===”.

Instead, they require a good understanding of these topics which will help you a lot in the long run.

Good understanding means the capability to decide the right feature to be used under relevant circumstances. And to ensure avoiding conceptual mistakes that occur due to the lack of knowledge.

Trust me, it happens a lot in the development world.

Take a quick look at the index of topics below and see if you are comfortable in all of the features. You can skip reading if you are.

But if that’s not the case then my suggestion would be, instead of focusing on the prospect of landing a job at the beginning, first learn and apply these features in your day to day work to gain a clear perception. Solve problems linked to these topics.

Once you gain sufficient knowledge, your confidence will speak for yourself.

List of content

7 more topics will be published in my part2 blog post.
Subscribe to my blog, and I will notify you on the upcoming update

Execution context

The execution context is an environment, in which a function executes. Confusing? Don’t worry, consider the below code:

var c= 5;
function random() {
   return 10;
}
function  multiply() {
   return c * random()
}
multiply();

When the javascript engine starts executing the above code, it creates the Call Stack in memory.

Then, one after another, the code blocks are pushed in the stack. These code blocks are the execution contexts.

Now, the question is, how does the engine distinguishes, how many lines of code to be pushed as one block?

It is not actually the lines of code, it is rather the code an execution context contains inside it.

An Execution context can be any of the three types, defined below:

Global Execution Context: This is the default execution context. It contains the global variable declarations and function calls. Global execution contexts are unique and always the starting point of execution.

Function Execution Context: The code, inside a function definition or the function body itself.

Whenever the global or functional context encounters another function, a new execution context is created in call stack.

Eval: The code, inside an eval expression.

execution context

Each execution context has 2 stages. A creation stage and an execution stage.

Creation stage: In creation stage, javascript scans the code and declares all variables and assigns undefined as the value of those variables. Creates the scope chain and set value of this object.

Execution stage: Javascript engine scans the code and assigns value to all variable objects. Along with that it executes the code line by line.

Below is the order of execution context creation in call stack for above code.

Steps discussed below

Step1: The global execution context is pushed in call stack. At first the context receives following things:

i) A variable c.

ii) Function declaration of random.

iii) Function declaration of multiply.

iv) A function call multiply().

At first the variable c will be defined in the creation phase. Then it will be assigned it’s value in execution phase.  During the execution phase the function call multiply() will be encountered in the global context.

And, as I have mentioned above, whenever a context encounters another function call, a new execution context is created in call stack. 

Step2: Hence, A function execution context for the function multiply() is created and the function body is pushed in the call stack.

Step3: A new execution context is created for function random(), which is encountered inside the function multiply().

Step4: Now, the JS engine will execute the function body of random() and it will be cleared from the call stack.

Step5: With the return from random() function, the JS engine will complete the execution phase for multiply() function and clear it’s context.

Step6: At last it will be the global scope which will have the control back and execution phase will be completed.

2. Block scope, function scope & lexical scope

A scope, is the block of code where a variable or function has it’s access or visibility. In javascript, the scope of variable works in a little different way. A variable or function at first looks for any value in the local scope.

var a = 10;

function print() {
a = 15;
console.log(a); //15, local scope gets precedence
}

If a variable don’t have a value in the local scope, the javascript engine moves to it’s parent scope to look for the value of that variable and so on until it reaches to the global scope.

var a = 10;

function print() {
console.log(a); //15, local outer scope gets precedence
}

 

Block scope

Now, what is a block scope? In Javascript, we can separate a block of code using two curly brackets { }.

In general a block doesn’t do much rather than separating the code for a better readability.

But, in ES6, there are 2 keywords, let and const. These are the block scope identifiers.

Using these two keywords, if we declare a variable inside any block, then that block becomes the scope of those variables. See the below example.

var a = 1;
var b = 2;
{
let a = 0;
var b = 10
// write whatever code you want to distinguish from the rest.
console.log(a); //0
}
console.log(a); //1
console.log(b); //10

See, the value of ‘b’ gets overwritten, but the value of ‘a’ doesn’t.

Function scope

A function scope is the function definition or the function body itself, where all declared variables or functions has it’s access within the function body itself.

Outside of the function, those variables don’t exist. Remember that, global variables can always be accessible from any function or block.

var a= 10;
function add() {
var b = 5;
return a + b;
}

console.log(b); //reference error

 

Lexical scope

In javascript, when we write one function within another function body, this is called nesting of functions.

A nested function has access to it’s local scope as well as it’s parent function’s scope. This means, a nested function can access all sibling functions as well as variables declared within it’s parent function.

In this type of scenarios, the parent function’s scope is the lexical scope of the child function.

function add(a, b) {
var c = a + b;

function print() {
console.log(c); // c is accessible in print
}
}

In above example the print function can access the value of variable ‘c’ from the outer function. This is a basic example of lexical scoping. 

3. Closure

Closure and scope are related so closely, that many of us get confused so easily. Let me explain closure with a simple example below.

function person() {
var name = 'John';

function getName() {
console.log(name);
}
return getName; // returns a function
}

var p = person();
p(); // This is calling getName()

Did you notice anything unusual above? Well, look closely, the function person is returning another function getName().

Yeah, but what’s so unusual about that?

When the assignment var p = person(); gets completed, internally p holds a reference to the function getName() and the function person() should be cleared out of the context as the execution is done.

But in next line, when we are calling p(), then, instead of getting an error, we get the output 'John'. Wasn’t that value assigned in the lexical scope of getName()? Which is again in the body of person function();

4. Hoisting

What will be the output of below code?

console.log(f); // ?
addFive();

function addFive() {
f = 3;
console.log(f + 5); //?
}
var f;

Will this code execute? How? We are trying to console log a variable that haven’t even been declared.

Yes, the code will be executed and the output will be 

//undefined
//8

As we know an execution context has 2 phases, hence javascript engine doesn’t start executing code just right away. 

During the lexing phase a line of code var t = 3; is broken into two parts

var t; //Creation phase; t has a value undefined.
t=3; //execution phase; 

Hence, after creation phase our above example internally looks something like this:

var f;

function addFive() {
f = 3;
console.log(f + 5); // 3 + 5 = 8
}

console.log(f); // undefined. Don't have access to function scope
addFive();

Simply, we can see that all function and variable declarations are moved up in the scope chain after creation phase. Hence, they are available to the rest of the code. This concept is called hoisting.

Summary

In part2 I will describe 7 more important topics. Subscribe below to get notification on my upcoming blog post.  Thanks!

69 Shares
Share
Tweet
Pin
Share