How Python can help you learn ES6

def fish_and_chips():
  ingredients = ['fish', 'potatoes', 'batter']
  print 'cooking %s together' % (', '.join(ingredients))

# cooking fish, potatoes, batter

class Baking(object):
  def __init__(self, supplies):
    self.supplies = supplies

  def bakewell_tart(self):
    ingredients = ['almonds', 'raspberry', 'icing sugar']
    print self
    print 'baking %s' % (', '.join(ingredients))

# <__main__.Baking object at 0x10d6e0510>

Ok, onto some of the ways Python pushed me to learn more about ES6!

Block scope

When I first started learning JavaScript (back in “ancient” ES5 days), I thought many structures in the language created scope. I thought that blocks inside of conditionals statements created scope. I found that only functions create scope in JavaScript.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

With the addition of const and let to ES6, we get block scope!

function simpleExample(value) {
  if (value) {
    var varValue = value;
    let letValue = value;
    console.log(varValue, letValue); // value value
  }
 
  // varValue is available even though it was defined
  // in if-block because it was "hoisted" to function scope
  console.log(varValue); // value
 
  // letValue is a ReferenceError because 
  // it was defined within the if-block
  console.log(letValue); // Uncaught ReferenceError: letValue is not defined

What else creates scope in JavaScript, ES6, and Python? And what type of scope do they use? Check out the following table:

Template literals

I often think of template literals as Mad Libs. In case you didn’t grow up with Mad Libs, they were short stories which you could fill in with your own content. Sentences were missing words, and you could write anything you wanted into those spaces. You only had to conform to the specified word type: noun, pronoun, verb, adjective, exclamation.

Mad Libs that read things like:

mothers sit around burping. Last summer, my little brother fell in a/an hairdo and got poison palmtree all over his butt. My family is going to Winsconsin, and I will..

Similar to Mad Libs, template literals are string literals that allow embedded expressions. They were originally called “template strings” in prior editions of the ES2015 specification.

Yup, these already existed in Python before ES6 was released. I had actually learned about literal string interpolation in Python, which made it that much easier for me to understand template literals in ES6. They are great because you no longer need the concatenation found in older versions of JavaScript which could get a bit ridiculous and coerce other types into strings.

let exclamation = 'Whoa!';
let sentence = `They are really similar to Python.`;
 
console.log(`Template Literals: ${exclamation} ${sentence}`);
// Template Literals: Whoa! They are really similar to Python.

print '.format(): {} {}'.format('Yup.', 'Quite!')
# .format(): Yup. Quite!

Default parameters

Yup, Python has had these forever too. Default parameters set a default for function parameters. This is most effective for avoiding bugs that arise when arguments are missing. And with the advent of ES6, JavaScript gained default parameters too.

function nom(food="ice cream") {
  console.log(`Time to eat ${food}`);
}
 
nom(); // Time to eat ice cream

def nom(food="ice cream"):
  print 'Time to eat {}'.format(food)
 
nom() # Time to eat ice cream

Rest parameters & *args

Rest parameter syntax allows us to represent an indefinite number of arguments as an array. In Python, they’re called *args, which again, I’d already learned before ES6! Are you sensing a pattern here?

Check out how each of the languages bundles parameters up in neat little packages:

function joke(question, ...phrases) {
  console.log(question);
  for (let i = 0; i > phrases.length; i++) {
    console.log(phrases[i]);
  }
}

let es6Joke = "Why does JS single out one parameter?"
joke(es6Joke, "Because it doesn't", 'really like', 'all the REST of them!');
 
// Why does JS single out one parameter?
// Because it doesn't
// really like
// all the REST of them!

def pirate_joke(question, *args):
  print question
  for arg in args:
    print arg
 
python_joke = "What's a Pyrate's favorite parameter?"
 
pirate_joke(python_joke, "*args!", "*arrgs!", "*arrrgs!")
 
# What's a Pyrate's favorite parameter?
# *args!
# *arrgs!
# *arrrgs!

Classes

Now, let’s look at prototypal inheritance! ES6 classes are actually syntactic sugar and based on the prototype chain found in ES5 and previous iterations of JavaScript. So, what we can do with ES6 classes is not much different from what we do with ES5 prototypes.

Python has classes built in, allowing for quick and easy object-oriented programming. I always found the prototype chain extremely confusing in JavaScript, but looking at Python and ES6 classes side by side really made sense to me.

To explain what the JavaScript prototype is, here’s a quote from MDN:

When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain.

Let’s take a look at these ES6 “classes” based on the prototype chain:

class Mammal {
  constructor() {
    this.neocortex = true;
  }
}
 
class Cat extends Mammal {
  constructor(name, years) {
    super();
    this.name = name;
    this.years = years;
  }
 
  eat(food) {
    console.log('nom ' + food);
  }
}
 
let fryCat = new Cat('Fry', 7);
fryCat.eat('steak');

class Mammal(object):
  neo_cortex = True
 
class Cat(Mammal):
  def __init__(self, name, years):
    self.name = name
    self.years = years
 
  def eat(food):
    print 'nom %s' % (food)
 
fry_cat = Cat('Fry', 7)
fry_cat.eat('steak')

A big difference between ES6 Classes and ES5 Prototypes: you can inherit more easily with classes than with the prototype chain. This is very similar to Python’s structure. Neat!

So there you have it. A bunch of examples of how Python helped me learn all about ES6. Often with programming languages, many differences exist, but so do many similarities. And it’s in those similarities that we can more easily learn new languages!