New JavaScript versions also bring syntaxial updates as well which is not possible to be polyfilled as it would simply not get executed and instead will throw syntax errors in old JavaScript engines, this is where a transpiler comes into play. It has got its name from the union of two operation it performs Transformation + Compiling. In continuation, we can now define a “Transpiler” to be a tool that transforms code with newer syntax into older code equivalents and this process is called “Transpiling”.

By development practice, while using Transpiling it is essential to write the code maintaining the newer syntax but while deploying the project use a transpiler similar to a minifier or a linter to deploy the transpiled old syntax friendly program. That raises the question why should we even bother writing in the newer syntaxial form while still deploying the older one? This is a very logical question to ask and has a lot of good points to give as answers out of which few are given below.

• It goes without saying that the newer syntax was added to the language to make the code more readable and easily maintainable i.e. the newer versions are simply better than The older equivalents. Thus it is recommended towrite newer and cleaner syntax to achieve a better result.
• Transpiling only for older browsers, while serving the newer syntax to the updated browsers, we can get the advantage of browser performance optimizations.
• Using the newer syntax earlier allows it to be tested more robustly in the real world, which provides earlier feedback and if found early enough, they can be changed/fixed before those language design mistakes become permanent. Thus using the newer syntax makes the syntax much more reliable in the long run.

Let us take some examples of Transpiling. ES2015 added a new syntaxial feature of default parameter value, it can be implemented using the following.

// Default Parameter Value Example.

// If no parameter is passed a will be 5.

function myFunc(a = 5)

{

console.log(a);

}

myFunc(96); // Logs 96.

myFunc(); // Logs 5 as default.

As you can see, if the parameter is not supplied we take the default parameter value in account but this syntax will not get recognized in pre-ES2015 engines. Thus after transpiling, we will get the older equivalent as the following.

// Default Parameter Value Example.

// If no parameter is passed a will be 5.

function myFunc()

{

// Using Ternary Operator to assign default

// 5 if undefined.

**var** a = (arguments[0] !== undefined) ? arguments[0] : 5;

console.log(a);

}

myFunc(96); // Logs 96.

myFunc(); // Logs 5 as default.