top

Cracking the Front-End Developer Interview – 1

"In the course of multiple Front-End Developer interviews that I have conducted, I found most of the candidates struggling with some of the most critical questions. 'Cracking the Front-End Developer Interview' is a series of 3 posts covering such make or break questions. Parts 1 and Part 2 will deal with the staple of the web - JavaScript and Part 3 will deal with HTML, CSS and the web in general." Q. What do you know about the types in JavaScript? A. This seemingly straightforward question is the one which no one gets completely right. Begin your answer by saying that JavaScript is a Dynamically Typed Language (the type is inferred from the value at runtime). In ES5 we have the following types - 1. Primitive - Boolean (true/ false), Number (1, 1.4), String ("Hello", 'hello'), Null (null), Undefined (undefined). 2. Non Primitive - Object (new Object()). ES6 introduced a new type – Symbol. The type of a variable can be determined by using the 'typeof(var_name)' function. One thing to note is that typeof(null) returns 'object'. This is a long-standing bug in JS, but one that is likely never going to be fixed. Too much code on the Web relies on the bug and thus fixing it would cause a lot more bugs! Q. What is "use strict";? What are the advantages and disadvantages of using it? A. If you put "use strict"; at the top of your code (or function), then the JS is evaluated in strict mode. Strict mode throws more errors and disables some features in an effort to make your code more robust, readable, and accurate.      Advantages: Strict mode helps out in a couple of ways: It catches some common coding bloopers, throwing exceptions. It prevents or throws errors when relatively “unsafe” actions are taken (such as gaining access to the global object). It disables features that are confusing or poorly thought out. Disadvantages: I had a harder time finding why people do not like strict mode. The best explanation I found was when code mixed strict and “normal” modes. If a developer used a library that was in strict mode, but the developer was used to working in normal mode, they might call some actions on the library that wouldn’t work as expected. Worse, since the developer is in normal mode, they do not have the advantages of extra errors being thrown, so the error might fail silently. Also, as listed above, strict mode stops you from doing certain things. People generally think that you should not use those things in the first place, but some developers do not like the constraint and want to use all the features of the language. Q. What are the different scopes in JavaScript? A. JavaScript programmers are practically ranked by how well they understand the scope. It can at times be quite counter-intuitive. Traditionally, JavaScript really only has two types of scope : 1. Global Scope: Variables are known throughout the application, from the moment they are declared onwards. // global scope var a = 1; function one() {  alert(a); // alerts '1' } 2. Functional Scope: Variables are known within the function they are declared in, from the moment they are declared onwards. // global scope var a = 1; function two(a) {  // functional scope  alert(a); // alerts the given argument, not the global value of '1' } // functional scope again function three() {  var a = 3;  alert(a); // alerts '3' } Modern JavaScript The most recent JavaScript specs now also allow the third scope : 3. Block Scope: Variables are known within the block they are declared in, from the moment they are declared onwards How do I create block scope variables? Traditionally, you create your variables like this : var myVariable = "Some text"; Block scope variables are created like this : let myVariable = "Some text"; So what is the difference between functional scope and block scope? To understand the difference between functional scope and block scope, consider the following code : See the Pen <a data-cke-saved-href='https://codepen.io/shoaibkhan94/pen/EbJYJK/' href='https://codepen.io/shoaibkhan94/pen/EbJYJK/'>Understanding Scopes</a> by shoaib khan (<a data-cke-saved-href='https://codepen.io/shoaibkhan94' href='https://codepen.io/shoaibkhan94'>@shoaibkhan94</a>) on <a data-cke-saved-href='https://codepen.io' href='https://codepen.io'>CodePen</a>. Here, we can see that our variable j is only known in the first for loop, but not before and after. Yet, our variable i is known in the entire function from the moment it is defined onward. Q. What is hoisting? A. A very related question to scoping is hoisting. What do you think will be the output of this code snippet in JS : “use strict”; console.log(a); var a = 1; If you expected it to be an error, you will not be the first one to say so. Instead, this will output “undefined” onto the console. But how is that possible? The reason behind this is that JavaScript moves all declarations to the top. The above code will be read by the JavaScript interpreter as follows : See the Pen <a data-cke-saved-href='https://codepen.io/shoaibkhan94/pen/vWMEEM/' href='https://codepen.io/shoaibkhan94/pen/vWMEEM/'>Hoisting in JS</a> by shoaib khan (<a data-cke-saved-href='https://codepen.io/shoaibkhan94' href='https://codepen.io/shoaibkhan94'>@shoaibkhan94</a>) on <a data-cke-saved-href='https://codepen.io' href='https://codepen.io'>CodePen</a>. Here is good reference to understand Hoisting and Scoping - http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html Q. Explain “this” in JavaScript. A. When a function is created, a keyword called this is created (behind the scenes), which links to the object in which the function operates. The this keyword’s value has nothing to do with the function itself, how the function is called determines this's value Default "this" context // define a function var myFunction = function () {  console.log(this); }; // call it myFunction(); What can we expect the 'this' value to be? By default, this should always be the window Object, which refers to the root—the global scope, except if the script is running in strict mode ("use strict") this will be undefined. Object literals var myObject = {  myMethod: function () {    console.log(this);  } }; What would be the this context here?... this === myObject? this === window? this === anything else? Well, the answer is We do not know. Remember: The this keyword’s value has nothing to do with the function itself, how the function is called determines the 'this' value. Okay, let's change the code a bit... var myMethod = function () {  console.log(this); }; var myObject = {  myMethod: myMethod }; Is it clearer now? Of course, everything depends on how we call the function. 'myObject' in the code is given a property called 'myMethod', which points to the 'myMethod' function. When the 'myMethod' function is called from the global scope, this refers to the window object. When it is called as a method of 'myObject', this refers to 'myObject'. myObject.myMethod() // this === myObject myMethod() // this === window       This is called implicit binding. There is also something called explicit binding using call(), bind() or apply() which is another question. Get ready for the second part of Front-End Developer Interview series which covers some of the most common and critical interview questions for Front-End Developers.
Rated 4.0/5 based on 20 customer reviews
Normal Mode Dark Mode

Cracking the Front-End Developer Interview – 1

Shoaib Khan
Blog
20th Dec, 2017
Cracking the Front-End Developer Interview – 1

"In the course of multiple Front-End Developer interviews that I have conducted, I found most of the candidates struggling with some of the most critical questions. 'Cracking the Front-End Developer Interview' is a series of 3 posts covering such make or break questions. Parts 1 and Part 2 will deal with the staple of the web - JavaScript and Part 3 will deal with HTML, CSS and the web in general."

Q. What do you know about the types in JavaScript?

A. This seemingly straightforward question is the one which no one gets completely right. Begin your answer by saying that JavaScript is a Dynamically Typed Language (the type is inferred from the value at runtime). In ES5 we have the following types -

1. Primitive - Boolean (true/ false), Number (1, 1.4), String ("Hello", 'hello'), Null (null), Undefined (undefined).

2. Non Primitive - Object (new Object()).

ES6 introduced a new type – Symbol.

The type of a variable can be determined by using the 'typeof(var_name)' function. One thing to note is that typeof(null) returns 'object'. This is a long-standing bug in JS, but one that is likely never going to be fixed. Too much code on the Web relies on the bug and thus fixing it would cause a lot more bugs!

Q. What is "use strict";? What are the advantages and disadvantages of using it?

A. If you put "use strict"; at the top of your code (or function), then the JS is evaluated in strict mode. Strict mode throws more errors and disables some features in an effort to make your code more robust, readable, and accurate.     

Advantages:

  • Strict mode helps out in a couple of ways:
  • It catches some common coding bloopers, throwing exceptions.
  • It prevents or throws errors when relatively “unsafe” actions are taken (such as gaining access to the global object).
  • It disables features that are confusing or poorly thought out.

