Skip to content

Latest commit

 

History

History
135 lines (107 loc) · 4.46 KB

es2015.md

File metadata and controls

135 lines (107 loc) · 4.46 KB

ES6 (ES2015)

Goals

  • Become familiar with a subset of ES6
  • Learn where to find more about ES6
  • Introduce object spread, a popular feature not yet part of the standard

Environment

We'll be using the ES6 Katas for some of the exercises. If an environment isn't specified, use the Chrome web console.

Exercises:

To play along, refer to the MDN docs

Exercise 1. Declaring variables with const and let

Exercise 2. Template Strings

Convert the following to ES6 code using template strings:

// feel free to fill in your own details :-)
const town = "Burlington";
const name = "Matt";
const age = 30;
console.log("I live in", town);
console.log("My name is " + name + ". I am " + age + " years old");

Exercise 3. Arrow Functions

  • Create an arrow function that takes name and age and print (console.log) the sentence from exercise 2.
  • Create an arrow function that takes the following object and returns an object with all of the keys capitalized. 
    {
  name: 'Matt',
  age: 30,
  town: 'Burlington',
}
  • Use an arrow function to multiply every number in the following array by 10: 
    [1, 2, 3, 4, 5]
  • Use ES5 methods to rewrite the below constructor. Every time we enter p.age we should see a new age (age should increment by 1 every second), but with the way the constructor has been written, p.age will always evaluate to 0. HINT: what does this evaluate to outside of the contructor? 
    function Person() {
  this.age = 0;

  setInterval(function growUp() {
    this.age++;
  }, 1000);
}

var p = new Person();
  • Use an arrow function to fix the constructor.

Exercise 4. Default Parameters

Exercise 5. Destructuring

In a single statement, do the following:

  • Assign city and state to the first and second item in the following array ['Burlington', 'Vermont']
  • Alias city as town in the above example
  • Provide a default value for state so that the following array also gets assigned a state: ['Richmond']
  • Assign city and state to the values of the keys of the same name in the following object: 
    {
  city: 'Burlington',
  state: 'Vermont',
  country: 'United States',
  planet: 'Earth',
}
  • Alias city as town in the above example
  • Assign name and firstChildsName to the respective values from the following object: 
    {
  name: 'Bob',
  age: 45,
  children: [
    {
      name: 'Sue',
      age: 12,
    }, {
      name: 'Bobby Jr.',
      age: 8,
    }
  ]
}
  • Modify the above example to assign No Children to firstChildsName when passed an object with no children: 
    {
  name: 'Matt',
  age: 30,
  children: [],
}

Exercise 6. Array spread

Fix the tests in the array spread kata

Exercise 7. Object.assign and Object spread

  • Use Object.assign to overwrite the below object with your own info:
const person = {
  firstName: 'Matt',
  lastName: 'Parrilla',
  city: 'Burlington',
  state: 'Vermont',
}
  • Use Object.assign to create a new object that overrides the object's values but leaves the original object intact.
  • Use object spread to create the new object (you can use the Babel REPL to use object spread since it hasn't landed in Chrome yet)

Extra Credit. Transpile your ES6+ to ES5

Use babel to transpile your use of object spread into ES5.

More ES6

ES6 was a huge change and we didn't cover all of it. The great news is, there are a lot of wonderful resources out there. Check out Ben Glassman's BTVJS talk for a great starting point and overview of ES6 features including some not covered above.

As usual, the MDN docs are great and should be a go-to resource for both ES6 specifically and javascript generally.