JavaScript ES5 vs ES6: A Comparative Overview

Here’s a structured list comparing ES5 and ES6 code for each feature described in your document. Each example shows how ES6 made JavaScript simpler, clearer, and more expressive.

---

1. Let and Const

// ES5
var x = 10;
var y = 20;
x = 15;
y = 30; // Works, but you can accidentally reassign constants

// ES6
let x = 10;
const y = 20;
x = 15; // OK
y = 30; // Error: Assignment to constant variable

2. Arrow Functions

// ES5
function add(a, b) {
  return a + b;
}

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

3. Template Literals

// ES5
var name = 'Donny';
console.log('Hello, ' + name + '!');

// ES6
const name = 'Donny';
console.log(`Hello, ${name}!`);

4. Default Parameters

// ES5
function greet(name) {
  var actualName = name || 'Guest';
  console.log('Hello, ' + actualName);
}

// ES6
function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

5. Destructuring Assignment

// ES5
var arr = [10, 20];
var a = arr[0];
var b = arr[1];

var person = { name: 'Donny', age: 30 };
var name = person.name;
var age = person.age;

// ES6
const [a, b] = [10, 20];
const { name, age } = { name: 'Donny', age: 30 };

6. Spread and Rest Operators

// ES5
var nums = [1, 2, 3];
var more = nums.concat([4, 5]); // Spread effect emulated

function sum() {
  var args = Array.prototype.slice.call(arguments);
  return args.reduce(function(a, b) { return a + b; });
}

// ES6
const nums = [1, 2, 3];
const more = [...nums, 4, 5]; // Spread

function sum(...args) {
  return args.reduce((a, b) => a + b);
}

7. Classes

// ES5
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log("Hi, I'm " + this.name);
};

var p = new Person('Donny');
p.greet();

// ES6
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

const p = new Person('Donny');
p.greet();

8. Modules

// ES5 (no native module system)
var math = {};
math.add = function(a, b) { return a + b; };

// ES6
// math.js
export const add = (a, b) => a + b;
// main.js
import { add } from './math.js';

9. Promises

// ES5 (callback)
function getData(cb) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com');
  xhr.onload = function() {
    if (xhr.status === 200) cb(null, xhr.responseText);
    else cb('Error');
  };
  xhr.send();
}

getData(function(err, data) {
  if (err) console.error(err);
  else console.log(data);
});

// ES6
fetch('https://api.example.com')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

10. Enhanced Object Literals

// ES5
var name = 'Donny';
var age = 30;
var person = {
  name: name,
  age: age,
  greet: function() {
    console.log("Hi, I'm " + this.name);
  }
};

// ES6
const name = 'Donny';
const age = 30;
const person = {
  name,
  age,
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

11. Iterators and for…of Loop

// ES5
var arr = [10, 20, 30];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// ES6
const arr = [10, 20, 30];
for (const val of arr) {
  console.log(val);
}

12. Map and Set

// ES5
var map = {};
map['name'] = 'Donny'; // No true map structure
var arr = [1, 2, 2, 3];
var unique = arr.filter(function(v, i, a) { return a.indexOf(v) === i; });
console.log(unique); // [1, 2, 3]

// ES6
const map = new Map();
map.set('name', 'Donny');

const set = new Set([1, 2, 2, 3]);
console.log(set); // Set { 1, 2, 3 }