Using ES6 in Chrome 49

Recently I started to implement all my new projects using ES6. Lately I faced some JavaScript issues in one of those projects.

Thanks to Sentry.io I could realise that despite being an old browser Chrome49 is still used by the users using my projects. So I decided to fix those issues.

Error: document.querySelectorAll(…).forEach is not a function

That was the first issue I had to fix in my project. Below you’ll see the error message and the snippet.

Error: document.querySelectorAll(...).forEach is not a function
document
  .querySelectorAll('[data-id="process-id"]')
  .forEach( element => {
    -- stuff here --
  } );

This was the first issue found. If you usually use caniuse.com, trust me, you will get that error in Chrome49. Despite the fact that caniuse.com says that querySelector and querySelectorAll are supported in Chrome 49.

How to fix the issue ?

Well, in that specific project I had jQuery so I could resolve it quickly this way:

$('[data-id="process-id"]').each( (index, element) => {
  -- stuff her e--
} );

Error: Object.values(…).indexOf is not a function

The second issue I faced was that one.

Error: Object.values(...).indexOf is not a function

if ( Object.values( xhrCalls ).indexOf( false ) === -1 ) {
  -- stuff here --
}

In this case, according to caniuse.com Object.values is only supported in Chrome 54 and above.

How to fix this issue ?

  const
    values = Object.keys( xhrCalls ).map( k => xhrCalls[k] );

  if ( values.indexOf( false ) === -1 ) {
    -- stuff here --
  }

For that fix I used Object.keys and map functions combined together.

Sounds a bit funny, doesn’t it? Object.values is not supported, however Object.keys is !

Object.entries(…)[Symbol.iterator] is not a function

The last issue was similar to the previous one, Object.entries is not supported as well in Chrome 49, so I had this code.

Error: Object.entries(...)[Symbol.iterator] is not a function
for ( const [key, val] of Object.entries( formValues ) ) {
  -- stuff here --
}

That for loop was pretty elegant however I had to change it to this version, to resolve the issue.

Object.keys( formValues ).forEach( ( key ) => {
  const
    val = formValues[ key ];

  -- stuff here --
} );

Is not so elegant as the previous version, however is more readable than the ES5 version using for key in object combined with hasOwnProperty methods.

Conclusion

Do not trust on the general stats you can find over internet. Analyse your audience and if they’re still using an old browser, just keep supporting it.

Otherwise you’re giving a bad impression to your users.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: