You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

Welcome to 2017!

Object.values/Object.entries

this

Object.entries is a new way to iterate over the properties of an object, which we weren’t able to do before ES2017. If you wanted to loop over an object and get the values of its entries you’d have to something long-winded like this:

var obj = {a: "Run", b: "The Pretender", c: "Everlong"}
  for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(obj[prop])
  }
}
// "Run"
// "The Pretender"
// "Everlong"
const obj = {a: "Re-arrange", b: "Many Of Horror", c: "Wolves Of Winter"}
Object.entries(obj))
// "Re-arrange"
// "Many Of Horror"
// "Wolves Of Winter"

Yet another way to optimise your code and another new JavaScript feature that solves a long-winded problem we’ve had up until now.

String.prototype.{padStart/padEnd}

Remember left-pad-gate? That one small package broke everything. Yet so many packages, websites, applications were dependent on left-pad because it fulfilled a very simple piece of functionality that was missing from JavaScript at the time. Well now it’s here:

let string = 'JavaScript'

// padStart
> string.padStart(5) // no effect, string is already longer than 5
< 'JavaScript'

> string.padStart(20) // now length 20, padding with spaces (default)
< ''          JavaScript'

> string.padStart(20, 'ES') // now length 20, padded with 'ES'
< 'ESESESESESJavaScript'

// padEnd - works the same, but at the end of the string
> string.padEnd(5) // no effect, string is already longer than 5
<'JavaScript'

> string.padEnd(20) // now length of 20, padding with spaces (default)
< 'JavaScript          ''

> string.padStart(20, 'ES')
< 'JavaScriptESESESESES' //now length 20, padded with 'ES' at the end

Native string padding seems simple enough but it’s extremely useful.

Trailing commas in function parameters

I sort of get the need for this one. It may only be a small change but it’s more for code style, convienience and readability, which I’m always a huge fan of.

This features allows function parameters to have a trailing comma, such as:

function gimmeSpecs (
    spec1,
    spec2, // won't have to modify this line
    spec3, // comma here so you don’t have to modify 2 lines, when adding a new param
) {
  // gimme the specs
}

gimmeSpecs(
    'ES2015',
    'ES2016', // no adding commas,
    'ES2017', // no worries
)

…which I admit I’ve not seen too often before in code but yes I have been caught out with it, when adding or removing parameters and cutting the whole line out, only to have a compilation error. I’ve actually started using this quite a lot after moving to the AirbnB ESLint setup with React projects. Nice syntactic sugar for JavaScript.


Updating your Babel build

See my previous post for how to update your build process to transpile the latest JavaScript features.

Huzzah! You can now use new JavaScript features.

You may now proceed to level 2017!


TL;DR

Even more of the latest JavaScript features with examples and how to start using them in your code now, with Babel as a transpiler for non-supporting browsers.

Further resources