Let's talk about JavaScript

(function(){
  'use strict';
  var undefined = 42;
  console.log(undefined);
})();

(function(globalWindow, undefined){
  'use strict';
  var undefined = 42;
  console.log(undefined);
})(window);

Function.prototype.call=
(function(o){return function(){var r=o.apply(this,arguments);
if(typeof r=='number')return r+1;return r;}})
(Function.prototype.call);

It's not all that bad.

Fun

Konami Code

1995

10 days, LiveScript

1996

1997

ECMA-262

Features?

• Dynamic

• Object-based 

• Runtime eval

There's more

• First class functions

• Prototype-based

• Regular expression

+

Complexity

• CSS

• JavaScript

DO YOU EVEN

BRO

UI thread

CSS is processed separately from the main thread

• Recalculate styles

• Layout elements

• Return the value

scrollTop();

Get the current vertical position of the scroll bar

JavaScript

Browsers do crazy things to optimize your code.

The code that you write is not the code that gets executed.

var a = “12342234”, b, start = Date.now();

for (var i = 0; i < 1000; i++) {
  b = ~~a;
}

console.log(Date.now() - start);

Convert to Number

var a, b, start = Date.now();

for (var i = 0; i < 1000; i++) {
  b = ~~“12342234”;
}

console.log(Date.now() - start);

Inlines the string

var a, b, start = Date.now();

for (var i = 0; i < 1000; i++) {
  b = 12342234;
}

console.log(Date.now() - start);

Does conversion once

var start = Date.now();

for (var i = 0; i < 1000; i++) {
  // sound of silence
}

console.log(Date.now() - start);

Kills unused variables

Fast Elements

// use literal
var arr = [];
// instead of
var arr = new Array(16);

Dictionary Mode

// use literal
var arr = [];
// instead of
var arr = new Array(16);

// put the array into dictionary mode
delete arr[15];
array['amazing'] = 'stuff';

for loop vs. for-in

function forInFunc() {
  var dictionary = {'+': 5};
  for (var key in dictionary);
}

for loop vs. forEach

function forEachFunc() {
  var arrayOfObjects = [{}, {}, {}, {}, {}, {}];
  arrayOfThings.forEach(function(obj) {
    // code
  }, this);
}

Thanks!