ES5 vs ES6 in JavaScript. 14 big😱 changes⚠️
Tags: javascript, webdev, programming, career
Published: 2023-08-11 16:45:10

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 `+`.
  ```javascript
  var name = "John";
  var greeting = "Hello, " + name + "!";
  ```
  
- **ES6**: Introduced template literals.
  ```javascript
  let name = "John";
  let greeting = `Hello, ${name}!`;
  ```

### 3. **Arrow Functions**
- **ES5**:
  ```javascript
  function(x) {
      return x * x;
  }
  ```
  
- **ES6**: Introduced arrow functions, which provide a shorter syntax for writing functions.
  ```javascript
  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.
  ```javascript
  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.
  ```javascript
  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/