FE / JavaScript interview Q’s

I’ve compiled a list of things I’ve interviewed candidates with over the last several years..

JavaScript

• basic
  - what do you like/dislike?
  - what is the difference between JavaScript and jQuery?
  - what are some significant differences between JavaScript and C#?
  - what would you like to see included in the language next?
  - what does event.preventDefault() do? What does it look to accomplish?
• intermediate
  - what does ‘use strict’ do?
  - what is the delete operator?
  - what is the === operator?
  - what does “run to completion” mean in JavaScript?
  - what’s the difference between undefined and null?
  - what is a promise / async programming?
  - what is an alternative to callbacks functions?
  - how can you have private members in JavaScript?
  - what is revealing module pattern?
• advanced
  - how do you handle decimal values in JavaScript?
  - how do timers work? how accurate are they?
  - how is concurrency handled differently between .net/java and javascript
  - do you use any library to help with data structures? (ODM?)
  - context (contrast ‘this’ in Javascript/.NET)
  - what is call, apply and bind?
  - what is a prototype in JavaScript?
  - what is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?
• inheritance & prototype
  - how can you define a class in JavaScript?
  - what is a constructor Function?
  - describe what variable hosting is
  - value / reference types — how do create a value type in JavaScript?

More JavaScript (Answers are how I think about them… ymmv)

What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?
Answer: Common practice with libraries; creates a closure which creates private namespace. Makes easily referenceable item.

What is the significance, and what are the benefits, of including ‘use strict’ at the beginning of a JavaScript source file?
Answer: Voluntary enforce stricter parsing and error handling on JS at runtime. Easier debugging, prevent accidental global, eliminates this coercion, disallows dup property name/value, etc.

What is a “closure” in JavaScript? Provide an example.
Answer: A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain.
The closure has access to variables in three scopes; specifically:
(1) variable in its own scope
(2) variables in the enclosing function’s scope
(3) global variables

What is a potential pitfall with using typeof bar === “object” to determine if bar is an object? How can this pitfall be avoided?
Answer: Although typeof bar === “object” is a reliable way of checking if bar is an object, the surprising gotcha in JavaScript is that null is also considered an object! As long as one is aware of this, the problem can easily be avoided by also checking if bar is null;

Some additional JavaScript topics…

- what does the hasOwnProperty function do and how would you use it
- have them explain their understanding of TDD.
- knowledge of JSON / BE API design.
- how does jsonp work & why use this vs json? XSS
- RESTful experience?
- what are the three operators in JavaScript that are composed of = signs?
- when are tables appropriate vs divs in HTML layouts?
- what is a RESTful service?
- describe the concept of synchronicity. How would you make an asynchronous request to update one widget on a web page?
- what is cross-site scripting?
- what are some general strategies for preventing XSS attacks in front end code?
- webpack, Grunt and Gulp experience? What they do, how they are different.

BONUS — what are some new ES7/2020/2021 features?

SPA (single page application)
- what is spa?
- pros/cons?
- how is session handled?
- how is tracking handled?
- how do you debug?

Rest
- what is rest?
- what are some mechanisms you would use to protect “authorized only” routes?
- compare and contrast rest and soap. when would you use one or the other?
- how do you provide data to the server with get, post, put and delete?
- when would you use post vs put?
- if you put a resource and it does not exist, what should the endpoint return (status codes)?
- examples of what an endpoint would be for. what about some examples that would not be restful?
- what standard mechanism do you use to request various output formats?
- how do you test a REST API?

Cultural / learning
- what do you like?
- what are you good at?
- how do you learn new stuff?
- what’s next on your list of stuff to learn?
- what do you want to learn more about?
- what are your favorite development tools?
- with co-workers, what attributes do you value the most?

Whiteboard questions
- write a simple function (less than 80 characters) that returns a boolean indicating whether or not a string is a palindrome

- write a sum function which will work properly when invoked using either syntax below:
console.log(sum(2,3)); // Outputs 5 
console.log(sum(2)(3)); // Outputs 5

- create a function that, given a DOM Element on the page, will visit the element itself and all of its descendants (not just its immediate children). For each element visited, the function should pass that element to a provided callback function.
The arguments to the function should be:
* a DOM element
* a callback function (that takes a DOM element as its argument)

what is output with the following code? how can you fix it?

* answer *

• Add up the counts of each fruit and write it out to the console.

 const fruitBasket = [‘banana’, ‘cherry’, ‘orange’, ‘apple’, ‘cherry’, ‘orange’, ‘apple’, ‘banana’, ‘cherry’, ‘orange’, ‘fig’ ]

* answer *

from an array of strings, find all matching letters (case — insensitive) within each element and group them.
[ Anagrams — DIFFICULT problem ]
[‘Tokyo’, ‘London’, ‘Rome’, ‘Donlon’, ‘Kyoto’, ‘Paris’]

Expected Output -
Tokyo and Kyoto, London and Donlon have same letters 
[ 
 [ ‘Tokyo’, ‘Kyoto’ ], 
 [ ‘London’, ‘Donlon’ ], 
 [ ‘Rome’ ], [ ‘Paris’ ] 
]

* answer *