Fizz Buzzkill...

Making transactions simple

Front-end Developer

• full time 5 years
• mostly self-taught / colleague-taught
• no computer science background
• mostly working within libraries and frameworks

Front-end Job Interview Questions

https://github.com/h5bp/Front-end-Developer-Interview-Questions#js-questions

Why is it called a Ternary expression, what does the word "Ternary" indicate?

Ternary means it involves three things, and strings 'em all on one line so it's harder to read.

Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5

That sounds hard, and for some strange reason I'm suddenly jonesing for a Dr. Pepper.

Are these questions relevant?

my favorite Fizz Buzz answer is walking out of the interview

— Reid Draper (@reiddraper) November 16, 2016

1) Explain event delegation

JS event listeners fire not only on a single DOM element but on all its descendants

2) Describe event bubbling.

Inverse of this. Also known as propogation, events on an element will "bubble up" and also fire on all parents

Example: live editing a form

  

    Name 
    
  

  

    Email Address 
    
  

  

    Phone Number
    
  

  

    How would you like to get involved?
    
  

  

    
       Add me to your email newsletter
    
  

  

    Submit
  




						

Example: live editing a form

function handleChange(event) {
  // track your change
  console.log(event.currentTarget.value);
}

var formEls = document.getElementsByTagName('input');

for (var i = 0; i < formEls.length ; i++) {
  formEls[i].addEventListener('change', handleChange, false);
}
						

Example: live editing a form

  function handleChange(event) {
    // track your change
    // this time on e.target
    console.log(event.target);
  }

  var el = document.getElementById('form');

  el.addEventListener('change', handleChange);
						

Bonus tidbit

What's the difference between "target" and "currentTarget"?

The latter is the element with the listener attached, the former is the actual element that triggered it

3) Explain why the following doesn't work as an IIFE:

function foo(){
  // i pity this code
}();
						

Immediately invoked function expression

Firefox - SyntaxError: expected expression, got ')'

4) Explain the difference on the usage of

function foo(){
  // i am known as
  // a definition or statement
}

var foo = function() {
  // i am an expression
  // i resolve to a value, even if just "undefined"
};
						

Functions as expressions vs. definitions

// this thing here
function foo(){

}();

// is as if you
function foo(){

}

();
// wrote it on separate lines
						

3a) What needs to be changed to properly make it an IIFE?

( function foo(){ } )();
						

behold the parentheses

Why would I ever use one?

Control variable scope

Josh Mock
http://tech.myemma.com/iifes-javascript-control-variable-scope/

(function foo(){ })();

console.log(foo);
								

Firefox - ReferenceError: foo is not defined

5) Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

You can't predict the future

• Reduce collision
• Maintain independence
• Easier to write your own code

6) Explain "hoisting".

all variables (var) are declared at the top of any given function scope whether you like it or not (includes function declarations)

Example - how I write it

 1  function hoist(track) {
 2    if (track === 'Down With Disease') {
 3      var action = 'dance';
 4    }
 5    else {
 6      var action = 'skip':
 7    }
 8
 9    return action;
10  }
						

line 6 error: 'action' is already defined

Example - what JS does to it

 1  function hoist(track) {
 2    var action;
 3    if (track === 'Down With Disease') {
 4      action = 'dance';
 5    }
 6    else {
 7      var action = 'skip':
 8    }
 9
10    return action;
11  }
						

var declaration "hoisted" to top. Linters don't like this but browsers don't mind.

So, yeah, technically, this works

 1  function hoist(track) {
 2    if (track === 'Down With Disease') {
 3      action = 'dance';
 4    }
 5    else {
 6      action = 'skip':
 7    }
 8
 9    var action;
10
11    return action;
12  }
						

cue collective moan

In walks const and let

• Not hoisted
• Scoped within the block they are in
• Gives you more control

  Dr. Axel Rauschmayer: "Variables and scoping in ECMAScript 6"

What do we do with this knowledge?

var, const, or let?

7) What's the difference between a variable that is: null, undefined or undeclared?

undefined

let foo;
let bar = {};
let baz = ['jonny', 'phil', 'ed'];
const qux = function() {
  // don't return anything
};

console.log(foo, bar.name, baz[4], qux());
// all print undefined

const quux;
// "Missing initializer in const declaration"
						

• variable declared but no defined value (not initialized)
• object/array exists but nothing at that key/index
• function exists but doesn't return anything
• falsy

null

const quux = null;

console.log(quux);
// prints null
						

• null has a value. Its value is null.
• null is a "nothing" value
• not zero, not an empty string/object/array
• falsy

7a) How would you go about checking for any of these states?

Undeclared finds you

// global scope
foo = 5;

console.log(foo);
// prints 5!
// implied global, aka a reason people hate JS
							

check for undefined

let foo;

console.log(typeof foo); // "undefined" as a string
console.log(typeof bar): // undeclared, but also returns "undefined" AARGH

// preferred
console.log(foo === undefined); // true boolean

const baz = 'undefined';
console.log(baz === undefined); // false. Hooray, I guess.
						

check for null

const foo = null;

console.log(typeof foo); // object    let that sink in for a minute

// preferred
console.log(foo === null); // true boolean
						

8) What is the difference between == and === ?

check out this badness

let foo; // undefined
const bar = null; // null

// compare the two
console.log(foo == bar); // true boolean
						

Double equals checks for equality

Triple equals checks for equality and type

Wield accordingly.

9) What is the event loop?

9a) What is the difference between call stack and task queue?

story time

var markup = Handlebars.compile(template)(model);

this.$el.html(markup);

this.$el.foundation('reflow');
						

this would never work

story time

var markup = Handlebars.compile(template)(model);

this.$el.html(markup);

var self = this;

setTimeout(function() {

  self.$el.foundation('reflow');

}, 0);
						

Defers invoking the function until the current call stack has cleared

(whatever that means)

explained

why this works

var markup = Handlebars.compile(template)(model);

this.$el.html(markup);

var self = this;

setTimeout(function() {

  self.$el.foundation('reflow');

}, 0);
						

setTimeout takes function from stack and puts in queue

Philip Roberts: What the heck is the event loop anyway?

You're hired!

Loads more