screening.js

// 1: how could you rewrite the following to make it shorter?
if (foo) {
  bar.doSomething(el);
} else {
  bar.doSomethingElse(el);
}


// not sure I would though.. sometimes the above is more readable than the below
(foo) ? bar.doSomething(el) : bar.doSomethingElse(el);


// 2: what is the faulty logic in the following code?
var foo = 'hello';

(function() {
  var foo = foo || 'world';
  console.log(foo);
})();

// redeclaring the variable inside the closure makes it loose its value


// 3: given the following code, how would you override the value of the bar
// property for the variable foo without affecting the value of the bar
// property for the variable bim? how would you affect the value of the bar
// property for both foo and bim? how would you add a method to foo and bim to
// console.log the value of each object's bar property? how would you tell if
// the object's bar property had been overridden for the particular object?
var Thinger = function() {
  return this;
};

Thinger.prototype = {
  bar : 'baz'
};

var foo = new Thinger(),
    bim = new Thinger();

// how would you override the value of the bar
// property for the variable foo without affecting the value of the bar
// property for the variable bim?
foo.bar = 'sum';

// how would you affect the value of the bar
// property for both foo and bim?
Thinger.prototype.bar = 'sum';

// how would you add a method to foo and bim to
// console.log the value of each object's bar property?
Thinger.prototype.getBar = function() { console.log(this.bar); };

// how would you tell if
// the object's bar property had been overridden for the particular object?
foo.hasOwnProperty('bar');



// 4: given the following code, and assuming that each defined object has a
// 'destroy' method, how would you destroy all of the objects contained in the
// myObjects object?
var myObjects = {
  thinger : new myApp.Thinger(),
  gizmo : new myApp.Gizmo(),
  widget : new myApp.Widget()
};

for(index in myObjects) {
    myObjects[index].destroy();
}



// 5: given the following array, create an array that contains the contents of
// each array item repeated three times, with a space between each item. so,
// for example, if an array item is 'foo' then the new array should contain an
// array item 'foo foo foo'. (you can assume the library of your choice is
// available)
var myArray = [ 'foo', 'bar', 'baz' ];

myArray.map(function(item) {
   return item + ' ' + item + ' ' + item;
});

// [item, item, item].join(' ') would be an alternative
// we could also use map instead of forEach if overwriting myArray
// is not an issue 


// 6: how could you improve the following code?
$(document).ready(function() {
  $('.foo #bar').css('color', 'red');
  $('.foo #bar').css('border', '1px solid blue');
  $('.foo #bar').text('new text!');
  $('.foo #bar').click(function() {
    $(this).attr('title', 'new title');
    $(this).width('100px');
  });
  
  $('.foo #bar').click();
});

// i'd prefer css classes over setting properties directly, i guess
$(function() {
  var bar = $('.foo #bar');
  bar.
    css({
      color: 'red',
      border: '1px solid blue'
    }).
    text('new text!').
    click(function() {
      bar.
        attr('title', 'new title').
        width('100px');
    }).
    click();
});




// 7: what issues do you see with the following code? how would you fix it?
(function() {
  var foo;

  dojo.xhrGet({
    url : 'foo.php',
    load : function(resp) {
      foo = resp.foo;
    }
  });

  if (foo) {
    // run this important code
  }
})();

// the loading is asynchronous, whereas the if is evaluated synchronously,
// so foo is set "too late". so either we run the important code within the
// load function by putting it in a function and calling that from within 
// the load function (maybe we need to bind it first), or we use events for this.
(function() {
  var div = $('div');

  dojo.xhrGet({
    url : 'foo.php',
    load : function(resp) {
      div.trigger('fooLoaded', [resp.foo]);
    }
  });

  div.bind('fooLoaded', function(evt, foo) {
    if (foo) {
      // run this important code
    }      
  });
})();




// 8: how could you rewrite the following code to make it shorter?
(function(d, $){
  $('li.foo a').attr('title', 'i am foo');
  $('li.bar a').attr('title', 'i am bar');
  $('li.baz a').attr('title', 'i am baz');
  $('li.bop a').attr('title', 'i am bop');
})(dojo, dojo.query);

(function(d, $){
  ['foo', 'bar', 'baz', 'bop'].forEach(function(item) {
    $('li.' + item + ' a').attr('title', 'i am ' + item);      
  });
})(dojo, dojo.query);




// 9: how would you improve the following code?
for (i = 0; i <= 100; i++) {
  $('#thinger').append('<p><span class="thinger">i am thinger ' + i + '</span></p>');
  $('#gizmo').append('<p><span class="gizmo">i am gizmo ' + i + '</span></p>');
}

$(function() {
  var objects = {
    thinger: $('#thinger'),
    gizmo: $('#gizmo')
  };

  for(var i = 0; i <= 100; i++) {
    for(key in objects) {
        objects[key].append('<p><span class="' + key + '">i am ' + key + ' ' + i + '</span></p>');
    }
  }
});



// 10: a user enters their desired tip into a text box; the baseTotal, tax,
// and fee values are provided by the application. what are some potential
// issues with the following function for calculating the total?
function calculateTotal(baseTotal, tip, tax, fee) {
  return baseTotal + tip + tax + fee;
}

// * the tip needs to be converted to a float with parseFloat,
// * if the tip is negative the amount might decrease




// 11: given the following data structure, write code that returns an array 
// containing the name of each item, followed by a comma-separated list of
// the item's extras, if it has any. e.g. 
//
//    [ "Salad (Chicken, Steak, Shrimp)", ... ]
//
// (you can assume the library of your choice is available)
var menuItems = [
  {
    id : 1,
    name : 'Salad',
    extras : [
      'Chicken', 'Steak', 'Shrimp'
    ]
  },
  
  {
    id : 2,
    name : 'Potato',
    extras : [
      'Bacon', 'Sour Cream', 'Shrimp'
    ]
  },
  
  {
    id : 3,
    name : 'Sandwich',
    extras : [
      'Turkey', 'Bacon'
    ]
  },
  
  {
    id : 4,
    name : 'Bread'
  }
];

menuItems.map(function(item) {
  var _item = item.name;
  if(item.extras) {
    _item += ' (' + item.extras.join(', ') + ')'
  }
  return _item;
});



// BONUS: what is the faulty logic in the following code? how would you fix it?
var date = new Date(),
    day = date.getDate(),
    month = date.getMonth(),
    dates = [];
    
for (var i = 0; i <= 5; i++) {
  dates.push(month + '/' + (day + i));
}

console.log('The next five days are ', dates.join(', '));

// outputs 6 instead of 5 days, fix:
for (var i = 1; i < 6; i++) {