Rediscover JavaScript

Brief History

Origin

Created in 1995 by Brendan Eich
for Netscape Navigator 2
in just 10 days

Brief History

Names

Mocha (1995)
LiveScript (1995, early rename)
JavaScript (1995, marketing)
JScript (1996, trademark issues)
ECMAScript (1997, standard)

Today

Versions

JavaScript 1.8.* (ECMAScript 5.1)
JavaScript 2.0 (ES6 Harmony) in development

Everywhere

Every modern browser
Server side (most notably Node.js)
Desktop (GNOME Shell, Windows 8)
Mobile (Phonegap, Firefox OS)

Coding Style Guide

Consistent code, even when written by a team, should look like one person wrote it.

Addy Osmani

Coding Style Guide

Based on idiomatic.js but with less whitespace inside parenthesis.

Always use 2 spaces for indentation (no tabs).
Never leave trailing whitespace.
Leave one blank line at the end of the file.
Keep lines under 80 characters long.
Never mix quotation marks in a project. Prefer single quotes, but be consistent.
Prefer === over == for comparisons (=== does not coerce types).
Don't rely on automatic semicolon insertion. Use semicolons after every simple statement and don't put more than one statement per line.

Coding Style Guide

DON'T:

if(condition) doSomething();
else doSomethingElse();

while(condition) iterating++;

for(var i=0;i<100;i++) someIterativeFn();

DO:

if (condition) {
  doSomething();
} else {
  doSomethingElse();
}

while (condition) {
  iterating++;
}

var i;
for (i = 0; i < 100; i++) {
  someIterativeFn();
}

Coding Style Guide

DON'T:

function foo() {

  // some statements here

  var bar = '';
  var qux;
}

DO use only one var statement at the top of the scope (function):

function foo() {
  var bar = '',
    qux;

  // all statements after the variables declarations.
}

Coding Style Guide

Constructor Functions

DON'T:

function fooBar(options) {
  this.options = options;
}

var fooBarInstance = new fooBar({ a: 'alpha' });

// **Never** call a constructor without the `new` operator
// `baz` will be `undefined` and the global namespace will be polluted
var baz = fooBar({ a: 'alpha' });

DO use UpperCamelCase to name constructor functions:

function FooBar(options) {
  this.options = options;
}

var fooBar = new FooBar({ a: 'alpha' });

Coding Style Guide

Type checking:

// String
typeof variable === 'string'

// Number:
typeof variable === 'number'

// Boolean:
typeof variable === 'boolean'

// Object:
typeof variable === 'object'

// Array:
Array.isArray(arrayLikeObject)

// Node:
elem.nodeType === 1

Coding Style Guide

Type checking:

// null:
variable === null

// null or undefined:
variable == null

// undefined (Global Variables):
typeof variable === 'undefined'

// undefined (Local Variables):
variable === undefined

//Properties:
object.prop === undefined
object.hasOwnProperty( prop )
'prop' in object

Coding Style Guide

Naming

Always use meaningful names. An exception are commonly used names as conventions (i with for loops, e for events in handlers, err for errors in try/catch)

// camelCase for functions, variables and methods
functionNamesLikeThis;
variableNamesLikeThis;
methodNamesLikeThis;

// UpperCamelCase for constructor functions
ConstructorNamesLikeThis;

// SCREAMING_SNAKE_CASE for variables used as constants
SYMBOLIC_CONSTANTS_LIKE_THIS;

Coding Style Guide

Comments

Single line above the code that is subject.
Multiline is good.
End of line comments are prohibited!
JSDoc style is good, but requires a significant time investment.
From Crockford: It is important that comments be kept up-to-date. Erroneous comments can make programs even harder to read and understand.
Make comments meaningful. Focus on what is not immediately visible.

IIFEs

Immediately-invoked function expressions are a common pattern used to control variable scope and avoid polluting the global namespace.

// An IIFE
(function() {
  // ...
}());

// Another IIFE
(function() {
  // ...
})();

// Roughly equivalent to
var myScope = function() {
  // ...
};
myScope();

IIFEs

They are also useful for writing modular code and support importing globals via parameters passed during the invocation.

// Leading semicolon protects from potential issues when concatenating files
;(function(ctx, $, undefined) {
  // Create globals (only if necessary!)
  ctx._myGlobalFlag = true;

  // Alias outside variables (also useful for minification)
  $('body').hide().fadeIn();

  // Compare stuff to undefined (not very common)
  console.log(ctx._somethingUndefined === undefined);
}(window || global, jQuery));

