python3.7-es6-comparison.rst

Python3.7 VS ES6 syntax comparison (For React)

References: * A different version https://gist.github.com/revolunet/537a3448cff850231a74 * Javascript: https://developer.mozilla.org/en-US/docs/Web/JavaScript * Python: https://docs.python.org/3/index.html

Bulit-in Types

123

length (JS) len(PY)

len([0, 1, 2])  # 3

[0, 1, 2].length  // 3

Array (JS) List (PY)

Add an item

# two ways
In [60]: n = [1, 2, 3, 4]

In [61]: n.append(5)

In [62]: n
Out[62]: [1, 2, 3, 4, 5]

In [63]: n + [6]
Out[63]: [1, 2, 3, 4, 5, 6]

> n = [1, 2, 3, 4]
[ 1, 2, 3, 4 ]
> n.push(5)
5
> n
[ 1, 2, 3, 4, 5 ]

Dictionary

In Javascript, you don't need to put quotation marks around keys.

In[56]: n = { 'color': 'red'};

In [57]: n
Out[57]: {'color': 'red'}

# Or you can do it this way

In [58]: m = dict(color='red')

In [59]: m
Out[59]: {'color': 'red'}

n = { 'color': 'red'};  // same as: n = { color: 'red'};
Object { color: "red" }

Generators

def foo():
    return iter(range(1, 4))

foo_gen = foo()
print(next(foo_gen))
print(next(foo_gen))
print(next(foo_gen))
print(next(foo_gen))
# 1
# 2
# 3
# StopIteration

def foo():
    return iter(range(1, 4))

foo_gen = foo()
print(next(foo_gen))
print(next(foo_gen))
print(next(foo_gen))
# print(next(foo_gen))

for num in foo():
    print(num)
# 1
# 2
# 3
# If we continue to use foo_gen, we will get no output.

function* foo() {
    yield 1;
    yield 2;
    yield 3;
}

let foo_gen = foo();
console.log(oo_gen.next());
console.log(oo_gen.next());
console.log(oo_gen.next());
console.log(oo_gen.next());
// { value: 1, done: false }
// { value: 2, done: false }
// { value: 3, done: false }
// { value: undefined, done: true }

for (let num of foo()) {
    console.log(num);
}
// 1
// 2
// 3
// If we continue to use foo_gen, we will get no output.

next()

In Javascript, next() can do two-way communication. No such magic in Python.

Iterators

def fibonacci():
    pre, cur = 0, 1
    while True:
        pre, cur = cur, pre + cur
        yield cur

for x in fibonacci():
    if (x > 1000):
        break
    print x,

var fibonacci = {
    [Symbol.iterator]: function*() {
        var pre = 0, cur = 1;
        for (;;) {
            var temp = pre;
            pre = cur;
            cur += temp;
            yield cur;
        }
    }
}

for (var n of fibonacci) {
    if (n > 1000)
        break;
    console.log(n);
}

JSON

Python has built-in JSON support :

import json json.loads(data) # import from JSON json.dumps(data) # export to JSON

Expressions & operators

Destructuring(JS) Unpacking(PY)

Flat

>>> a, *b, c = [0, 1, 2, 3, 4]
>>> a
0
>>> c
4
>>> b
[1, 2, 3]


>>> [*[1, 2], *[3, 4]]
[1, 2, 3, 4]

>>> {**{'a': 1}, **{'b': 2}}
{'a': 1, 'b': 2}

const arr = [2, 3, 4, 5];
let [a, b, c, d] = arr;
console.log(a, b, c, d);
// 2 3 4 5

let [a,,,, c] = [0, 1, 2, 3, 4]
console.log(a, c)
// 0 4
// How to get in-between values like in Python??

Nested

a, b, [c1, c2] = [1, 2, [3, 4]]
print(a, b, c1+c2)
# 1 2 7

