JavaScript for Pros

Misconceptions

Not Java

Not a toy language

Not web only

Rules of thumb

1. The clause var is not optional. Use it.
2. Sometimes ; can be optional. Use it.
3. Prefer === and !== over == and !=
4. Don't blame the tool.

Object-oriented

// JavaScript
function Dog() {

  this.bark = function() {
    return "WHOOF!"
  };
}

var rex = new Dog();

rex.bark();

Object-oriented

// Java
public class Dog() {

  public String bark() {
    return "WHOOF!"
  };
}

Dog rex = new Dog();

rex.bark();

Prototype-based

Because JavaScript is object-oriented

Not class-oriented

Classical inheritance

function Animal() {
  this.breath() {
    console.log("I'm breathing");
  }
}
function Dog() {
  this.bark() {
    console.log("WHOOOF!");
  }
}
function Fish() {
  this.swim() {
    console.log("GLOOB GLOOB!");
  }
}
Dog.prototype = new Animal();
Fish.prototype = new Animal();

Multiple inheritance

Mixin

function Bubbles() {
  this.bubble() {
    console.log("Making bubbles");
  }
}

Mixin

Object.prototype.includes = function (constructor) {
  var obj = new constructor();
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      this.prototype[prop] = obj[prop];
    }
  }
};

Fish.includes(Bubbles);
var fish = new Fish();

fish.bubble();
            

Functional

High Order Functions

; SCHEME
(define calculate (lambda (op v1 v2) 
                          (op v1 v2)))

(define sum (lambda (a b) (+ a b)))

(define mult (lambda (x y) (* x y)))

(calculate sum 2 3) ; retorna 5

(calculate mult 2 3) ; retorna 6

High Order Functions

// JavaScript
function calculate(op, v1, v2) {
  return op(v1, v2);
}

function sum(a, b){
  return a + b;
}
function mult(x, y){
  return x * y;
}

calculate(sum, 2, 3); // retorna 5

calculate(mult, 2, 3); // retorna 6

jQuery uses all the time

$(function(){
  console.log("DOM loaded")
});

$(".clickable").click(function(){
  console.log(this + " was clicked")
});

Currying

function hey(text, name) {
  console.log(text + ", " + name);
}

hey("Bom dia", "João");

hey("Bom dia", "José");

hey("Bom dia", "Nicolau");

Currying

function hey(text) {
  return function(name) {
    console.log(text + ", " + name);
  }
}

var bomDia = hey("Bom dia");

bomDia("João");

bomDia("José");

bomDia("Nicolau");