50 Front End Developer Interview Questions

by Charles Sipe on July 30, 2016

Explain how the “this” keyword works in JavaScript.
The “this” keyword in JavaScript is a value in the current context of a function. For example in an on.click function, “this” would represent the element that was clicked on.

Another example would be if you created a function inside an object (known as a method). Within the method you could use “this” to refer to the object.

How do you delete a specific elements from a array?
Using the method splice() can remove an element. It takes two arguments; the first argument is the starting index and the second argument is how many elements to remove.
For example myArray.splice(2, 1); (remove one element at index 2).

How can you change the CSS of an element using JavaScript?
First you can select an element on the page using document.getElementById(“idname”) then change the style property to a new value.

See the Pen Change CSS of Element with JavaScript by Charles Sipe (@charlessipe) on CodePen.

How do you call a JSON file with jQuery?
You can use $.getJSON to call a JSON file.

What is the same origin policy?
The same origin policy prevents resources from loading from another URL.

It does not apply to scripts so you can add JavaScript padding to circumvent the same domain policy.

Crossorigin.me is a free CORS proxy that can circumvent the same origin policy if you append https://crossorigin.me/ to the beginning of your API request. For example: https://crossorigin.me/https://maps.googleapis.com/maps/api/place/details/json

How do you create new elements and add them to the DOM?
This snippet from W3 Schools shows how to create an element in the DOM and append it do the document:

See the Pen Create an Element with JS by Charles Sipe (@charlessipe) on CodePen.

When do you use bracket notation versus dot notation for objects?
Both the bracket notation and dot notation can be used to access the value of a property.
object.property
object[“property”]

According to the Mozilla Developer Network, bracket notation “is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime).”

MDN provides the example of a for in loop to display all the properties of a given object:

function showProps(obj, objName) {
var result = “”;
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
result += objName + “.” + i + ” = ” + obj[i] + “\n”;
}
}
return result;
}

Solve the Fizz buzz problem.

Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.

The key to solving Fizz buzz is using an if/else statement and the remainder operator (%).

See the Pen FizzBuzz by Charles Sipe (@charlessipe) on CodePen.

What are the restrictions for naming variables in JavaScript?
You can not start a variable name with a number. You can not use dashes or periods in the name. You can not use keywords or reserved words (e.g. var).

Tell me about yourself
I am a father, Army veteran, and front-end web developer in Seattle with a passion/obsession with coding. After graduating from the University of Washington I worked as an online marketing consultant for several Northwest companies over a five year span before making a career change to front-end web development. I spent my nights and weekends for a year in a mentorship with a senior front-end developer from Groupon and then enrolled in the Seattle University Web Development Certificate program to deepen my knowledge and improve my skills. I deployed a blog ranking Angular application at RankedBlogs.com and became a contributor to the open source project Operation Code which helps military veterans gain coding skills.

My core attributes are dependability, grit, focus, and curiosity. I am someone who can be depended on to show up prepared day in and day out and trusted to deliver on time. When obstacles or set backs occur I am relentless in pursuing angles to attack the problem to come up with a solution and I don’t give up easily. I believe in the importance of “deep work” which Professor Cal Newport describes as long periods of focused attention on hard problems and constantly work on strengthening my focus muscles and the practice of enduring discomfort. Finally, I love learning and am a voracious reader of audiobooks and consumer of video courses like Lynda.com.

How do you change an element attribute with JavaScript?
You would use the method setAttribute.

