THE ES6 TOOL BABEL

JavaScript has been on a wild journey since its hasty ten-day conception in 1997. Over the years, it has passed through many robust changes, adapting its behavior and correcting bugs. Unfortunately, not all browsers have kept up with the changing times. ES6 Tools are an excellent way to write code with the most up-to-date syntax in JavaScript and convert that code into ES5 language that older browsers can understand. There are many JavaScript-to-JavaScript compilers to choose from, and in this blog, we’ll learn about Babel.

Babel takes your advanced Javascript code and translates it to something earlier browsers can actually understand, comparable to millennials explaining TikTok to Gen X. The three principal pillars to make up Babel are polyfilling, transforming syntax, and source code transformations.

Photo by Frank Vessia on Unsplash

The term polyfill is meant to imagine filling holes in a wall with Polyfilla, a popular spackle in the UK. So the browser is the wall, and the polyfill is the spackle that lets you smooth over any flaws.

Polyfill is applied to add an unsupported feature to your code. Perfect polyfills execute features without any side effects. Like promise objects or symbol functions, the most modern features work in older browsers thanks to core.js, the standard library JavaScript polyfill.

Babel can take your ES6 syntax, like arrow functions and template literals, and parse them into something that every browser can compute. Below we have the modern ES6 version of .map, which does not use the keyword function and forgo curly braces. (Funnily enough, the creator of JavaScript fought not to include curly braces, but they denied his request. Eich did win the battle to make JavaScript’s relation to curly braces a rocky one, at best)

//modern ES6+ JavaScript
[2, 4, 8].map(numArg => n ** 2)
//the same code after being compiled by Babel
[2, 4, 8].map(function(numArg) {
  return Math.pow(numArg, 2);
}

Another way that Babel supports the modern JavaScript user is by transforming source code. Babel does this by creating abstract syntax trees, which will now be referred to as AST’s. AST’s are an abstract structure of source code, with each node representing a construct from the code.

//here is an easy example
function add(num) {
return num + num
} 

In the instance above, you can see a simple function that takes a number and adds it to itself. Now we’ll look at how Babel would parse the code.

//an example of most of an AST
{
  type: "FunctionDeclaration",
  id: {
     type: "Identifier",
     name: "add",
   };
   params: [
     {
       type: "Identifier",
       name: "num"
     }
    ],
    body: {
    type: "BlockStatment",
    body: [
      {
        type: "ReturnStatement",
        argument: {
          type: "BinaryExpression",
          operator: "+",
...

Now we can see the tree-like data structure. The nodes match items in the code. Babel compiles the tree in two steps, a scanner that iterates over each character, removes white spaces and splits the entire code into a list of tokens. Then a parser will take the list of tokens and generate the tree. It may delete some syntax like extra brackets or semicolons and will not always result in a perfect code match, hence the “abstract”.

As you can see, Babel is an essential part of the internet. Without it, we would have a difficult time implementing code across browsers! ES6 arrived with some simplified syntax that helps us make modernized code that’s more straightforward to understand.