How JavaScript Evolved from ES1 to Modern ES6+

// ES1 (1997): The foundation of JavaScript
// All of these features still work identically in 2026
 
// Variables (only var existed)
var greeting = "Hello, World!";
var count = 42;
var isValid = true;
 
// Functions
function add(a, b) {
  return a + b;
}
 
// Control flow
if (count > 40) {
  greeting = "Count is high!";
}
 
// Loops
for (var i = 0; i < 5; i++) {
  // loop body
}
 
// Objects (literal syntax)
var person = {
  name: "Alice",
  age: 30
};
 
// Arrays
var colors = ["red", "green", "blue"];

// ES3 (1999): Made JavaScript practical
 
// Regular expressions (new in ES3)
var emailPattern = /^[\w.-]+@[\w.-]+\.\w{2,}$/;
var isValidEmail = emailPattern.test("user@example.com"); // true
 
// try/catch error handling (new in ES3)
try {
  var data = JSON.parse("invalid json");
} catch (error) {
  // Handle the error gracefully instead of crashing
  var data = { fallback: true };
}
 
// switch statement (formalized in ES3)
function getHttpMessage(statusCode) {
  switch (statusCode) {
    case 200: return "OK";
    case 404: return "Not Found";
    case 500: return "Internal Server Error";
    default: return "Unknown Status";
  }
}

// ES5 (2009): Array methods that changed everything
var inventory = [
  { name: "Widget A", price: 25, quantity: 100 },
  { name: "Widget B", price: 50, quantity: 0 },
  { name: "Widget C", price: 75, quantity: 45 },
  { name: "Widget D", price: 30, quantity: 200 }
];
 
// .filter() - select items matching a condition
var inStock = inventory.filter(function (item) {
  return item.quantity > 0;
});
 
// .map() - transform each item
var priceList = inStock.map(function (item) {
  return item.name + ": $" + item.price;
});
// ["Widget A: $25", "Widget C: $75", "Widget D: $30"]
 
// .reduce() - compute a single value from an array
var totalValue = inventory.reduce(function (sum, item) {
  return sum + (item.price * item.quantity);
}, 0);
// 2500 + 0 + 3375 + 6000 = 11875
 
// .forEach() - iterate without creating a new array
inStock.forEach(function (item) {
  console.log(item.name + " has " + item.quantity + " units");
});
 
// JSON (finally built-in instead of requiring a library)
var serialized = JSON.stringify({ user: "Alice", score: 95 });
var parsed = JSON.parse(serialized);
 
// Strict mode - catches silent errors
"use strict";
// undeclaredVar = 10; // ReferenceError! (silently creates global in non-strict)

// The problem with var
for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i); // Prints 3, 3, 3 (not 0, 1, 2!)
  }, 100);
}
// var is function-scoped, so all callbacks share the same 'i'
 
// The fix with let (ES6)
for (let j = 0; j < 3; j++) {
  setTimeout(function () {
    console.log(j); // Prints 0, 1, 2 (correct!)
  }, 100);
}
// let is block-scoped, so each iteration gets its own 'j'
 
// const for values that should not be reassigned
const API_BASE_URL = "https://api.example.com";
const MAX_RETRIES = 3;
// API_BASE_URL = "something else"; // TypeError: Assignment to constant variable

// ES5: function expressions (verbose)
var doubled = [1, 2, 3, 4].map(function (num) {
  return num * 2;
});
 
// ES6: arrow functions (concise)
const doubled = [1, 2, 3, 4].map((num) => num * 2);
 
// Multi-line arrow function
const processOrder = (items) => {
  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
  const tax = subtotal * 0.08;
  const total = subtotal + tax;
  return { subtotal, tax, total };
};

// ES5: String concatenation (error-prone, hard to read)
var message = "Hello, " + name + "! You have " + count + " new messages.\n" +
  "Your account balance is $" + balance.toFixed(2) + ".";
 
// ES6: Template literals (readable, expressive)
const message = `Hello, ${name}! You have ${count} new messages.
Your account balance is $${balance.toFixed(2)}.`;

// Object destructuring
const user = { name: "Alice", age: 28, role: "developer", city: "Portland" };
 
// ES5: Manual extraction
var name = user.name;
var age = user.age;
var role = user.role;
 
// ES6: Destructuring (one line)
const { name, age, role } = user;
 
// Array destructuring
const coordinates = [45.5152, -122.6784];
const [latitude, longitude] = coordinates;
 
// Function parameter destructuring
function formatUser({ name, role, city }) {
  return `${name} is a ${role} in ${city}`;
}
formatUser(user); // "Alice is a developer in Portland"

// Array.includes() - cleaner than indexOf
const fruits = ["apple", "banana", "cherry"];
 
// ES5: Awkward
if (fruits.indexOf("banana") !== -1) { /* found */ }
 
// ES2016: Clean
if (fruits.includes("banana")) { /* found */ }
 
// Exponentiation operator
const squared = 5 ** 2; // 25 (replaces Math.pow(5, 2))

// async/await: The biggest quality-of-life improvement since ES6
 
// ES6 Promises (readable but chains get long)
function fetchUserData(userId) {
  return fetch("/api/users/" + userId)
    .then(function (response) { return response.json(); })
    .then(function (user) { return fetch("/api/posts?author=" + user.id); })
    .then(function (response) { return response.json(); })
    .catch(function (error) { console.error("Failed:", error); });
}
 
// ES2017 async/await (reads like synchronous code)
async function fetchUserData(userId) {
  try {
    const userResponse = await fetch(`/api/users/${userId}`);
    const user = await userResponse.json();
 
    const postsResponse = await fetch(`/api/posts?author=${user.id}`);
    const posts = await postsResponse.json();
 
    return { user, posts };
  } catch (error) {
    console.error("Failed:", error);
    return null;
  }
}

// Optional chaining (?.) - safe property access
const user = { profile: { address: null } };
 
// ES5: Verbose null checking
var city = user && user.profile && user.profile.address && user.profile.address.city;
 
// ES2020: Optional chaining
const city = user?.profile?.address?.city; // undefined (no error)
 
// Nullish coalescing (??) - default values for null/undefined only
const port = process.env.PORT ?? 3000;
// Uses 3000 only if PORT is null or undefined
// Unlike ||, it does NOT trigger for 0, "", or false

// ES2022: Top-level await (no async wrapper needed in modules)
const config = await fetch("/api/config").then(r => r.json());
 
// ES2022: .at() method for arrays
const items = ["first", "second", "third", "last"];
items.at(-1);  // "last" (negative indexing!)
items.at(0);   // "first"
 
// ES2023: Immutable array methods
const original = [3, 1, 4, 1, 5];
const sorted = original.toSorted();     // [1, 1, 3, 4, 5] (original unchanged!)
const reversed = original.toReversed(); // [5, 1, 4, 1, 3] (original unchanged!)
const modified = original.with(2, 99);  // [3, 1, 99, 1, 5] (original unchanged!)
 
// ES2024: Object.groupBy()
const people = [
  { name: "Alice", dept: "Engineering" },
  { name: "Bob", dept: "Marketing" },
  { name: "Charlie", dept: "Engineering" },
  { name: "Diana", dept: "Marketing" }
];
 
const byDept = Object.groupBy(people, (person) => person.dept);
// { Engineering: [Alice, Charlie], Marketing: [Bob, Diana] }