It takes two arguments, the name of the attribute as a string (e.g. href, classname) and the new value you want to replace the old value (e.g. “http://www.udacity.com” or “mainPanel”).

document.getElementsByTagName(“H1”)[0].setAttribute(“class”, “democlass”); (example by W3 schools)

How do you avoid a Flash of Unstyled Content?
An FOUC can occur when the file responsible for the styles does not load right away.

One approach could be to hide the content with display none until the page is fully loaded.

It also helps to have your stylesheets linked within the head section and have your script files linked at the bottom of your page.

What are the differences between == and === in JavaScript?
== means pretty much equal and === means strictly equal. == converts the operands to the same type before comparing them while === does not. In other words if the contents of two operands are the same but they have different types (e.g. string and integer) then they are not strictly equal.

Why is it important to generally avoid global variables in your code?
One reason to avoid global variables is to avoid naming conflicts. It is common for multiple people to be working on the same code base. Two people may use the same global variable but assign it different values (e.g. msg = 42 and msg = “Hi”) which can cause bugs in the code.

Tell me about a time where you faced a difficult situation and what steps did you take to overcome it?
Following the 2008 financial crash, I was laid off from my job working in the media department of a financial services firm. I took advantage of the situation to co-found an online marketing agency with a colleague. We were able to sign contracts with several local and national companies to provide online marketing help and we were able to maintain a steady number of clients for about three years.

What do you perceive to be your greatest weaknesses?
I tend to get nervous in public speaking scenarios. I have worked on this skill with a college course on public speaking and guest lecturing at Seattle Central College. I often worry about things that I can not control which is an inefficient use of energy.

When do you need to use JSON parse?

Explain closures in JavaScript.
Normally, a local variable defined inside a function is not accessible after the function has executed. However, with a closure the local variable is still accessible outside of the execution of that function.

A closure is created when an inner function is made accessible from outside of the function that created it. This typically occurs when an outer function returns an inner function.

How do you do a pull request with Github?
A pull request is request for someone to review the code in your git branch. If they approve your changes, they can merge your branch into the master branch of the repo.

How do you update your local version of a Github repo with the latest changes to the remote repo?
fetch upstream
merge upstream master
git push origin master
(git pull combines fetch and merge into one command).

What is an interesting “quirk” about JavaScript?

What techniques or strategies do you use for time management?

What is Typescript?
It is a superset of JavaScript that can be transpiled into regular JavaScript ES5. It adds “optional static typing and class-based object-oriented programming to the language”.

Why do you need to include doctype in your HTML?

Describe how prototype works in JavaScript.

What is the purpose of a JavaScript callback function?
A Javascript callback is like when you call customer service and they they call you back instead of you waiting on hold.

It is a function that is passed as an argument to another function and is executed after its parent function has completed.

What happens when you pass a function too few or too many arguments in JavaScript?
If you pass too many, the extra ones are ignored. If you pass too few, the missing ones are assigned the value undefined.

Why do you want to avoid polluting the global name space?
It is best practice to use local variables when you can because global variables can cause conflicts, especially when multiple people are working on the same code.

Explain how prototypal inheritance works.
Every object has a prototype in JavaScript and prototype can be shared with other objects. When a constructor function creates a new instance of an object, it inherits the prototype from the constructor function.

How would you change the size of the menu bar as the user scrolls down the page?

How would you retrieve a specific value from an array of objects?

What is the difference between JSON and a javascript object?
JSON keys have to be inside double quotes.

Why should you define a function before you call it?

How do you center a div on a page?

Why would you use promises instead of callback functions?

How does the fat arrow function work?
The fat arrow is a shorthand syntax in ES6 that removes the “function” keyword.

Instead of:

var multiply = function(x, y) {
return x*y;
};

You can use:

var multiply = (x, y) => {return x*y};

If there is just one expression brackets are unnecessary.

var multiply = (x, y) => x*y;

Parentheses are optional if there is just one parameter (but required if no parameters are present).

How would you model a chess game in JavaScript?

What does Grunt build do?

Describe your workflow for developing web apps.

Describe how you would use promises in JavaScript.

Why do you want to work here?

What does it mean that JavaScript is event driven?

What are reserved words in JavaScript?
Reserved words are special words in the JavaScript syntax that you should not use as variable names. Some examples include class, while, and image.

What does the map method do in JavaScript?

How do you reverse a string in JavaScript?
There isn’t a method to reverse a string. You can use the split method to create an array of letters, then the reverse method to reverse the order of the array, then the join method.

See the Pen Reverse String JavaScript by Charles Sipe (@charlessipe) on CodePen.

What are the pros and cons with ReactJS?
ReactJS is a front-end library that provides the view in the MVC model. It is known to be very fast because it uses a virtual DOM instead of manipulating the entire DOM each time there is a change. It also provides UI components that can be reused throughout the application. One con is that React doesn’t provide a model or controller, so you would need additional libraries to fulfill these roles in your application.

What is the difference between SQL and no-SQL databases?

What is the difference between function scope and block scope in JS?
Function scope exists within the function while block scope exists within a block like a loop or conditional.

Why would you declare a variable with const?
To assign a variable that will not be changed.

When would you declare a variable with let?
A variable declared with let is only available in the scope where it is set. If you use var, the variable i in a for loop in available outside the loop.

What happens when you don’t pass enough arguments to a function in JS?

When should you use an adjacent sibling selector?

What is object oriented programming?

How do you change the class attribute of an element with JS?

Create a pomodoro clock with HTML, CSS, JavaScript.

When should you set event bubbling to true in your event listener?

What does the map method do in JavaScript?

What is the difference between state and props in ReactJS?

How do you instantiate an object?

What are some advantages of promises over callbacks?

Corrections or improvements to any of these answers are welcome in the comments.

Leave a Comment

Previous post: