Mastering ES6+ Features in JavaScript

ECMAScript 2015 (ES6) was the most significant update to JavaScript since its inception. It introduced numerous syntax enhancements and features that made code cleaner and more expressive. Let us review the key features that every developer should master.

1. Arrow Functions

Arrow functions offer a shorter syntax for writing functions. They also do not bind their own this context, inheriting it from the parent scope instead. This makes them ideal for callbacks.

// ES5
var multiply = function(x, y) { return x * y; };
// ES6
const multiply = (x, y) => x * y;

2. Template Literals

Template literals use backticks (`) instead of quotes, allowing for multi-line strings and string interpolation using the ${expression} syntax.

const name = "Nirali";
const greeting = `Hello, ${name}!
Welcome to CodeCompile.`;

3. Destructuring Assignment

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables in a clean, readable line.

const person = { first: 'Nirali', last: 'Patel', age: 24 };
const { first, last } = person; // destructuring object
const coords = [10, 20];
const [x, y] = coords; // destructuring array

4. Spread and Rest Operators

Represented by three dots (...), the spread operator expands elements of an array or object, while the rest operator condenses multiple elements into a single array.

// Spread: copying arrays
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// Rest: gathering arguments
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

5. Default Parameters

You can specify default values for function parameters, which are used if the argument is omitted or is undefined.

const greet = (name = "Developer") => `Hello ${name}`;

6. Classes

ES6 introduced class syntax, which acts as a sugar layer over prototype-based inheritance, making object-oriented design in JavaScript look familiar to developers from other languages.

class Rectangle {
  constructor(w, h) { this.w = w; this.h = h; }
  getArea() { return this.w * this.h; }
}