ES6 Javascript Features

ES6 (ECMAScript 2015)

ES6 (ECMAScript 2015) introduced several new features and improvements to JavaScript, enhancing its functionality and making code more efficient and easier to write. Here are some of the key ES6 features with examples:

1. Let and Const

let and const introduce block-scoped variables, replacing var which has function-scoping.

Example:

let name = 'John';
const age = 30;

if (true) {
  let name = 'Jane'; // block-scoped variable
  console.log(name);  // Output: Jane
}

console.log(name);    // Output: John

2. Arrow Functions

A shorter syntax for writing functions. It also lexically binds the this context.

Example:

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

3. Template Literals

Template literals allow embedding expressions inside string literals, improving string concatenation and making multi-line strings easier to write.

Example:

const name = 'John';
const greeting = `Hello, ${name}!`;  // Using backticks
console.log(greeting); // Output: Hello, John!

4. Destructuring Assignment

Destructuring allows for unpacking values from arrays or properties from objects into distinct variables.

Example:

// Array Destructuring
const [a, b] = [1, 2];
console.log(a); // Output: 1

// Object Destructuring
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name); // Output: Alice

5. Default Parameters

Functions can have default parameter values that are used if no arguments are provided or if undefined is passed.

Example:

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

greet();            // Output: Hello, Guest!
greet('John');      // Output: Hello, John!

6. Spread and Rest Operators (...)

Spread expands an array or object into individual elements, while rest combines individual elements into an array.

Example:

// Spread Operator
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // Output: [1, 2, 3, 4]

// Rest Operator
function sum(...args) {
  return args.reduce((acc, curr) => acc + curr);
}
console.log(sum(1, 2, 3)); // Output: 6

7. Promises

Promises make it easier to work with asynchronous code by avoiding callback hell.

Example:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success!'), 1000);
});

myPromise.then(result => console.log(result)); // Output: Success!

8. Classes

ES6 introduced a class-based syntax for defining objects and inheritance, making JavaScript more familiar to developers from other OOP languages.

Example:

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

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

const john = new Person('John', 30);
john.greet(); // Output: Hello, my name is John.

9. Modules (Import/Export)

ES6 allows you to split your code into reusable modules using export and import.

Example:

// module.js
export const greet = () => console.log("Hello");

// main.js
import { greet } from './module';
greet(); // Output: Hello

These features significantly improved the development experience in JavaScript, making the language more powerful, readable, and maintainable.