Using Babel you can use (and create) the next generation of JavaScript, as well as the next generation of JavaScript tooling.

JavaScript as a language is constantly evolving, with new specs and proposals coming out with new features all the time. Using Babel will allow you to use many of these features years before they are available everywhere.

Babel does this by compiling down JavaScript code written with the latest standards into a version that will work everywhere today. This process is known as source-to-source compiling, also known as transpiling.

For example, recently I was working on the solution to an algorithm, and I could only write part of it in ES6. The rest of it was in ES5. If I hadn’t had Babel to transpile my code down to ES5, I would have worried about the purity and consistency of my solution:

The Challenge:

Sum All Numbers in a Range

JavaScript

1

2

We'll pass you an arrayof two numbers.Returnthe sum of those two numbers andall numbers between them.

The lowest number will notalways come first.

With ES5, if you have an array and want to create a new array with the existing one being part of it, the array literal syntax is no longer sufficient and you have to fall back to imperative code, using a combination of push, splice, concat, etc. With spread syntax this becomes much more succinct.

spread operator: allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected. In other words, you don’t have to write out, in this case, the whole array. …arr2 is the same as [3,4,5].

My “problem” was that I was only provided the min and max/max and min of arrays as arguments and had to “reconstruct” the arrays from which they originated. I only knew how to do this utilizing the spread operator, so my next solution included the spread operator.

Solution including spread operator:

Solution including spread operator

JavaScript

1

2

3

4

5

6

7

8

functionsumOf(min,max){

return(max-min+1)*(max+min)/2;

}

functionsumAll(arr){

returnsumOf(Math.min(...arr),Math.max(...arr));

}

sumAll([1,4]);

I don’t consider this “best practice”. Either I should consistently use ES6 or consistently use ES5. That’s where Babel came in! I placed this code on the left side of the repl, and got the following code transpilation on the right:

This was all well and good, but there was some code native to Babel that was not “pure” Javascript. I had to decipher what was what, and then take the code transpilation even further. After several code transpilations of my own, this is the solution I ended up with:

This is when Lebab came in (and perhaps would come in for you as well). I was eager to learn and implement ES6 in my code, so I turned to the transpiler, Lebab, because

Lebab helps you modernize your old-fashioned code. It scans your code and finds the parts that can be converted to a newer version of ECMAScript.

Previous to Sum all numbers in a range, I had been talking about Babel, the multi-purpose compiler for JavaScript, and how it can help you learn ES6. While that is absolutely true, it makes up only half the equation. It is great when you want to transpile ES6 to ES5, but what about when you want to transpile your ES5 to ES6? Lebab it!

As you probably have already figured out, Lebab does the opposite of Babel, and its name is even Babel in reverse!

Lebab (and Babel) also catches potential errors or leaks in your code. For example, you might be using variables that weren’t assigned beforehand, and one’s value was equal to the other variable, which then was equal to yet another value. This leads to potentially serious problems in your code, because it results in “leaky variables”. A leaky variable refers to a variable that has not been declared. For example:

Leaky Variable:

Example of a leaky variable

JavaScript

1

2

3

4

5

var(orconstinES6)coffee="Java";

vs

coffee="Java";

Perhaps it was an oversight on your part, and you may think that your variable safely has local scope. Without the var/const, it has become part of the global scope! Lebab points this out, and it will even suggest where you should declare and/or assign the variable!

a tool that helps to detect errors and potential problems in your JavaScript code.

When you enter your code on the left-hand side of the JSHint repl, a JSHint report on it will appear on the right. You can even configure what you want included in your code report under the Configure tab:

Report

Warn

Assume

You can choose all options, or as few as you want. I always go with “all”. Can’t hurt!

JSHint does include a disclaimer that

while static code analysis tools can spot many different kind of mistakes, it can’t detect if your program is correct, fast or has memory leaks. You should always combine tools like JSHint with unit and functional tests as well as with code reviews.

Like this:

Related

Maria Campbell

Founder, Inter-Global Media Network, Inc., where I focus on Front End Development. as well as a digital photographer, videographer, blogger, broadcaster, and graphic designer. Genesis Framework user. I got my start 8+ years ago teaching myself HTML/CSS and Wordpress Development because I couldn't find anyone who could create what I wanted. I have been working with open source software ever since. I am an open source software evangelist, and a "Women in Technology" evangelist. A creative professional myself, I find Web Development to be both practical and creative. I love to cook, travel, read mysteries, love everything French, the beach at sunrise, my three cats, and hope to revisit the city of San Francisco one day.

Reader Interactions

Comment Policy: Your words are your own, so be nice and helpful if you can. Please, only use your real name and limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. Comments are moderated, so spammy or malicious links will be removed.