[a, b, [c1, c2]] = [1, 2, [3, 4]];
console.log(a, b, c1+c2);
// 1 2 7

Quick Value Swap

a = 1
b = 2
c = 3
d = 4
a, b, c, d = d, c, b, a
print(a, b, c, d)
# 4 3 2 1

dog = {name:'lucky', age: 5, toys: ['bone', 'ball']}
# no javascript style unpack, use to get or [] to access items
dog.get('name')
dog['name']

a = 1;
b = 2;
c = 3;
d = 4;
[a, b, c, d] = [d, c, b, a];
console.log(a, b, c, d);
// 4 3 2 1

let dog = {name:'lucky', age: 5, toys: ['bone', 'ball']};
let {name:dog_name, age: dog_age, toys: dog_toys} = dog;
console.log(dog_name, dog_age, dog_toys);
// lucky 5 [ 'bone', 'ball' ]
let {name, age, toys} = dog
console.log(dog_name, dog_age, dog_toys);
// lucky 5 [ 'bone', 'ball' ]

dog.name;  // lucky

Comprehensions

names = [c.name for c in customers if c.admin]  # List

names = {c.id: c.name for c in customers}  # Dictionary

names = {c.name for c in customers}  # Set

(Experimental in Babel)

var names = [for (c of customers) if (c.admin) c.name];

async and await

import asyncio, json, aiohttp

async def fetch(session, url):
    async with session.get(url) as response:
        return await response.text()

async def main(user, index):
    async with aiohttp.ClientSession() as session:
        response = await fetch(session, f"https://api.github.com/users/{user}")
        data = json.loads(response)
        repo_response = await fetch(session, data["repos_url"])
        repo_data = json.loads(repo_response)
        print(repo_data[25]["name"])

if __name__ == "__main__":
    loop = asyncio.get_event_loop()
    loop.run_until_complete(main("jeremy886", 25))

require('isomorphic-fetch');
async function get_repo(user, index) {
    let response = await fetch(`https://api.github.com/users/${user}`);
    let data = await response.json();
    let repo_response = await fetch(data.repos_url);
    let repo_data = await repo_response.json();
    console.log(repo_data[index].name);
}

get_repo('jeremy886', 25);
// django-rest-framework

Statements and Declarations

Imports / Modules

import math
print math.log(42)

from math import log
print log(42)

# not a good practice (pollutes local scope) :
from math import *
print log(42)

Curly braces are used if you would like to import a non-default export.

import math from 'math';
console.log(math.log(42));

import { log } from 'math';
console.log(log(42));

import * from 'math';
console.log(log(42));

Flow Control

for (each) loop

In [7]: names = ['John', 'Jame', 'Jim', 'Josh']

In [8]: for name in names:
   ...:     print(name)
   ...:
John
Jame
Jim
Josh

> names = ['John', 'Jame', 'Jim', 'Josh']
[ 'John', 'Jame', 'Jim', 'Josh' ]
> for (let i=0; i<4; i++) { console.log(names[i]); }
John
Jame
Jim
Josh

index (JS) v enumerate (PY)

In [10]: for i, number in enumerate([1, 2, 3]):
    ...:     print(number*i)
    ...:
0
2
6

> [1, 2, 3].forEach(function(number, i) {
... console.log(number * i);
... })
0
2
6
undefined

OOP

Classes (syntax sugar for prototype in JS)

class Person:
    def __init__(self, name):
        self.name = name

    def say_name(self):
        print(f'My name is {self.name}.')

p1 = Person('Jennifer')
p1.say_name()
# My name is Jennifer.

class Person {
    constructor(name) {
        this.name = name;
    }
    say_name() {  // no need to use "function" key word
        console.log(`My name is ${this.name}.`);
    }
}
let p1 = new Person('Jennifer');
p1.say_name();
// My name is Jennifer.
console.log(p1.__proto__ === Person.prototype)
// true
console.log(p1.say_name === Person.prototype.say_name)
// true

Inheritance

(Python has builtin support for multiple inheritance)

class Human:
    def __init__(self, age):
        self.age = age

class Spider:
    pass

class SpiderMan(Human, Spider):
    def __init__(self, age, powers):
        super().__init__(age)
        self.powers = powers
    def attack(self):
        print('launch web')

p1 = SpiderMan(15, ['crawl', 'swing'])
print(p1)
# <__main__.SpiderMan object at 0x000001E78BA6D470>

class SuperHero {
    constructo(age) {
        this.age = age;
    }
}
class SpiderMan extends SuperHero {
    constructor(age, powers) {
        super(age);
        this.powers = powers;
    }
    attack() {
        console.log('launch web');
    }
}
p1 = new SpiderMan(15, ['crawl', 'swing']);
console.log(p1);
// SpiderMan { powers: [ 'crawl', 'swing' ] }

this (JS) self(PY)

Hard to compare

Functions

Range

print(range(5))
# 0, 1, 2, 3, 4

console.log(Array.from(new Array(5), (x,i) => i));
// 0, 1, 2, 3, 4

Lambdas

lambda a: a * 2

a => a * 2;  // for one expression function, omit () { return ... }
const persons = (props) => {
    if (props.lenght >= 1) do_something();
};
// () is optional for single paramter.

In Javascript => also allows a function to use a lexical scope.

Overloading

Both don't have function overloading. Python has "singledispatch" to support it indirectly.

from functools import singledispatch
@singledispatch
def div(a, b=1):
    print(a, b)

@div.register(int)
def _(a: int, b=1):
    print(a/b)

@div.register(str)
def _(a: str, b=1):
    print(a[:len(a)//b])

div(25 , 2)
div('single dispatch practice', 2)

Default parameters (same)

def add(a, b=5):
    return a + b

function add(a, b=5) {
    return a+b;
}

recursive

Functional Trio: Map, Filter, Reduce

Filter

numbers = [3, 4, 6, 8, 7];
evens = filter(lambda x: x%2 == 0, numbers)
print(list(evens))
# [4, 6, 8]

let numbers = [3, 4, 6, 8, 7];
let evens = numbers.filter(
    function(number) {return number % 2 === 0;})
console.log(evens)
// [4, 6, 8]

Map (Continued from Filter)

doubled = map(lambda x: x*2, evens)
print(list(doubled))
# [8, 12, 16]
# OR use list comprehension

let doubled = evens.map(function(number){ return number * 2;})
console.log(doubled)
// [8, 12, 16]

Reduce (Continued from Map)

from functools import reduce
reduced = reduce(lambda x, y: x+y, doubled)
print(reduced)
# 36

let reduced = doubled.reduce(function(num1, num2){return num1+num2;});
console.log(reduced)
// 36

Chaining

# needs external library

let result = [3, 4, 6, 8, 7]
    .filter(function(number) {return number % 2 === 0;})
    .map(function(number){ return number * 2;})
    .reduce(function(num1, num2){return num1+num2;});
console.log(result);
// 36

Spread(JS) Unpacking(PY)

def add(*args):
    print(sum(args))

nums = [1, 2, 3]
add(*nums, 4)
# 10

function arg_info(...values) {
    console.log(values.reduce((a, b)=> a+b, 0));
}
nums = [1, 2, 3];
arg_info(...nums, 4)
// 10

function arg_info() {
    console.log(arguments)
}
arg_info(1, 2, 3, 4)
// { '0': 1, '1': 2, '2': 3, '3': 4 }

String Manipulation

Template String (JS) v F-string (PY)

name = 'James'
print(f'My name is {name}.')  # use normal quotation marks

const name = 'James';
console.log(`My name is ${name}.`);  // use back tick

Errors (JS) Exceptions (PY)

evoke

raise Exception("error occurs")

throw new Error('Error occurs');

HTML

Type-Hinting