ES6 for Pythonistas Lessons 2.1 - 2.

3 Reference Cheatsheet

Python JavaScript Variable Declaration

# Variables // Variables let Declare a variable (block)

full_name = "Jane Hacker" let fullName = "Jane Hacker"; const Like let, cannot be reassigned.
pi = 3.14 const pi = 3.14; var Legacy — similar to let, unscoped.

# lists ("Arrays" in JS) // Arrays ("lists" in Py)

names = ["John", "Paul", "G"] let names = ["John", "Paul", "G"]; DOM Manipulation
# dicts (similar to "Objects") // Objects (similar to "dicts")
let translation = { // Creating elements
translation = { let p = document
"ola": "Hello", ola: "Hello",
oi: "Hi", .createElement("p");
"oi": "hi", p.textContent = "New Paragraph";
} };
// For loop // Inserting elements into page
# For loops let d = document
for name in names: for (let name of names) {
console.log("name:", name); .querySelector("#some_id");
print("name:", name) d.appendChild(p);
}
# While loops // While loops
let x = 0; // Fetching many elements
x = 0 let allImages = document
while x < 3: while (x < 3) {
console.log("X:", x); .querySelectorAll("img");
print("X:", x)
x = x + 1 x++;
} // Add a class to all images
// If-statements for (let img of allImages) {
# If-statements if (fullName === "Jane") { img.classList.add("Thumb");
if full_name == "Jane": console.log("Hi, Jane!"); }
print("Hi, Jane!") } else if (fullName === "Alice") {
elif full_name == "Alice": console.log("Hey Alice");
print("Hey Alice") } else { Alternate function syntax
else: console.log("Don’t know you");
print("Don’t know you") } let greeter = (name) => {
console.log("Hi", name);
// Functions
# Functions function greeter(name) { };
def greeter(name): console.log("Hi", name);
print("Hi", name) }
greeter("Bob") greeter("Bob") DOM terminology

# Conjunctions // Conjunctions DOM Initially generated from HTML,

if age < 18 and drink == "beer": if (age < 18 && drink === "beer") { the Document Object Model is the
print("Too young kiddo") console.log("Too young kiddo"); current state of the page in the
} browser.
if age > 18 or drink == "soda": if (age > 18 || drink === "soda") { DOM traversal Finding elements in
print("Great choice") console.log("Great choice"); the DOM with JS
} DOM manipulation Modifying the
# Class syntax // Class syntax DOM with JS
class User(BaseUser): class User extends BaseUser { event An interaction with the DOM
def __init__(self, name): constructor(name) { (most common: click)
self.name = name this.name = name;
self.logged_in = False this.loggedIn = false;
def log_in(self): } Asynchronous Terminology
self.logged_in = True logIn() {
user = User("janeqhacker") this.loggedIn = true; asynchronous Instead of pausing
} (“blocking”) for a slow operation,
} the asynchronous approach is to
let user = new User("janeqhacker"); put-off starting the slow operation,
then call a function (“callback”)
# Making request (Synchronous) // Making request (Asynchronous) at a later time to signal it’s done
response = requests.get("cnn.com") fetch("http://cnn.com") callback A function passed as an argu-
data = response.json() .then(response => response.json()) ment to be called later when an
print("Resp:", data) .then(data => { event is triggered
console.log("Resp:", data); promise Another popular way to do
}); callbacks, with a .then syntax

Kickstart Coding http://kickstartcoding.com/