Essential Front‑End Interview Questions and Hands‑On Coding Challenges

The author, with experience at Twitter and Stripe, explains how to efficiently evaluate front‑end candidates in a short interview by combining GitHub profile review and practical coding questions.

Interviewers avoid whiteboards, letting candidates use their own laptops to run code live.

Object prototype: Define a

spacify

function that inserts spaces between characters of a string.

<code>spacify('hello world') // => 'h e l l o  w o r l d'</code>

A correct solution uses

split

and

join

:

<code>function spacify(str) {
  return str.split('').join(' ');
}</code>

Extending the prototype lets the function be called on a string object:

<code>String.prototype.spacify = function() {
  return this.split('').join(' ');
};
'hello world'.spacify();</code>

Interviewers also discuss function declarations versus expressions.

Arguments

Candidates implement a simple

log

function that outputs a message.

<code>function log(msg) {
  console.log(msg);
}</code>

To handle variable arguments, they use

apply

:

<code>function log() {
  console.log.apply(console, arguments);
}</code>

Adding a prefix like

'(app)'

requires converting

arguments

to an array:

<code>function log() {
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
  console.log.apply(console, args);
}</code>

Context

Understanding

this

and context is tested with the following object:

<code>var User = {
  count: 1,
  getCount: function() { return this.count; }
};
console.log(User.getCount()); // 1
var func = User.getCount;
console.log(func()); // undefined</code>

The fix is to bind the method to its object:

<code>var func = User.getCount.bind(User);
console.log(func()); // 1</code>

A polyfill ensures

bind

works in older browsers:

<code>Function.prototype.bind = Function.prototype.bind || function(context) {
  var self = this;
  return function() {
    return self.apply(context, arguments);
  };
};</code>

Modal Library

Finally, candidates build a simple overlay modal, preferring

position:fixed

over

absolute

so it stays fixed during scrolling.

<code>.overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,.8);
}</code>

Centering the content can be done with absolute positioning inside the overlay:

<code>.overlay article {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px 0 0 -200px;
  width: 400px;
  height: 400px;
}</code>

Closing the overlay on click involves handling event bubbling:

<code>$('.overlay').click(closeOverlay);
$('.overlay').click(function(e) {
  if (e.target == e.currentTarget) closeOverlay();
});</code>

Conclusion

Beyond these topics, interviewers may explore performance, HTML5 APIs, module systems, constructors, data types, and the box model, adapting questions to the candidate's responses. Recommended resources include "Front‑end Developer Interview Questions" and "JavaScript Garden".