ES6 JavaScript Features

JavaScript has changed a lot over the years, but nothing reshaped the way developers write code quite like ES6. Officially known as ECMAScript 2015, this update introduced a wave of features that made JavaScript cleaner, more readable, and far more powerful. Even now, in 2026, ES6 remains the foundation that almost every modern framework, library, and codebase is built on. If you open any React, Vue, or Node.js project today, you will find ES6 syntax everywhere. Understanding these features is not optional anymore. It is the baseline expectation for any developer who wants to write professional JavaScript code.

In this article, we will walk through the ES6 features that every developer actually uses on a daily basis. Instead of listing every technical detail, we will focus on practical examples, real use cases, and tips that help you apply these concepts immediately in your own projects.

Why ES6 Still Matters in 2026

Even though newer versions of JavaScript have been released since 2015, ES6 remains the biggest turning point in the language’s history. It solved long standing problems with variable scoping, function syntax, and object handling. Frameworks like React and Angular assume you already know ES6, and job interviews almost always test these concepts directly. Learning ES6 properly is like learning to drive a manual car before an automatic. It gives you a deeper understanding of how JavaScript actually works under the hood.

let and const Instead of var

One of the very first things developers notice when moving to ES6 is the introduction of let and const. Before ES6, var was the only way to declare variables, and it came with confusing scoping behavior. Variables declared with var were function scoped, which often led to unexpected bugs, especially inside loops and conditional blocks.

With let, variables are block scoped, meaning they only exist within the curly braces they are defined in. This small change eliminates a huge category of bugs.

Example

for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 100)
}

This code correctly prints 0, 1, 2, 3, 4 because each loop iteration gets its own scoped value of i. If you tried the same thing with var, you would get 5 five times, which confuses many beginners.

const is used when you do not want the variable to be reassigned. It does not mean the value is completely frozen, especially with objects and arrays, but it prevents accidental reassignment of the variable itself.

Practical Tip

Use const by default for everything. Only switch to let when you know the value will change later. This habit alone will make your code more predictable and easier to debug.

Arrow Functions

Arrow functions changed the way developers write functions in JavaScript. They are shorter, cleaner, and solve one of the most confusing issues in JavaScript, which is the behavior of the this keyword.

Traditional function

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

Arrow function

const add = (a, b) => a + b

Arrow functions do not bind their own this value. Instead, they inherit this from the surrounding scope. This is extremely useful inside classes and callbacks.

Example inside a class

class Timer {
constructor() {
this.seconds = 0
}
start() {
setInterval(() => {
this.seconds++
console.log(this.seconds)
}, 1000)
}
}

If a regular function was used instead of an arrow function here, this would not refer to the Timer instance, and the code would break.

Template Literals

Before ES6, combining strings and variables required messy concatenation using plus signs. Template literals solved this by allowing you to embed expressions directly inside strings using backticks.

Example

const name = “Sarah”
const age = 28
console.log(Hello, my name is ${name} and I am ${age} years old)

Template literals also support multi line strings without needing special characters, which makes writing HTML templates or long messages much easier.

Real World Use Case

Template literals are widely used in modern frontend frameworks to dynamically inject data into components, making UI rendering more readable and maintainable.

Destructuring Assignment

Destructuring allows you to extract values from arrays or objects and assign them to variables in a single line. This feature is used constantly in React projects, especially when working with props and state.

Object destructuring example

const user = { name: “John”, age: 30, country: “USA” }
const { name, age } = user

Array destructuring example

const colors = [“red”, “green”, “blue”]
const [first, second] = colors

Destructuring makes code shorter and easier to understand, especially when dealing with complex objects returned from APIs.

Default Parameters

Default parameters allow you to assign a fallback value to a function parameter if no value is provided. This eliminates the need for manual checks inside functions.

Example

function greet(name = “Guest”) {
console.log(Welcome, ${name})
}

greet()
greet(“Emma”)

This small feature reduces bugs and makes function behavior more predictable, especially in larger applications where functions are reused across different modules.

The Spread and Rest Operators

The spread operator and rest operator use the same three dot syntax but serve different purposes. Spread expands elements, while rest collects them.

Spread example

const numbers = [1, 2, 3]
const newNumbers = […numbers, 4, 5]

This creates a new array without mutating the original one, which is extremely important when working with state management in frameworks like React.

Rest example

function sum(…nums) {
return nums.reduce((total, num) => total + num, 0)
}

sum(1, 2, 3, 4)

The rest operator allows functions to accept an unlimited number of arguments without manually handling the arguments object.

Enhanced Object Literals

ES6 made it easier to create objects by allowing shorthand property names and method definitions.

Example

const name = “Alex”
const age = 25

const person = {
name,
age,
greet() {
console.log(Hi, I am ${this.name})
}
}

This shorthand syntax reduces repetition and keeps object definitions clean, especially when working with data coming from forms or APIs.

Classes in JavaScript

Before ES6, JavaScript used prototype based inheritance, which many developers found confusing. ES6 introduced class syntax, making object oriented programming in JavaScript feel more familiar to developers coming from languages like Java or Python.

Example

class Animal {
constructor(name) {
this.name = name
}
speak() {
console.log(${this.name} makes a sound)
}
}

class Dog extends Animal {
speak() {
console.log(${this.name} barks)
}
}

const dog = new Dog(“Rex”)
dog.speak()

Classes are widely used in component based frameworks and backend frameworks like Node.js when structuring larger applications.

H2: Promises for Better Asynchronous Code

Handling asynchronous operations before ES6 often led to deeply nested callbacks, commonly known as callback hell. Promises solved this by providing a cleaner way to handle asynchronous tasks.

Example

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(“Data loaded successfully”)
}, 1000)
})
}

fetchData().then(result => console.log(result))

Promises paved the way for async and await, which is now the standard way developers handle asynchronous operations in modern JavaScript applications.

Modules Using Import and Export

ES6 introduced native module support, allowing developers to split code into multiple files and import only what they need. This is fundamental to how modern JavaScript projects are structured today.

Exporting a function

export function add(a, b) {
return a + b
}

Importing a function

import { add } from “./math.js”

Modules improve code organization, reusability, and maintainability, especially in large scale applications with multiple contributors.

Why These Features Work So Well Together

What makes ES6 so powerful is not just each individual feature, but how well they work together. Destructuring pairs naturally with function parameters. Arrow functions simplify callbacks used inside promises. Template literals make working with dynamic data inside components much smoother. Once you understand these features individually, you start seeing how modern JavaScript code is built around them as a foundation rather than an afterthought.

Final Thoughts

ES6 completely transformed JavaScript from a sometimes frustrating scripting language into a modern, developer friendly programming language. Whether you are building a simple website or a large scale application, these features are not optional extras. They are the tools you will use every single day as a developer. If you master let and const, arrow functions, destructuring, template literals, classes, and promises, you will already be using the most important parts of modern JavaScript with confidence. The best way to truly understand these features is to practice writing small projects using them intentionally, rather than just reading about them. Over time, this syntax will become second nature, and you will find yourself writing cleaner, more efficient code without even thinking about it.