Learn
Browser Compatibility and Transpilation
Why ES6?

Before we learn how to set up a JavaScript project that converts ES6 to an older version, it’s worth understanding a few of the reasons Ecma made such substantial updates.

The version of JavaScript that preceded ES6 is called JavaScript ES5. Three reasons for the ES5 to ES6 updates are listed below:

  • Readability and economy of code β€” The new syntax is often easier to understand (more readable) and requires fewer characters to create the same functionality (economy of code).
  • Addresses sources of ES5 bugs β€” Some ES5 syntax led to common bugs. With ES6, Ecma introduced syntax that mitigates some of the most common pitfalls.
  • A similarity to other programming languages β€” JavaScript ES6 is syntactically more similar to other object-oriented programming languages. This leads to less friction when experienced, non-JavaScript developers want to learn JavaScript.

Because ES6 addressed the above issues, Ecma knew that adoption by web developers would occur quickly, while web browser support lagged behind.

To limit the impact of ES6 browser compatibility issues, Ecma made the new syntax backwards compatible, which means you can map JavaScript ES6 code to ES5.

Instructions

1.

In these tasks, you will manually change the code in main.js to ES5 syntax.

The let and const keywords were introduced in ES6. Before that, we declared all variables with the var keyword.

Change the let and const keywords in main.js to var.

2.

The following line of code is written with ES6 string interpolation:

`You can make carbonara with ${pasta}, ${meat}, and a sauce made with ${sauce}.`

In ES5, we used plus signs (+) to interpolate variables into strings.

In main.js, use ES5 string interpolation to set carbonara to the same string as above.

Folder Icon

Take this course for free

Already have an account?