JavaScript ES5 and ES6

JavaScript has evolved dramatically over the years, and one of the biggest milestones in its history was the release of ES6 (ECMAScript 2015). Before ES6, developers primarily worked with ES5 (ECMAScript 5), which was finalized in 2009.

If you’re learning JavaScript or working with modern frameworks like React, understanding the difference between ES5 and ES6 is essential. 

 

1. What is ES5 in JavaScript?

ECMAScript 5 (ES5) is the fifth edition of the ECMAScript specification. Released in 2009, ES5 brought stability and standardization to JavaScript across browsers.

 
Key Features of ES5

* ‘var’ for variable declaration

* Function-scoped variables

* Strict mode (‘”use strict”‘)

* JSON support

* Array methods like:

  * `forEach()`

  * `map()`

  * `filter()`

  * `reduce()`

* `Object.defineProperty()`

ES5 made JavaScript more reliable but still had limitations in scalability and structure.

2. What is ES6 in JavaScript?

ECMAScript 2015 (commonly called ES6) introduced major enhancements to JavaScript. It modernized the language with cleaner syntax and powerful features.

Key Features of ES6

* ‘let’ and ‘const’

* Arrow functions

* Template literals

* Destructuring

* Classes

* Modules (‘import’ / ‘export’)

* Spread and Rest operators

* Default parameters

ES6 significantly improved readability, maintainability, and large-scale application development.

3. Differences between ES5 and ES6

1. Variable Declaration: ‘var’ vs ‘let’ and ‘const’

ES5 – Using ‘var’

var name = “John”;

 

What are the problems with ‘var’:

  •  It is function-scoped (not block-scoped)

     

  •  It can be redeclared
  •  It can be hoisted with `undefined`

Example:

if (true) {

  var x = 10;

}

console.log(x); // 10

The variable leaks outside the block.

ES6 – Using ‘let” and ‘const’

let age = 25;

const PI = 3.14;

* ‘let’ → It is block-scoped, can be reassigned

* ‘const’ → It is block-scoped, cannot be reassigned

if (true) {

  let x = 10;

}

console.log(x); // Error

 

 

2. Functions: Traditional vs Arrow Functions

ES5 Function

function add(a, b) {

  return a + b;

}

 

ES6 Arrow Function

const add = (a, b) => a + b;

Why Arrow Functions Are Better

  •  It has shorter syntax

     

  •  Arrow functions provide cleaner and more concise callbacks
  •  Arrow functions use lexical this, which means they inherit the this value from their surrounding (enclosing) scope instead of creating their own this binding

Example:

numbers.map(num => num * 2);

Arrow functions reduce boilerplate code and improve clarity.

 

3. Template Literals vs String Concatenation

ES5 String Concatenation

var name = “John”;

var message = “Hello ” + name + “!”;

 

ES6 Template Literals

let name = “John”;

let message = `Hello ${name}!`;

 

Benefits:

  • Template literals make variable interpolation easier by allowing you to embed expressions directly inside strings using ${} syntax instead of concatenation.
  • They support multi-line strings without the need for escape characters (\n) or string concatenation.
  • Overall, template literals improve code readability by making strings cleaner, more structured, and easier to understand.

let text = ‘

  This is

  a multi-line

  string.

‘;

 

4. Object Enhancements

ES5 Object

var person = {

  name: name,

  age: age

};

ES6 Object Shorthand

const person = { name, age };

 

ES6 also allows method shorthand:

const user = {

  name: “Sam”,

  greet() {

    console.log(“Hello”);

  }

};

This reduces repetition and improves readability.

 

5. Destructuring (New in ES6)

Destructuring was not available in ES5.

ES6 Object Destructuring

const person = { name: “John”, age: 30 };

const { name, age } = person;

 

Array Destructuring

const [a, b] = [10, 20];

 

Destructuring makes code cleaner and avoids repetitive property access.

 

6. Classes: Constructor Functions vs Class Syntax

ES5 Constructor Function

function Person(name) {

  this.name = name;

}

Person.prototype.greet = function() {

  console.log(“Hello ” + this.name);

};

 

ES6 Class

class Person {

  constructor(name) {

    this.name = name;

  }

  greet() {

    console.log(`Hello ${this.name}`);

  }

}

Benefits of ES6 Classes:

  •  It provides cleaner OOP structure
  •  It provides easier inheritance using ‘extends’
  •  It improved readability
7. Modules

ES5 did not have a built-in module system. 

ES6 Modules

// export

export const name = “John”;

// import

import { name } from “./file.js”;

 

Benefits:

  •  It provides better code organization
  •  It provides reusable components
  •  It provides Scalable architecture
 

 

8. Spread and Rest Operators

ES5 Array Copy

var arr1 = [1, 2];

var arr2 = arr1.concat([3, 4]);

 

ES6 Spread Operator

const arr1 = [1, 2];

const arr2 = […arr1, 3, 4];

 

Rest Parameter

function sum(…numbers) {

  return numbers.reduce((a, b) => a + b);

}

These features simplify array and function handling.

 

 

9. Default Parameters

ES5

function greet(name) {

  name = name || “Guest”;

}

 

ES6

function greet(name = “Guest”) {

  return `Hello ${name}`;

}

It provides cleaner and more reliable.

 
Scroll to Top