Examples

//Common
const {arg1, arg2} = someObj;
const [val1, val2] = someArray;


//Ok-ish
function dest({prop1: {prop2: prop = 'default'}} = {}) {
  console.log(prop);
}

dest({prop1: {prop2: undefined}});
> default

//-------------------------------------------------------------

//Don't do this, even if it's nicely formatted.
//It's even breaking the parser in this view.
function dest({
    prop1: {prop2: prop}, 
    prop3: p, 
    res = 'val'
  } = {}
) {
  console.log(prop, res);
}

//-------------------------------------------------------------

//***Gotcha***
dest({});

> Cannot read property 'prop2' of undefined

Examples

//Parallel Gotcha
async function nope() {
    const res1 = await asyncAction1();
    const res2 = await asyncAction2();
    
    return { res1, res2 };
}

//Workaround
async function yep() {
  const [res1, res2] = await Promise.all([asyncAction1(), asyncAction2()]);
  return { res1, res2 };
}


//The good
async function definitely() {
  try {
    res = await asyncAction();
  } catch(error) {
    // Don't forget to rethrow!!
    console.error('oops', error);
    throw error;
  }
}

//THE BLOAT

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

//********Parallel Gotcha*********
var nope = function () {
    var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
        var res1, res2;
        return regeneratorRuntime.wrap(function _callee$(_context) {
            while (1) {
                switch (_context.prev = _context.next) {
                    case 0:
                        _context.next = 2;
                        return asyncAction1();

                    case 2:
                        res1 = _context.sent;
                        _context.next = 5;
                        return asyncAction2();

                    case 5:
                        res2 = _context.sent;
                        return _context.abrupt("return", { res1: res1, res2: res2 });

                    case 7:
                    case "end":
                        return _context.stop();
                }
            }
        }, _callee, this);
    }));

    return function nope() {
        return _ref.apply(this, arguments);
    };
}();

Workaround for bloat? Use bluebird.coroutine(). We noticed that it generates significantly less code than Babel's regenerator runtime.

https://babeljs.io/docs/plugins/transform-async-to-module-method/

Examples

//ModuleA
import modA from './modB'

export default function func() {
  modB.func();
}

//ModuleB
import modA from './modA'

export default function func() {
  modA.some();
}

//---------------------------------------------------------------------

//Gotcha when mixing commonJS and ES6 modules
import comA from './com'

export default function func() {
  comA.some();
}

const modB = require('./modb');
function some() {
  modB.func();
}
//This is the bad part! Do not override the module.exports object.
module.exports = {
  some
}

> comA.some is not a function

Examples

// The good stuff
const arr = [1,2,3,4,5,6];
const mapped = arr.map(x => x * 2);
console.log(mapped);
> [2, 4, 6, 8, 10, 12]


//Sane 'this' value
function str() {
  this.value = 'default';
  
  setTimeout(() => {
    this.value = 'abc';
  });
}

const s = new str();
console.log(s.value);
setTimeout(() => {
  console.log(s.value);
});

//***Plain object gotcha***
const obj = {
  method1: () => { 
    this.method2();
  },
  method2: () => {
    console.log('nope');
  }
}

obj.method1();

> Cannot read property 'method2' of undefined

//Props and methods
const prop1 = 'blah';
const prop2 = 'super blah';

const obj = { prop1, prop2 };
//Equivalent to:
// const obj = {
//  prop1: prop1,
//  prop2: prop2
//};

const obj2 = {
  method() {
    console.log('method2')
  },
  prop1,
  prop2
};
//Equivalent to: 
//const obj2 = {
//   method: function() {
//     console.log('method2')
//   },
//   prop1: prop1,
//   prop2: prop2
// };

Examples

class MyClass {
  constructor() {
    // Don't forget the super call!
    this.value = 'blah';
  }
  
  instanceMethod() {
    console.log(this.value);
  }
  
  //How cool is that??
  static method() {
    return this.name;
  }
}

//Properties are annoying, but this can be replaced by declaring
//those in the constructor instead, the same way this.value is
//declared.
MyClass.prototype.instanceProp = 'val1';


const mc = new MyClass();
console.log(mc.instanceProp);
mc.instanceMethod();
console.log(MyClass.method());

> "val1"
> "blah"
> "MyClass"

Examples

function fn(arg1, ...rest) {
  console.log(arg1, rest);
}

fn('blah', 'more', 'and', 'more', 'to', 'infinity', 'and', 'beyond');
> "blah" ["more", "and", "more", "to", "infinity", "and", "beyond"]


const arr1 = [1,2,3];
const arr2 = [4,5,6];
const together = [...arr1, ...arr2];
console.log(together);
> [1, 2, 3, 4, 5, 6 ]


console.log(Math.max(...arr1));
> 3

Examples

//A super nifty object iterator
Object.prototype[Symbol.iterator] = function *() {
  for(const key of Object.keys(this)) {
    yield { key, val: this[key] };
  };
}

const obj = {
  prop1: 'val1',
  prop2: 'val2',
  prop3: 'val3'
};

for(const {key, val} of obj) {
  console.log(key, val);
}

> "prop1" "val1"
> "prop2" "val2"
> "prop3" "val3"

Examples