Functions

function add(x, y) {
  var total = x + y;
  return total;
}

add(5, 10); // 15

// Anonymous function.
var add = function(x, y) {
  var total = x + y;
  return total;
};

add(5, 10); // 15

// Named function.
var add = function add(x, y) {
  var total = x + y;
  return total;
};

add(5, 10); // 15

Arrow functions (ES6)

var add = (x, y) => {
  var total = x + y;
  return total;
};

add(5, 10); // 15

IIFE

// Declared function.
function add(x, y) {
  var total = x + y;
  return total;
}


// Immediately invoked anonymous function.
(function() {
  var five = add(2, 3);
  var ten = add(5, 5);
})();

Immediately Invoked Function Expression

Variable

Scope

Function scope

// global
var a = 1;
var b = 2;


(function() {

  var b = 3; // local, doesn't change global
  
  a += b; // changes global

})();


a; // 4
b; // 2

if (condition) {
  console.log(value); // undefined
  var value = "blue";
}

value; // "blue"

Block scope (ES6)

function getValue(condition) {

  if (condition) {
    const value = "blue";

    return value;
  } else {
    // value doesn't exist here

    return null;
  }

  // value doesn't exist here
}

let, const

if (condition) {
  console.log(value); // ReferenceError
  const value = "blue";
}

Callbacks

Event Handlers

document.querySelector('#foo').addEventListener('click', function(e) {
  console.log('Clicked!');
});

Closures

// global
var a = 1;
var b = 2;


document.querySelector('#foo').addEventListener('click', function(e) {
  a += b; // has access to outer scope

  a; // 3
  b; // 2
});

Classes
Objects
Inheritance

Object

var person = {
  
  name: 'Yeti',
  
  greet: function() {
    return 'Hello ' + this.name;
  }

};


person.greet(); // Hello Yeti

So simple

Object

var Person = function(name) { 
  this.name = name;
};

Person.prototype.greet = function() {
  return 'Hello ' + this.name;
};


var person = new Person('Yeti');

person.greet(); // Hello Yeti

With a constructor

Classes (ES6)

This

...or that?

Event handlers

var obj = {
  val: 5,

  init: function() {
    document.querySelector('#foo').addEventListener('click', function() {
      console.log(this.val); // undefined
    });
  }
};

Context of 'this'

var obj = {
  val: 5,

  superMethod: function () {
    return this.val;
  }
};

console.log(obj.superMethod()); // 5


function logMethod(method) {
  this.val = 10;
  // obj.superMethod() invoked, this points to logMethod object
  console.log(method()); 
}


// obj.superMethod passed
logMethod(obj.superMethod); // 10

Value of 'this' set explicitly

var obj = {
  val: 5,

  superMethod: function () {
    return this.val;
  }
};

var obj2 = {
  val: 15
};

console.log(obj.superMethod()); // 5


function logMethod(method) {
  this.val = 10;
  // obj.superMethod() invoked, this points to obj2 object
  console.log(method.call(obj2)); 
}


// obj.superMethod passed
logMethod(obj.superMethod); // 15

call(), apply()

U can't touch 'this'

Promises

Promises vs callbacks

function isUserTooYoung(id, callback) {
  openDatabase(function(db) {
    getCollection(db, 'users', function(collection) {
      find(collection, {'id': id}, function(result) {
        result.filter(function(user) {
          callback(user.age < cutoffAge)
        })
      })
    })
  });
}

function isUserTooYoung(id) {
  return openDatabase()
    .then(getCollection)
    .then(find.bind(null, {'id': id}))
    .then(function(user) {
      return user.age < cutoffAge;
    });
}

Promise

// Fetch image asynchronously.
// Gives us a promise that the image will be fetched at some point.
var promise = fetchImage('image1.png');


// Image still not fetched at this point, but execution not blocked.

Promise

var promise = fetchImage('image1.png');

promise.then(function(url) {
  console.log(url + ' downloaded!');
});

promise.catch(function(reason) {
  console.log('Failed to download, reason: ' + reason);
});

fetchImage('image1.png')
  .then(function(url) {
    console.log(url + ' downloaded!');
  })
  .catch(function(reason) {
    console.log('Failed to download, reason: ' + reason);
  });

Simply

Promise

function fetchImage(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image();
    img.onload = function(){
      // Call resolve when when successful.
      resolve(url);
    }
    img.onerror = function(){
      // Call resolve when on failure.
      reject(url);
    }
    img.src = url;
  });
}

fetchImage('image1.png')
  .then(function(url) {
    console.log(url + ' downloaded!');
  })
  .catch(function(reason) {
    console.log('Failed to download, reason: ' + reason);
  });

async/await

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Support

caniuse.com

node.green