ES5 vs ES6 in JavaScript. 14 big😱 changes⚠️

ES5 and ES6 refer to different versions of the ECMAScript standard, which is the scripting language specification that serves as the foundation for several languages, including JavaScript. The evolution from ES5 to ES6 (also known as ECMAScript 2015) brought about numerous changes and improvements. Here's a comparison between the two:

1. Let and Const (Variable Declarations)

• ES5: The primary way to declare variables was using var.

• ES6: Introduced let for block-scoped variable declarations and const for block-scoped constant variable declarations.

2. Template Literals

• ES5: Strings were concatenated using +.

  var name = "John";
  var greeting = "Hello, " + name + "!";

• ES6: Introduced template literals.

  let name = "John";
  let greeting = `Hello, ${name}!`;

3. Arrow Functions

• ES5:

  function(x) {
      return x * x;
  }

• ES6: Introduced arrow functions, which provide a shorter syntax for writing functions.

  x => x * x;

4. Classes

• ES5: Prototypal inheritance was used to simulate class-like behavior.

• ES6: Introduced a class keyword for object-oriented programming.

5. Enhanced Object Literals

• ES5: Objects were defined with key-value pairs.

• ES6: Provides shorter syntax for defining objects.

  let name = "John";
  let obj = {name}; // Equivalent to {name: name}

6. Destructuring

• ES5: No direct way.

• ES6: Allows for extracting multiple properties from an object or array in a more concise manner.

  let person = { firstName: "John", lastName: "Doe" };
  let { firstName, lastName } = person;

7. Default + Rest + Spread

• ES5: Handling default, rest, or spread was done manually.

• ES6: Introduced default values for function parameters, the ...rest parameter for collecting arguments, and the ...spread operator for spreading an array or object.

8. Modules

• ES5: No native module system. Developers relied on third-party solutions like CommonJS or AMD.

• ES6: Introduced the native module system using import and export.

9. Promises

• ES5: Callbacks were used for asynchronous operations.

• ES6: Introduced Promises for handling asynchronous operations in a more structured manner.

10. For-of Loop

• ES5: Looped over arrays using for or forEach.

• ES6: Introduced the for-of loop for iterating over iterable objects.

11. Set, Map, WeakSet, WeakMap

• ES5: No direct equivalents.

• ES6: Introduced these collection types for handling data.

12. Symbol Type

• ES5: No such type.

• ES6: Introduced the Symbol type for creating unique identifiers.

13. Array and Object Methods

• ES5: Limited set of methods.

• ES6: Introduced new methods like Array.from, Array.of, Object.assign, and many others.

14. Parameter Handling

• ES5: Parameters were accessed using the arguments object.

• ES6: Direct support for handling parameters with rest, default, and spread.

This is a high-level comparison. The transition from ES5 to ES6 brought in many other detailed changes and improvements that greatly enhanced the JavaScript language. Over time, subsequent versions (like ES7/ES2016 and later) added even more features.

Thank you for reading. I encourage you to follow me on Twitter where I regularly share content about JavaScript and React, as well as contribute to open-source projects. I am currently seeking a remote job or internship.

Twitter: https://twitter.com/Diwakar_766

GitHub: https://github.com/DIWAKARKASHYAP

Portfolio: https://diwakar-portfolio.vercel.app/