The current version of Chrome, Firefox or Safari does not support ES6/7 natively. There are bits and fragments supported; like, Chrome supports const and let but with the use strict declarative.

Now, if you want to use ES6/7 in your application, you need to translate it to something which the browsers understand; here, we use a transpiler. A transpiler converts one language to another; or rather, source-to-source. In this case, it's from ES6/7 to ES5.

Babel is one of the many transpilers available; what you might be seeing are the different presets. A preset is like a cookbook: how to transpile Arrow functions, how to transpile object destructuring, and whatnot.

I hope this helps! :)

I think this is free laracasts.com/series/es6-cliffsnotes/episodes/1

The compiler for writing next generation JavaScript

You can find proposed ES syntaxes that currently can be used with Babel at its website https://babeljs.io/.

New ES syntaxes can be really powerful tools in our hands such as async-await instead of callback/promise hell, arrow functions, classes, decorators, destructuring, spread operator etc.

It can be included into your build pipeline. In browser based projects it can be combined with Webpack to be able to use not only new syntaxes but also CommonJs modules in the browser.