5/5/2016 Most 

Common Technical Interview Question for FrontEnd Developers

FrontEnd Journal

Most Common Technical

Interview Question for

FrontEnd Developers
16 Jul 2013

on javascript | backbone.js | interview | questions and answers | web developer interview

questions

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 1/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

This picture above is from my notes taken from technical

interviews I've had lately. If you're a frontend developer this post

may be of your interest.

Even senior javascript developers can be trapped by some of the

questions asked by interviewees. So even if you can code

comfortably in your computer with the help of google, there are

some concepts that are always good to have in mind when you're

about to face a technical interview.

The idea here is not to go through the questions and look for the

answer. The idea for this post is learning instead, because doing

that you'll be prepared for any variation of those questions or if

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 2/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

you're not going to face an interview, just to review what would be

your answer and leave a comment.

For every question there'll be a brief explanation and some

examples.

Let's start with the Javascript

questions

1. How can you declare a class in

Javascript?

In javascript there's no classes like in Java, what we actually call a

class is in reality a function simulating a class behaviour. For being

so flexible, there are many ways to create a class in javascript,

below you'll find 3 ways of doing that.

Class using function as a constructor:

function Person(name) {   

    this.name = name; 

} 

// Creating an object 

var person = new Person("Rafael");   

person.name; // "Rafael"   

It's very important to notice that you have to use the keyword 

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 3/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

new  when creating a  new  instance of that class otherwise you will

have logical problems regarding the  this  will reference  window

object.

Class Literal notation:

var person = {   

    name: "", 

    setName: function(name) { 

        this.name = name; 

    } 

} 

person.setName("Rafael");   

person.name; // "Rafael"   

In this example we don't use a function to define our class, we are

creating a singleton object person with one attribute and one

method. You can use that object straightaway, no instantiation in

this case.  

That notation is useful when you don't need to create instances of

that class or you'll use it just once in your application.

Singleton through a function:

var person = new function() {   

    this.setName = function(name) { 

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 4/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

        this.name = name; 

    } 

    this.sayHi = function() { 

        return "Hi, my name is " + this.name; 

    } 

} 

person.setName("Rafael");   

alert(person.sayHi()); // Hi, my name is Rafael   

As you can see in the code snippet above, we have a function like

the first example and besides we also have the  new  keyword before

the function declaration. It means that we are creating one

instance of that class at the same time we are declaring it.

2. How would you organize your

Javascript code?

The following pattern is the one that I personally prefer and is

called 'module pattern', where we separate our javascript into

logical modules, or namespaces. What you'll see below is an

example of how I would separate my user module.

// Declaring my main namespace 

var myapplication = myapplication || {}; 

// Declaring modules usermodule 

myapplication.usermodule = (function() {   

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 5/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

    // createMessage: only accessible inside this module 

    var createMessage = function(message) { 

        return "Hello! " + message; 

    } 

    return { 

        // sayHello is a public method 

        sayHello: function(message) { 

            return createMessage(message); 

        } 

    } 

})(); 

// Declaring another module 

myapplication.adminmodule = (function(){   

    // your code here 

})() 

// This is how we call sayHello 

myapplication.usermodule.sayHello("This is my module");   

Some explanation on the code above

Take a look at the previous code and notice how I create my

module using the notation below. It makes the function to be

executed immediately because of the parenthesis at the end of the

command. The result of the execution will be an object which will

be set to my variable myapplication.usermodule.

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 6/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

... 

myapplication.usermodule = (function() {   

    // code to be executed immediately 

})(); 

So applying this pattern to your code you may have multiple

modules and you have the control over what you want to make

public and what to keep private. Besides your code will be more

organized therefore easy to maintain.

3. Difference between and =.

This is pretty simple but at the same time some people never came

across a triple equals or never wondered what's the difference.  

Double equals  ==  is used to compare the value of two operands:

"2" == 2; // true 

 2  == 2; // true 

Triple equals  ===  is used to compare the value AND type of two

operands:

"2" === 2; // false 

 2  === 2; // true 

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 7/20
4. Difference between null and undefined
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

4. Difference between null and undefined

551
Shares This can be tricky and the best way to keep in your head is to

memorise because if you try to relate javascript null to other

72
languages, it will get more confusing.  

In javascript,  null  is an object with no value and  undefined  is a

50

type.

31

typeof null; // "object"   

typeof undefined; // "undefined"   

var a;   

var b = null;   

a == b; // "true" because their values are the same   

a === b; // "false". they have different types   

5. Have you already used MVC before?

What you like/dislike about it?

As the UI gets more and more complex we need some good ways

to keep it more and more maintainable and reusable, and  Some

MVC frameworks for javascript have been widely adopted lately

and it's a good plus if you have already used before and knows

what's the benefits of them. The most famous MVC frameworks

are backbone.js and angular.js, it's hard to not hear about them.

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 8/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

There are many advantages in using these frameworks, I can point

out some of them:

Organization: Forces your webapp to follow a well structured

pattern;

Maintainable: With organization comes an easy to maintain

code;

UI Binding: Some frameworks allow you to do that. So

everytime your model changes, the view reflects it and vice­

versa;

Decoupled client: MVC frameworks like backbone.js

incentivise you to use REST API's though their urlRoot

attribute in their Models;

Reusable components: Create reusable visual components;

Single­page apps: Build single­page apps with Ajax requests;

Friendly URL's: Native support for client­side url mapping;

6. How can you add a method to a class

already defined?

You can add a new method to a javascript class using prototype:

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 9/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

function Person(name) {   

    this.name = name; 

} 

Person.prototype.walk = function() {   

    console.debug(this.name + " is walking."); 

} 

// Calling the new method 

var person = new Person("Rafael");   

person.walk(); // "Rafael is walking."   

It's worth mentioning that adding methods via prototype is the

most inexpensive way in terms of performance since the method is

tied to the prototype of the class. It means, for every new instance

of class Person, you will have access to the prototype's walk()

method. Now, if you declare walk() method inside the Person class,

you will end up recreating the method for every new instance of

Person.

CSS Questions

1. When would you use CSS float?

Float is used when you want to make an element of your page

(usually an image) be pushed to the right or left and make other

elements wrap around it.

2. When would you use CSS clear?
http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 10/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

When you want an element on the left or right of the floating

element not to wrap around it, you can use clear.

3. Have you used Sass? What's good about

it?

Every web project starts with everything neat, all CSS is organized

in blocks or different CSS files and you know where everything is,

right?  

Right, until your project gets bigger, deadlines get tight, more

developers come on board and someday you notice a strange

behaviour in some elements of the page. When you inspect their

styles you spot lots of css overrides coming from everywhere. This

is the moment you realise how messy CSS can be.

Sass is the modern way of doing CSS and can save many lines of

code in your stylesheets. This is possible because Sass works with

variables, nested syntax and mathematical operations.  

In my opinion one of the nicest features of sass is the possibility to

write a selector just once and put all styles for that inside it. Do

you need a more specific selector under an existing one? Just nest

the specifics into the generic one.

Check out the example below taken from their official website. It's

awesome how it can "neatify" your code.

/* .sass */ 

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 11/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

table.hl   

  margin: 2em 0 

  td.ln 

    text‐align: right 

li   

  font: 

    family: serif 

    weight: bold 

    size: 1.2em 

/* .css */ 

table.hl {   

  margin: 2em 0; 

} 

table.hl td.ln {   

  text‐align: right; 

} 

li {   

  font‐family: serif; 

  font‐weight: bold; 

  font‐size: 1.2em; 

} 

Other questions

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 12/20
1. What can you do to improve page
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

1. What can you do to improve page

performance?

In a nutshell page performance is widely understood as the page

load time from the users' perspective, so below are some steps

that might improve a page's performance.

Use sprite images whenever possible, try to group small

images commonly used in a single file to be requested just

once. See how Google uses sprites in Google Maps to make

one request instead of one for each small image. 

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 13/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

Se

sp

rit

fr

gl

ap

Javascripts should be at the bottom of the page, instead of

in the head as we use to see out there;

Ensure parallel requests of your JS and CSS files. In order to

force the browser to do that, you can optimize the order you

include resources in your page. This item can generate its own

blog post or even a book so I prefer to suggest you a really

good reading about it. Check this out, it's the google's best

practices on page speed load.

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 14/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

Compress images whenever possible, it makes a difference;

Browser Caching is also very import to be set for static

resources like JS and CSS files, images, PDFs and HTML.

Caching is set in the HTTP header by informing browsers the

expiry date or maximum age. Then browsers can load the last

downloaded resource from the cache instead of request it

again.

2. What's the difference between HTML

and XHTML?

XHTML is an HTML that follows the XML rules, which means a

XHTML document must have well­formed markups in order to be

rendered properly in all web browsers. Differently from XHTML,

the HTML document can be rendered in most of the browsers

even with markup errors such as no closing tags or wrong nested

tags.

And how do I create a XHTML document?

XHTML is basically a HTML document with some rules that need

to be applied. Have a look at these examples below and spot the

differences.

<head>   

   <title>This is head</title> 

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 15/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

</head>   

<BODY>   

   This is the body of the document with body tag in capital 

letters 

   Notice that there's no close body tag and no tag as well. 

This HTML document above can be opened with no problems in

Chrome, even containing many markup errors because most

browsers can fix them for you automatically.

<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"   

"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">   

  <head> 

    <title></title> 

  </head> 

  <body> 

  </body> 

</html>   

The code above is a well­formed XHTML document and that's the

minimum you must have in order to render it. Notice the

declaration of the doctype at the top of the document and the

namespace (xmlns) attribute in html open tag. These elements are

mandatory as well as all the tags in lowercase.

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 16/20
3. When would you use GET and POST
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

3. When would you use GET and POST

requests?

There are several technical differences between these two types of

requests, regarding length limitation, security, caching and a few

others. But if someone asks you WHEN would you use it, I'd say

one of the most important points that any front­end developer

should take into account is that we should only use GET for

idempotent requests, it means requests that don't make

significant changes in the backend system or database but if you

do need to make inserts, updates or deletes in a database, trigger

emails or any other major action, POST is recommended.

That's pretty much it that I wanted to share according to my

recent interviews and I believe you'll come across some of these

questions or a variation of them in your next technical interview.

Learn even more with my other posts:

Javascript ES6: Learn important features in a few minutes  

Crud WebService for your json data in Node.JS and RethinkDB  

HTML5 pushState and Single­Page apps

Get access to free Chapters of my eBook The

Basis of Unit Testing

[email protected]   Click to Subscribe!

I'll never share your email address or spam you.

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 17/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

Rafael Oshiro Share this post

 
  
 

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 18/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

6 Comments

FrontEnd Journal ­ Javascript and FrontEnd Development articles  Login


1

  Recommend  4 ⤤ Share Sort by Best

Join the discussion…

Thomas Roberts  •  5 months ago
They might just give you a Front­end coding test. Most companies do that
now, so it might be a good idea to get familiar with this type of screening
process.
1 △   ▽ • Reply • Share › 

black boulez  •  2 years ago
instead of throwing errors you might or might not be able to catch in a async
loop, pass the error to the third argument of your controller function , which
is called next : next(err);
1 △   ▽ • Reply • Share › 

sudeep  •  3 months ago
thanks
△  ▽ • Reply • Share › 

Ionela Raluca  •  7 months ago
thank you
△  ▽ • Reply • Share › 

Patrick Mulder  •  2 years ago
Interesting. Have you looked at the query language too, rQL? I am looking
for examples in JavaScript with RethinkDB, and trying to understand how it
compares to something like mongoose or Foxx in ArangoDB.
△  ▽ • Reply • Share › 

Rafael  Mod   > Patrick Mulder  •  2 years ago

Hey, Patrick. 
Thanks for you comment.

I haven't seen much of reQL and I have no experience with
mongoose. By curiosity I took a look into mongoose docs and it
seems to be very tied up to your models and is schema­based,
http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 19/20
5/5/2016 Most Common Technical Interview Question for FrontEnd Developers

different from rethinkdb. RethinkDB API does not involve validations
and is schema­free.
△  ▽ • Reply • Share › 

ALSO ON FRONTEND JOURNAL ­ JAVASCRIPT AND FRONTEND DEVELOPMENT ARTICLES

Javascript ES6: Learn important Saving your JSON data with
features in a few minutes OpenWS. No server­side
17 comments • 2 years ago knowledge required.
3 comments • a year ago

AvatarAbe Petrillo — Read faster :) AvatarBeto López  — Sounds Great!

How good are your Unit Tests? HTML5 pushState and Single­Page
2 comments • 3 months ago apps

All content copyright FrontEnd Journal © 2016 • All rights reserved.

Proudly published with  Ghost. Using Oshi theme.

http://www.frontendjournal.com/most­common­technical­interview­question­for­frontend­developers/ 20/20