How different is React's ES6 syntax when compared to ES5?

Before starting the comparison between ES5 and ES6, let take a brief introduction on both ES5 and ES6.

ES5 stands for ECMA Script 5 and ES6 stands for ECMA Script 6. ECMA (European Computer Manufacture Association) is a scripting language which is created to standardize JavaScript. It is defined by ECMA International and used for client-side scripting for the WWW. ES5 is released in 2009 and another one was on 2015. ES6 is a major enhancement in the JavaScript language that allows us to write a program for a complex application.

Some factors are as follows:

• Data Type: ES5 supports data types i.e. string, number, Boolean, null and undefined. Apart from all the data type ES6 introduced new one SYMBOL for unique vales.

• Arrow function: In case of ES5, to define the function we have to use both functions and return keywords but I another case, there is no need to use any keyword to define the function.

• Object Manipulation: In ES6, Object manipulation can be processed smoothly due to destructing and special operation but in ES5 it consumes more-time than ES5 for processing.

• Performance: based on performance, ES6 has a higher performance than others due to the new features and the shorthand storage implementation whereas ES5 has a lower performance due to non-presence of features.

• Defining Variables: In ES5, only use var for defining any variable whereas in ES6 has a new feature let and const for creating.

Case 1: 

Case 2: 

Case 3: 

• Loops: In ES5, for loop used for iteration whereas ES6 introduced a new concept for? Of loop for iteration.

• Module: In ES5, it is impossible to manage and develop by dividing each function of the JSX file but ES6 gave us the facility to import another file.

Export Module:

Import-Module:

• Support: ES5 has more community support than ES6 due to awareness of ES5 scripting.