[JS Basics] ES6+ Features: What You Need to Know to Write Modern JavaScript

You've probably heard a lot about ES6, but did you know that the JavaScript world has gone much further with later versions, often collectively called ES6+? These are not just minor updates, but a revolution, equipping developers with powerful tools to write cleaner, more efficient, and more maintainable code.

In this article, let's embark on a journey to discover the breakthrough features of ES6+ that are shaping the way we write modern JavaScript.

ES6 (ECMAScript 2015): The Foundation for a New Era

ES6 is considered the biggest and most important update in JavaScript history. It laid a solid foundation for the language's development.

let and const: Say Goodbye to var

Previously, var was the only way to declare variables, but it came with unpredictable behaviors like hoisting and function/global scope. ES6 introduced let and const, bringing block scope (variables only exist within the {} block containing them), making code more predictable and less error-prone.

• let: Allows you to declare variables that can be reassigned.
• const: Used to declare constants whose value cannot be changed after the first assignment.

let name = 'Alice'
name = 'Bob' // Valid

const PI = 3.14
// PI = 3.14159; // Error!

Arrow Functions: Concise Syntax, Intuitive this

Arrow functions provide a shorter syntax for writing functions, especially useful for anonymous functions. More importantly, they do not create their own this but inherit it from the surrounding context, solving many headaches related to this in regular functions.

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

// Arrow function
const add = (a, b) => a + b

Template Literals: Smarter Strings

String concatenation and variable interpolation become simpler and more readable than ever with Template Literals, using backticks (`) instead of single or double quotes.

const userName = 'John'
const greeting = `Hello, ${userName}!`
console.log(greeting) // "Hello, John!"

Destructuring, Rest & Spread: Data Manipulation Masters

Working with data is now much more convenient.

• Destructuring Assignment: "Breaks apart" the structure of objects or arrays to quickly extract needed values.
• Rest Parameters: Gathers multiple arguments into a single array.
• Spread Operator: "Spreads" the elements of an array or properties of an object.

// Destructuring
const person = { name: 'Jane', age: 30 }
const { name, age } = person

// Rest & Spread
const numbers = [1, 2, 3, 4, 5]
const [one, two, ...rest] = numbers // Rest
const newNumbers = [0, ...numbers, 6] // Spread

Modules, Classes, and Promises: Taking JavaScript to the Next Level

These features truly elevate JavaScript, putting it on par with other modern programming languages.

• Modules (import/export): ES6 brings an official module system, allowing you to split code into separate files and reuse them—a basic feature of modern languages.
• Classes: Provide a cleaner, more familiar "syntactic sugar" for creating objects and handling inheritance, instead of working directly with prototypes.
• Promises: Standardize asynchronous operations, helping you escape "callback hell" and write more readable, manageable async code.

ES7 (ECMAScript 2016) & ES8 (ECMAScript 2017): Refining the Experience

After the ES6 revolution, subsequent versions focused on adding and refining features.

Array includes() Method

A simple and intuitive way to check if an element exists in an array, Array.prototype.includes() returns true or false.

const animals = ['cat', 'dog', 'mouse']
console.log(animals.includes('dog')) // true

async/await: Write Asynchronous Code Like Synchronous

One of the most anticipated features. async/await is built on Promises, allowing you to write asynchronous code with syntax that looks synchronous, making code much easier to read and understand.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error('Error:', error)
  }
}

Object.values() and Object.entries()

Useful methods to get an array of values (Object.values) or [key, value] pairs (Object.entries) from an object.

ES9 (ECMAScript 2018) to ES11 (ECMAScript 2020): Powerful Utilities

Rest/Spread for Objects

Rest and Spread are extended to work with objects, making copying and merging objects easier.

const defaults = { mode: 'light', volume: 50 }
const custom = { mode: 'dark', notification: true }

const settings = { ...defaults, ...custom }
// { mode: 'dark', volume: 50, notification: true }

Promise finally() Method

Promise.prototype.finally() lets you execute code after a Promise settles, regardless of whether it was fulfilled or rejected.

Array flat() Method

• flat(): Creates a new array by "flattening" nested arrays to a specified depth.
• flatMap(): Like map() but then automatically flat()s the result to depth 1.

Optional Chaining (?.)

A real lifesaver! Optional chaining lets you safely access deeply nested object properties without checking each level. If a reference is null or undefined, the expression short-circuits and returns undefined.

const user = {
  info: {
    // address: { street: '123 ABC' }
  },
}

// Instead of: if (user && user.info && user.info.address)
const street = user.info?.address?.street // undefined

Nullish Coalescing Operator (??)

This operator returns the right-hand operand when the left-hand operand is null or undefined (not other "falsy" values like 0, '', false).

const volume = 0
const currentVolume = volume ?? 50 // 0 (because 0 is not null/undefined)

ES12 (ECMAScript 2021): Looking to the Future

The latest JavaScript versions continue to bring valuable improvements.

String replaceAll() Method

String.prototype.replaceAll() provides a simple way to replace all occurrences of a substring in a string, without needing regular expressions.

Promise.any() Method

Promise.any() takes an array of Promises and resolves as soon as any one of them is fulfilled. If all fail, it returns an AggregateError.

Non-mutating Array Methods

New methods like toSorted(), toReversed(), and toSpliced() are introduced. They work like the old versions (sort(), reverse(), splice()) but instead of mutating the original array, they return a new modified array, supporting the trend of immutability.

Array at() Method

Array.prototype.at() provides an easy way to access elements from the end of an array using negative indices, similar to Python.

const arr = [10, 20, 30, 40]
console.log(arr.at(-1)) // 40

Conclusion: JavaScript is Evolving

The journey through ES6+ features shows that JavaScript is constantly evolving and improving. Mastering and applying these modern tools not only helps you write better code, but also opens up new possibilities and keeps your skills sharp in the ever-changing world of web development.

Don't hesitate—start using ES6+ today and feel the difference!