ECMAScript 2015 (ES6 / ES2015)

ECMAScript 2015, commonly referred to as ES6 or ES2015, marked a significant update to the JavaScript language, introducing a wealth of new features designed to improve the language's syntax for writing complex applications, enhance its capabilities, and make JavaScript development more efficient and enjoyable. This version represented the biggest update to the language since its inception and addressed many of the shortcomings of previous versions. Here are some of the key features introduced in ES2015, along with examples:

1. Let and Const

let and const introduce block-scoped variable declarations, which are more predictable compared to var, which is function-scoped.

let x = 10;
if (x === 10) {
  let x = 20; // This 'x' is local to the block.
  console.log(x); // 20
}
console.log(x); // 10

const y = 30;
// y = 40; // This will throw an error because 'y' is a constant.

2. Arrow Functions

Arrow functions provide a more concise syntax for writing function expressions and lexically bind the this value.

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

const numbers = [1, 2, 3];
const squares = numbers.map(number => number * number);
console.log(squares); // [1, 4, 9]

3. Template Literals

Template literals allow for embedded expressions and multi-line strings without concatenation.

const name = "John";
console.log(`Hello, ${name}!`); // Hello, John!

const multiLine = `This is a string
that spans multiple
lines.`;
console.log(multiLine);

4. Classes

ES2015 introduced class syntax as syntactic sugar over JavaScript's existing prototype-based inheritance, making it easier to work with and understand.

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

const person = new Person("Jane");
person.greet(); // Hello, my name is Jane!

5. Modules

ES2015 standardized the syntax for importing and exporting modules, making it easier to break up code into reusable modules.

// lib.js
export function greet(name) {
  return `Hello, ${name}!`;
}

// app.js
import { greet } from './lib.js';
console.log(greet('John')); // Hello, John!

6. Promises

Promises are introduced as a way to handle asynchronous operations, allowing for more manageable and readable asynchronous code.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data loaded"), 1000);
});

promise.then(data => console.log(data)); // Data loaded

7. Destructuring

Destructuring allows for easier extraction of data from arrays or objects.

const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

const { firstName, lastName } = { firstName: "John", lastName: "Doe" };
console.log(firstName); // John
console.log(lastName); // Doe

8. Default, Rest, and Spread Parameters

ES2015 introduced default parameters for functions, rest parameters to handle variable numbers of arguments, and the spread operator for arrays and objects.

function greet(message, name = "John") {
  console.log(`${message}, ${name}!`);
}
greet("Hello"); // Hello, John!

function sum(...numbers) {
  return numbers.reduce((acc, number) => acc + number, 0);
}
console.log(sum(1, 2, 3)); // 6

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

ECMAScript 2015 (ES6) introduced significant new syntax and features to JavaScript, making the language more powerful, expressive, and easier to work with for developers. These features have been widely adopted and are now considered foundational to modern JavaScript development.