Random UTF-8 characters

Home

30 Apr 2016 in javascriptes7

What is planned for ES7?

Like all things javascript, things move fast. While a lot of us are just starting to get ES6 into production, ES7's draft is almost complete. ES6 was a small update, but ES7 looks to be a huge step forward. Here are some highlights on the goodness ES7 will bring.

Object Rest/Spread Properties

After introducing the spread operator for arrays in ES6, this operator will also support Object in ES7.

// Rest Example
let { a, b, ...c } = { a: 'foo', b: 'bar', z: 1, y: 2 };
console.log(a); // 'foo'
console.log(b); // 'bar'
console.log(c); // { z: 1, y: 2 }

// Spread Example
let example = { a, b, ...c };
console.log(example); // { a: 'foo', b: 'bar', z: 1, y: 2 }

Object.values/Object.entries

We already have Object.keys but we all turn to lodash, jQuery or some other 3rd party library to get access to an object's values or entry set.

const example = { a: 'foo', b: 'bar', z: 1, y: 2 };

// Values
console.log(example.values); // ['foo', 'bar', 1, 2];

// Entries 
console.log(example.values); // [[a: 'foo'], [a: 'bar'], [z: 1], [y: 2]];

String.prototype.padStart/String.prototype.padEnd

Javascript Strings are a pain to deal with. This is mostly due to some missing string manipulation features like padding. I'll stay away from the left-pad fiasco we had just a few months back. I'll only say that this is a much needed core language feature.

// End
'As if JS lacks this'.padEnd(25); // 'As if JS lacks this      '
'As if JS lacks this'.padEnd(2); // 'As if JS lacks this'

// Start
'As if JS lacks this'.padEnd(25); // '      As if JS lacks this'
'As if JS lacks this'.padEnd(2); // 'As if JS lacks this'

Async Functions

Async function promise to clean up all the promise code. While promises where a vast improvement over callbacks, Async will remove even more boiler plate.

async function asyncExample(elem, animations) {
  let ret = null;
    try {
      for(const anim of animations) {
        ret = await anim(elem);
      }
    } catch(e) { 
      // handle error here if need be
    }
  return ret;
}

Array.prototype.includes

Sick of writing foo.indexOf(x) != -1? Good, so are the rest of us! ES7 will add a includes function. You can finally write foo.includes(x) to properly express what you are trying to do.

Conclusion

This only scratches the surface of what is being proposed for ES7. These will be welcome additions to the language. Love it or hate it, the web runs on Javascript. Only time will tell if ES7's changes make writing Javascript better. Sometimes I do wonder, are only putting lipstick on a pig?

Further reading: ES7 Spec: https://tc39.github.io/ecma262/
ES7 Status: https://github.com/tc39/ecma262
ES7 Examples: https://github.com/hemanth/es7-features#exponentiation-operator (a bit out of date but useful)