Advocacy Marketing platform

Front-end Developer

• I actually AM a JavaScript Developer
• full time ~4 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.

Several basic JS questions that I couldn't simply answer

I'm probably not alone

• I'll answer a few
• succinct explanation
• real world application

Aren't interview questions stupid?

1) Explain event delegation

JS events 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

<form id="form">

  <div class="input-group">
    <label class="control-label" for="Name">Name <i class="icon-asterisk"></i></label>
    <input type="text" id="Name" name="Name" placeholder="John Doe, e.g." required="" pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname">
  </div>

  <div class="input-group">
    <label class="control-label" for="Email">Email Address <i class="icon-asterisk"></i></label>
    <input type="email" id="Email" name="Email" placeholder="example@yourdomain.com" required="">
  </div>

  <div class="input-group">
    <label class="control-label" for="Tel">Phone Number</label>
    <input type="tel" id="Tel" name="Tel" placeholder="(555) 555-5555" pattern="([0-9]{3}) [0-9]{3}-[0-9]{4}">
  </div>

  <div class="input-group">
    <label class="control-label" for="Message">How would you like to get involved?</label>
    <textarea id="Message" name="Message" rows="4"></textarea>
  </div>

  <div class="input-group">
    <label class="checkbox">
      <input name="News" type="checkbox"> Add me to your email newsletter
    </label>
  </div>

  <div class="input-group">
    <button type="submit" name="submit" class="btn">Submit</button>
  </div>

</form>

<script>

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

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

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

  // easier with jQuery, but...
  $('input').change(handleChange);

</script>

Example: live editing a form

<script>

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

  $('#form').change(handleChange);

</script>

Example: binding to dynamic content

Propogation still occurs even though it's added later

<script>

  // I do this all the time!
  $('body').on('click', '#modalExit', function(e) {
	// exit the modal
  });

  // even better
  $('#modal').on('click', '#modalExit', function(e) {
  });

</script>

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

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

Immediately invoked function expression

Functions as expressions vs. definitions

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

(function foo(){ })();

console.log(foo);

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

5) Explain "hoisting".

all variables are declared at the top of any given function scope whether you like it or not

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

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

What do we do with this knowledge?

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

undefined

undefined is not a function. developer jokes you guys!

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

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

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

null

var foo = null;

console.log(foo);
// prints null

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

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

Undeclared finds you. Except if you're writing in the global scope!

// global scope
foo = 5;

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

check for undefined

var 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

var baz = 'undefined';
console.log(baz === undefined); // false. Hooray! maybe?

check for null

var foo = null;

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

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

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

check out this badness

var foo; // undefined
var 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.

8) What is the event loop?

8a) 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);

(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?