The development of technology is very fast in this day and age. Our ease of accessing information is available every second. Especially for programmers, there are always tools that make it easier and updated syntaxes from programming language development to make it more concise and efficient for programmers to create programs.

Javascript is a web programming language that is always updated every year. Of course, this update is a continuation of the ES6 syntax in 2015. It continues with ES7 in 2016, ES8 in 2018, and now it touches ES11 in 2022.

With such a significant development. Several syntaxes are present. like in ES6 we are introduced to arrow functions, and rest parameters (…) to class concepts.

However, the browser still reads the ES5 version of javascript, meaning that although its development is still ongoing and the features make it easier for developers, unfortunately, the latest syntax is not yet compatible and read well by browsers.

So what's the solution?

This is where Babel comes as a Transpiler for javascript. This means that Babel will convert the es6+ syntax into es5 for easy browser processing.

Read more about Babel in its official Documentation: https://babeljs.io/docs/en/

Here I will practice how Babel works in compiling es6 syntax, let's practice: Prerequisites :

• Code Editor : Vscode , Sublime, and others
• Terminal
• Internet Connection
• Node JS installed : https://nodejs.org/en/

Step by Step :

1. Create a new folder named "babel-practice" or name it as you like.

2. Go to the folder. Click the top bar of the file-explorer, then type CMD and click enter

3 .Then the cmd display appears. Type the command "code ." use space

4. Next you will be directed to the VSCODE Code Editor

5. Press Ctrl+` to navigate to terminal

6. Type "npm init" command to generate package.json file and answer some questions. If you want it faster, add -y to skip it

7. Next, we install package babel with the command.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

8. A node_modules folder will be generated which stores all libraries. Also, there is a change in package.json

9 .Next, create a .babelrc file and enter the following configuration

10. Create a src folder, and add in it the index.js file

11. Type the following code in index.js

var obj = {
        rex: /\d/,
        checkArray: function(array) {
            return array.some(entry => this.rex.test(entry));
        }
    };
console.log(obj.checkArray(["no", "digits", "in", "this", "array"])); // false
console.log(obj.checkArray(["this", "array", "has", "1", "digit"])); // true

12. Configure package.json as follows

"build" will generate a "lib" folder and a compiled index.js file.

"start" will run the index.js file compiled in the lib folder.

13. Run the build with the following command.

A new folder will be generated :

14. Let's see the difference in the results of es5 (right) and es6 (left)

15. Continue with the result run. With npm run start

Conclusion :

By using babel, we can experience the new features of javascript development without worrying about web browser compatibility. Thank you, hopefully useful.

---