44 Front End Developer Interview Questions

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.
The key to solving Fizz buzz is using an if/else statement and the remainder operator (%).

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 start an online marketing agency with a colleague. We were able to sign contracts with several local and national companies to provide SEO and online marketing 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 are some of the advantages of array methods?
They are self contained (you don’t have to set a variable outside the function), they are chainable, they require less code, and they are functional.

What are truthy and falsey values in JavaScript?

How do Promises work?
A promise is like an IOU for some data.

Explain how HTTPS works.

How does the spread operator work in ES6?

What is immutable data?

What’s the difference between const and let?

How do fat arrow functions work?

What are some differences between arrays and objects in JS?

How do you prevent the default behavior of a button element with type=”submit”?

What are the security issues with third party CSS?

How does the fat arrow function affect this?
It ensures this inside the function is bound to the component.

Explain event bubbling.
When you add an event listener to an element it also listens on the parent.

What is the difference between null and undefined?

What is a pure function?
A pure function always returns the same value when the same value is passed into the function. A date function would not be a pure function because the output is constantly changing.

Describe your workflow.

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