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.

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

A correct solution uses split and join:

function spacify(str) {
  return str.split('').join(' ');
}

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

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

Interviewers also discuss function declarations versus expressions.

Arguments

Candidates implement a simple log function that outputs a message.

function log(msg) {
  console.log(msg);
}

To handle variable arguments, they use apply:

function log() {
  console.log.apply(console, arguments);
}

Adding a prefix like '(app)' requires converting arguments to an array:

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

Context

Understanding this and context is tested with the following object:

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

The fix is to bind the method to its object:

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

A polyfill ensures bind works in older browsers:

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

Modal Library

Finally, candidates build a simple overlay modal, preferring position:fixed over absolute so it stays fixed during scrolling.

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

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

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

Closing the overlay on click involves handling event bubbling:

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

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".