Disadvantages:

I had a harder time finding why people do not like strict mode. The best explanation I found was when code mixed strict and “normal” modes. If a developer used a library that was in strict mode, but the developer was used to working in normal mode, they might call some actions on the library that wouldn’t work as expected. Worse, since the developer is in normal mode, they do not have the advantages of extra errors being thrown, so the error might fail silently.

Also, as listed above, strict mode stops you from doing certain things. People generally think that you should not use those things in the first place, but some developers do not like the constraint and want to use all the features of the language.

Q. What are the different scopes in JavaScript?

A. JavaScript programmers are practically ranked by how well they understand the scope. It can at times be quite counter-intuitive.

Traditionally, JavaScript really only has two types of scope :

1. Global Scope: Variables are known throughout the application, from the moment they are declared onwards.

// global scope
var a = 1;
function one() {
 alert(a); // alerts '1'
}

2. Functional Scope: Variables are known within the function they are declared in, from the moment they are declared onwards.

// global scope
var a = 1;
function two(a) {
 // functional scope
 alert(a); // alerts the given argument, not the global value of '1'
}
// functional scope again
function three() {
 var a = 3;
 alert(a); // alerts '3'
}

Modern JavaScript

The most recent JavaScript specs now also allow the third scope :

3. Block Scope: Variables are known within the block they are declared in, from the moment they are declared onwards

How do I create block scope variables?

Traditionally, you create your variables like this :

var myVariable = "Some text";

Block scope variables are created like this :

let myVariable = "Some text";

So what is the difference between functional scope and block scope?

To understand the difference between functional scope and block scope, consider the following code :

Here, we can see that our variable j is only known in the first for loop, but not before and after. Yet, our variable i is known in the entire function from the moment it is defined onward.

Q. What is hoisting?

A. A very related question to scoping is hoisting. What do you think will be the output of this code snippet in JS :

“use strict”;
console.log(a);
var a = 1;

If you expected it to be an error, you will not be the first one to say so. Instead, this will output “undefined” onto the console. But how is that possible? The reason behind this is that JavaScript moves all declarations to the top. The above code will be read by the JavaScript interpreter as follows :

Here is good reference to understand Hoisting and Scoping - http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

Q. Explain “this” in JavaScript.

A. When a function is created, a keyword called this is created (behind the scenes), which links to the object in which the function operates.

The this keyword’s value has nothing to do with the function itself, how the function is called determines this's value

Default "this" context

// define a function
var myFunction = function () {
 console.log(this);
};
// call it
myFunction();

What can we expect the 'this' value to be? By default, this should always be the window Object, which refers to the root—the global scope, except if the script is running in strict mode ("use strict") this will be undefined.

Object literals

var myObject = {
 myMethod: function () {
   console.log(this);
 }
};

What would be the this context here?...

this === myObject?
this === window?
this === anything else?

Well, the answer is We do not know.

Remember:

The this keyword’s value has nothing to do with the function itself, how the function is called determines the 'this' value.

Okay, let's change the code a bit...

var myMethod = function () {
 console.log(this);
};
var myObject = {
 myMethod: myMethod
};

Is it clearer now?

Of course, everything depends on how we call the function.

'myObject' in the code is given a property called 'myMethod', which points to the 'myMethod' function. When the 'myMethod' function is called from the global scope, this refers to the window object. When it is called as a method of 'myObject', this refers to 'myObject'.

myObject.myMethod() // this === myObject
myMethod() // this === window
 

 

 

This is called implicit binding. There is also something called explicit binding using call(), bind() or apply() which is another question.

Get ready for the second part of Front-End Developer Interview series which covers some of the most common and critical interview questions for Front-End Developers.

Shoaib

Shoaib Khan

Blog Author

Full Stack Developer by Day
JavaScript Ninja by Night.
Github - https://github.com/shoaibkhan94
Website - www.shoaibkhan.in

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount