es6/7

es6-7.js

/**
 * const
 * - non-re-writable
 * - use everywhere you don't need to reassign!
 */
 const foo = 'bar';
 
/**
 * Block scoped variables
 */
 for (var i = 0; i < 10; i++) {
   let foo = 'bar';
 }
 // `foo` is undefined here
  
/**
 * Arrow functions
 */
 const func = (a, b) => {
   return a + b;
 };
   
/**
 * Implicit return
 */
 const implFunc = (a, b) => (a + b);
 implFunc(3, 6); // => 9
    
/**
 * "Normal" `this`
 */
  this.values.forEach((value) => {
    console.log(this.values) // no need to bind
  });
   
/**
 * Default func params
 */
 function defVals(value = 6) {
   // ...
 }
    
/**
 * Spread operator
 */
 function func(one, ...args) {
   args[0];
   similarFunc(...args); // no need for apply
 }
     
 const extended = { ...obj1, ...obj2 };
     
/**
 * Matching
 */
 const { foo: { bar } } = { foo: { bar: 'XYZ' } };
 bar; // => 'XYZ'
      
 const [a, , c] = [1, 2, 3];
 c; // => 3
      
 function matchFunc({ foo }) {
   // ...
 }
 matchFunc({ foo: 'bar' });
      
/**
 * Obj properties shorthand
 */
 const foo = 'bar';
 { foo } // { foo: 'bar' }
       
 /**
  * Computed obj properties
  */
  const foo = 'bar';
  { [foo]: 'foo' } // { bar: 'foo' }
        
/**
 * String templates
 */
 const str = 'foo:bar';
 `I am a ${typeof str}`; // => I am a string

/**
 * REAL classes
 */
 class Dog extends Animal {
   static sound = 'WOOF!'; // es7
   
   constructor(name) {
     super(name);
     this.name = name;
   }

   talk() {
    super.talk();
    return `${this.name} says ${Dog.sound}`;
   }
 }
 
/**
 * Class/method decorators (es7)
 */
 @testable(true) // <= no semicolon
 class Animal {
  
  @memoized
  get name() {
   return `${this.firstname} ${this.lastname}`;
  }
  // ...
 }
 
 function testable(value) {
  return (target) => {
   target.isTestable = value;
  };
 }
 
 function memoized(target, name, descriptor) { // (Animal.prototype, 'name', descriptor)
  descriptor.writable = false;
  return descriptor;
 }

/**
 * Proxying
 */
 const target = { foo: 'bar' };
 const proxy = new Proxy(target, {
   get: (receiver, name) => {
     return name in receiver
       ? receiver[name]
       : `${name} IS MISSING`;
   }
 });

 proxy.foo; // => bar
 proxy.blah; // => blah IS MISSING
 
/**
 * I18n
 */
 const i18n = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
 i18n.format(120.4243); // => $120.42
 
 const i18n = new Intl.DateTimeFormat('en-US');
 i18n.format(new Date('2016-04-12')); // => 4/12/2016
 
 /**
  * Async/Awaits (es7)
  */
  async function request(url) {
   const response = await fetch(url);
   const json = await response.json();
   return json;
  }
  
  console.log(await request('http://google.com'));
  
  /**
   * Additional Links:
   * - ES6 Features  (most implemented already): http://es6-features.org/
   * - ES7 Decorators: https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.gw8f17dwv
   * - ES7 Async Functions: https://jakearchibald.com/2014/es7-async-functions/
   * - Additional ES7 Features: https://github.com/hemanth/es7-features#class-decorators
   * - Babel (transpiler): https://babeljs.io
   */