JavaScript

Slightly more like Ruby

Trey Hunner / @treyhunner

ECMAScript History

Edition Release Date Browser Support a.k.a.
3 Dec. 1999 All ES3
5 Dec. 2009 IE 9, FF 4, Chrome 7 ES5
6 June 2015 Not supported yet ES2015

Use next generation JavaScript, today.

Fat Arrows


people.each do |person|
  puts person.name
end
            


people.forEach(person => {
  console.log(person.name);
});

Fat Arrows


  users.select {|u| u.is_active}.map(&:name).sort
            


  users.filter(u => u.isActive).map(u => u.name).sort();

Template Strings


date = Time.now
puts "The year is #{date.year}"
            

let date = new Date();
console.log(`The year is ${date.getFullYear()}`);

Template Strings


poem = 'Programming is fun
Except for syntax errors
Missing curly brace'
            

let poem = `Programming is fun
Except for syntax errors
Missing curly brace`;

Classes


class Point
  def initialize(x, y)
    @x = x
    @y = y
  end
  def to_s
    "(#{@x}, #{@y})"
  end
end
            


class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return `(${this.x}, ${this.y})`;
  }
}

Subclasses


class ColorPoint < Point
  def initialize(x, y, color)
    super(x, y)
    @color = color
  end
  def to_s
    "#{super()} in #{@color}"
  end
end
            


class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y);
    this.color = color;
  }
  toString() {
    return `${super.toString()} in ${this.color}`;
  }
}

Rest


def say(phrase, *folks)
  folks.each{|folk| puts "#{folk} said \"#{phrase}\""}
end
            


function say(phrase, ...folks) {
  folks.forEach(folk => console.log(`${folk} said "${phrase}"`));
}

Spread


people = ["Bigelow", "Quil", "Trady Blix", "Lara"]
shout("hello world", *people)
            


people = ["Bigelow", "Quil", "Trady Blix", "Lara"];
shout("hello world", ...people);

Combine Arrays


first = [1, 2]
second = [3, 4]
combined = first + second
            

var first = [1, 2];
var second = [3, 4];
var combined = [...first, ...second];

Default Arguments


def greet(name = 'there')
  puts "Hello #{name}!"
end
          


function greet(name='there') {
  console.log(`Hello ${name}!`);
}

Array Destructuring


x, y = [1, 2]
            


[x, y] = [1, 2];

Object Destructuring


emoji = {category: "people", char: "😁", name: "smile"}
character, name = emoji.values_at(:char, :name)
            


let emoji = {category: "people", char: "😁", name: "smile"};
let {name, char: character} = emoji;

Go Forth and Babel

Learn ES2015: https://babeljs.io/docs/learn-es2015/

Try it out: http://babeljs.io/repl

Final

Trey Hunner / @treyhunner

Web consultant available for hire
http://truthful.technology