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 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
  .forEach( element => {
    -- stuff here --
  } );

This was the first issue found. If you usually use, trust me, you will get that error in Chrome49. Despite the fact that 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 Object.values is only supported in Chrome 54 and above.

How to fix this issue ?

    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 ) => {
    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.


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: Logo

You are commenting using your 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

Up ↑

%d bloggers like this: