JavaScript

Slightly more like Python

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


from functools import reduce
numbers = [1, 2, 3, 4]
reduce(lambda x, y: x * y, numbers)
        

let numbers = [1, 2, 3, 4];
numbers.reduce((x, y) => x * y);

Fat Arrows


sorted(u.name for u in users if u.is_active)
        


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

Template Strings


from datetime import datetime
date = datetime.now()
print("The year is {date.year}".format(date=date))
        

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 __init__(self, x, y):
      self.x = x
      self.y = y
  def __str__(self):
      return "({x}, {y})".format(x=self.x, y=self.y)
        

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

Subclasses


class ColorPoint(Point):
  def __init__(self, x, y, color):
      super().__init__(x, y)
      self.color = color
  def __str__(self):
      return "{super} in color {color}".format(
          super=super().__str__(),
          color=self.color
      )
        

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

Spread Operator


import datetime
date_fields = (2015, 6, 12);
date = datetime.date(*date_fields)
        

let dateFields = [2015, 5, 12];
let date = new Date(...dateFields);

Combine Arrays


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

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

Rest Operator


def most_difference(*numbers):
    return max(numbers) - min(numbers)
        

function mostDifference(...numbers) {
  return Math.max(...numbers) - Math.min(...numbers);
}

Default Arguments


def greet(name="world"):
    return "Hello {name}!".format(name=name)
        

function greet(name='world') {
    return `Hello ${name}!`;
}

Iterable Destructuring


coordinate = (1, 4, 2)
x, y, z = coordinate
        

let coordinate = [1, 4, 2];
let [x, y, z] = coordinate;

Decorators


@memoize
def get_divisors(number):
    return big_computation(number)
      

@memoize
function getDivisors(number) {
    return bigComputation(number);
}

Modules


import urls
from utils import jsonify, memoize
      

import urls from 'urls.js';
import {jsonify, memoize} from 'utils.js';

Go Forth and Babel

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

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

Final

http://treyhunner.com/js-like-python

Trey Hunner / @treyhunner