Strict Mode

Strict mode enables a stricter variant of JavaScript that prevents unsafe statements and common mistakes from being made.

Without strict mode:

;(function() {
  var declared;
  declared = 1;
  undeclared = 2;
  console.log(undeclared === window.undeclared);
}());

With strict mode (open your browser's console!):

;(function() {
  'use strict';
  var declared;
  declared = 1;
  undeclared = 2;
  console.log(undeclared === window.undeclared);
}());

Strict Mode

Without strict mode:

;(function() {
  var person = {
    firstName: 'Pedro',
    lastName: 'Picapiedra',
    firstName: 'Pablo'
  };
  console.log(person);
}());

With strict mode (open your browser's console!):

;(function() {
  'use strict';
  var person = {
    firstName: 'Pedro',
    lastName: 'Picapiedra',
    firstName: 'Pablo'
  };
  console.log(person);
}());

Strict Mode

These all throw exceptions on strict mode:

;(function() {
  'use strict';

  // SyntaxError: Variable name may not be eval or arguments in strict mode
  var arguments = ['random', 'stuff'];
  var eval = function() { return 'lol' };

  // SyntaxError: Delete of an unqualified identifier in strict mode
  var count = 10;
  delete count;

  // SyntaxError: Strict mode function may not have duplicate parameter names
  var getFullName = function(firstName, lastName, firstName) {};

  // TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed
  // on strict mode functions or the arguments objects for calls to them
  (function() { arguments.callee() }());

  // SyntaxError: Strict mode code may not include a with statement
  var obj = {a: 'a', b: 'b'};
  with (obj) { console.log(b); }
}());

Prototypal Inheritance

JavaScript is an object-oriented language that uses prototypal inheritance.

From MDN:
"Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain."

var car = {wheels: 4};
console.log(Object.getPrototypeOf(car));
console.log(Object.getPrototypeOf(car) === Object.prototype);
console.log(Object.getPrototypeOf(Object.prototype));

Prototypal Inheritance

The Object.create method can be used to make new objects which prototype is the object passed as the first parameter.

var car = {wheels: 4};
var sedan = Object.create(car);
sedan.color = 'red';
console.log('sedan.color: ' + sedan.color);
console.log('sedan.wheels: ' + sedan.wheels);
console.log('car.color: ' + car.color);
console.log('car.wheels: ' + car.wheels);

Prototypal Inheritance

JavaScript also supports a form of "classical" inheritance through constructor functions.

function Car(wheels, color) {
  this.wheels = wheels;
  this.color = color;
}

Car.prototype.printInfo = function() {
  console.log('wheels: ' + this.wheels + ', color: ' + this.color);
};

var car = new Car(4, 'red');
car.printInfo();
console.log(Object.getPrototypeOf(car) === Car.prototype);
console.log(Object.getPrototypeOf(car).constructor);

The Module Pattern

Modules provide a clean way to separate large applications into smaller pieces that interact between them.
They allow us to encapsulate data and functionalities (like private and public properties and methods in "classical" object-oriented language).
You can read more about it here.

The Module Pattern

Example taken from here:

var testModule = (function () {
  var counter = 0;

  return {
    incrementCounter: function () {
      return counter++;
    },
    resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
    }
  };
})();

testModule.incrementCounter();
testModule.resetCounter();

testModule.incrementCounter();
testModule.incrementCounter();
testModule.resetCounter();

Some Libraries & Tools

DOM + Ajax (jQuery)
Utilities (Lo-Dash)
Module loading (RequireJS)
Minifiers (UglifyJS)
Transpilers (CoffeeScript)
Testing (Mocha + Chai.js)
Linting (JSHint)
Code analysis (plato)
Development workflow (Yeoman + Grunt + Bower)
This presentation was made with Deck.js with the Codemirror plugin for code samples.

Rediscover JavaScript

Brief History

Origin

Brief History

Names

Today

Versions

Everywhere

Coding Style Guide

Coding Style Guide

Coding Style Guide

Coding Style Guide

Coding Style Guide

Constructor Functions

Coding Style Guide

Coding Style Guide

Coding Style Guide

Naming

Coding Style Guide

Comments

IIFEs

IIFEs

Strict Mode

Strict Mode

Strict Mode

Prototypal Inheritance

Prototypal Inheritance

Prototypal Inheritance

The Module Pattern

The Module Pattern

Some Libraries & Tools

Thanks!