JavaScript ES6 Features Explained: A Complete Beginner’s Guide

Have you ever looked at two pieces of JavaScript code that do the exact same thing, but one looks short and clean while the other looks long and messy? Chances are, the clean one is using ES6.

Think of ES6 like a phone update. Your old phone still makes calls and sends texts, but the new update gives you a better camera, faster apps, and shortcuts that save you time every day. ES6 did the same thing for JavaScript. It didn’t replace the language — it just gave developers better, shorter, and safer tools to write the same logic.

In this guide, we’ll go through every major ES6 feature, one at a time, with simple examples. No jargon left unexplained, no assumptions that you already “just know” this stuff. By the end, you’ll understand why almost every modern JavaScript tutorial, framework (like React), and job posting expects you to know ES6.

What Is ES6, Exactly?

ES6 stands for ECMAScript 6. Let’s break that word down because it sounds scarier than it is.

• ECMAScript is the official rulebook that JavaScript follows. Think of it like a grammar textbook for the JavaScript language.
• 6 simply means it’s the 6th major version of that rulebook, released in 2015. That’s why you’ll also hear it called ES2015.

So when someone says “ES6 features,” they just mean: the new grammar rules and shortcuts added to JavaScript in 2015 (and the version name people still use today, even though newer updates like ES2020 and ES2023 have come since).

Why Did JavaScript Need ES6?

Before 2015, JavaScript worked fine, but writing it often felt clunky. Developers had to write extra lines of code just to do simple things — like combining a name and a message into one sentence, or safely creating a variable that wouldn’t cause weird bugs.

ES6 fixed a lot of these pain points at once. It was such a big update that many developers consider it the moment JavaScript grew up into a “real” programming language.

If you’re still shaky on the basics of variables in JavaScript, it’s worth reading our guide on var, let, and const: the difference that actually matters alongside this one, since let and const are actually part of ES6.

1. let and const — Smarter Ways to Create Variables

Before ES6, JavaScript only had one way to create a variable: var. The problem with var is that it doesn’t respect blocks (the code inside { } curly braces, like inside an if statement or a loop). This caused confusing bugs.

ES6 introduced two new keywords:

• let — for variables whose value can change later.
• const — for variables whose value should never change after it’s set.

javascript

let score = 10;
score = 15; //  allowed, because we used let

const pi = 3.14;
pi = 3.15; //  error, because we used const

Simple analogy: Think of const like a name tattooed on your arm — permanent. Think of let like a name written in pencil — you can erase and rewrite it whenever you need to.

Why Block Scope Matters

“Block scope” just means a variable only exists inside the { } where it was created — nowhere else.

javascript

if (true) {
  let message = "Hi there";
  console.log(message); // works fine
}

console.log(message); //  error — message doesn't exist out here

This keeps your code clean and prevents you from accidentally reusing a variable name and breaking something elsewhere in your program.

For a deeper walkthrough with more examples, check MDN’s guide on let and const.

2. Arrow Functions — Shorter Way to Write Functions

If you’ve already read our guide on JavaScript functions, you know a regular function looks like this:

javascript

function greet(name) {
  return "Hello, " + name;
}

ES6 introduced arrow functions, a shorter way to write the same thing using the => symbol (which literally looks like an arrow):

javascript

const greet = (name) => {
  return "Hello, " + name;
};

And if the function only has one line, you can make it even shorter:

javascript

const greet = (name) => "Hello, " + name;

Simple analogy: Regular functions are like writing a formal letter. Arrow functions are like sending a quick text message — same message, way less typing.

The One Big Difference: this

Arrow functions behave differently with a special keyword called this (which normally refers to “the object currently running the code”). Arrow functions don’t create their own this — they simply borrow it from whatever code surrounds them.

This matters most inside things like button click handlers or timers, where regular functions sometimes get confused about what this refers to. As a simple rule for now: use arrow functions for short helper functions and callbacks, and use regular functions when you’re writing a method that belongs to an object. You can read more in MDN’s arrow function reference.

3. Template Literals — Easier Way to Build Strings

Before ES6, if you wanted to combine text and variables, you had to “glue” them together with + signs:

javascript

let name = "Aryan";
let message = "Hello, " + name + "! Welcome back.";

This gets messy fast, especially with lots of variables. ES6 introduced template literals, which use backticks (`) instead of quotes, and let you drop variables directly inside ${ }.

javascript

let name = "Aryan";
let message = `Hello, ${name}! Welcome back.`;

Much cleaner, right? Template literals are string literals that allow embedded expressions and multi-line text without extra tricks.

Multi-Line Strings Made Easy

Template literals also let you write text across multiple lines without any special characters:

javascript

let note = `Dear student,
Your assignment is due tomorrow.
Please submit it on time.`;

With the old method, you’d need to manually add line-break characters. Template literals just let you press Enter. See the official MDN template literals reference for advanced tricks like tagged templates.

4. Destructuring — Unpacking Values Quickly

Destructuring sounds like a big word, but it just means “unpacking” values from an array or object into separate variables — like unpacking items from a grocery bag instead of reaching into the bag every single time you need something.

Array Destructuring

javascript

const colors = ["red", "green", "blue"];

// Old way
const first = colors[0];
const second = colors[1];

// ES6 way
const [first, second] = colors;

If you want a refresher on arrays first, we cover the basics in our JavaScript arrays guide.

Object Destructuring

javascript

const student = { name: "Priya", age: 21 };

// Old way
const name = student.name;
const age = student.age;

// ES6 way
const { name, age } = student;

This is especially handy when working with data from APIs, since real-world objects often have many properties and you only need a few of them. If objects still feel new to you, our JavaScript objects guide covers the fundamentals first.

5. Spread and Rest Operators — The Three Dots (...)

Both of these use three dots (...), but they do opposite jobs depending on where you use them.

Spread Operator — Expanding Values

The spread operator takes items out of an array or object and “spreads” them out individually.

javascript

const fruits = ["apple", "banana"];
const moreFruits = [...fruits, "mango", "grapes"];

console.log(moreFruits); // ["apple", "banana", "mango", "grapes"]

It’s also great for quickly copying an array or object without accidentally changing the original one.

Rest Operator — Collecting Values

The rest operator does the opposite — it gathers multiple values into a single array. It’s most common in function parameters when you don’t know how many arguments will be passed in.

javascript

function addAll(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(addAll(1, 2, 3, 4)); // 10

Simple analogy: Spread is like unpacking a suitcase and laying every item on the bed. Rest is like packing scattered items back into one suitcase.

6. Default Parameters — Built-In Fallback Values

Sometimes a function is called without all the information it needs. ES6 lets you set a default value right in the function definition, so it doesn’t break or show undefined.

javascript

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet());        // Hello, Guest!
console.log(greet("Rahul"));  // Hello, Rahul!

This removes the need for extra if checks just to handle missing values — something that used to take several lines in older JavaScript.

7. Classes — A Cleaner Way to Create Object Blueprints

JavaScript already had a way to create reusable “blueprints” for objects before ES6, but it looked confusing (using something called prototypes). ES6 introduced the class keyword, giving JavaScript a syntax that feels closer to other popular languages.

javascript

class Student {
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }

  introduce() {
    return `Hi, I'm ${this.name} and I'm in grade ${this.grade}.`;
  }
}

const student1 = new Student("Meera", 10);
console.log(student1.introduce()); // Hi, I'm Meera and I'm in grade 10.

Simple analogy: A class is like a cookie cutter. It doesn’t make the cookie itself — it just defines the shape. Every time you use new Student(...), you’re stamping out a fresh cookie (object) using that shape.

8. Modules — Splitting Code Into Separate Files

As projects grow bigger, keeping everything in one giant file becomes a nightmare. ES6 introduced a standard way to export code from one file and import it into another.

javascript

// mathUtils.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './mathUtils.js';
console.log(add(2, 3)); // 5

This keeps your project organized, since each file can focus on one job, and you only pull in the pieces you actually need elsewhere.

9. Promises — Handling Tasks That Take Time

Some tasks in JavaScript don’t finish instantly — like fetching data from the internet. ES6 introduced Promises, which represent a value that will be available later, either successfully or with an error.

javascript

const fetchData = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Data loaded successfully!");
  } else {
    reject("Something went wrong.");
  }
});

fetchData
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

Simple analogy: A Promise is like ordering food online. You don’t get your food instantly — you get a tracking status. Eventually, it either arrives (resolve) or gets cancelled (reject).

Quick Comparison: ES5 vs ES6

Frequently Asked Questions

Is ES6 the same as JavaScript?

Not exactly. ES6 (ECMAScript 2015) is a specific version of the rules that JavaScript follows. JavaScript is the language itself, and ES6 is one big update to its rulebook — a bit like how “Android 14” is a version of the Android operating system, not the phone itself.

Do I need to learn ES5 before ES6?

Not really. If you’re starting fresh today, it’s totally fine to learn ES6 style directly, since almost all modern JavaScript code — including frameworks like React — is written this way. It still helps to recognize older var-based code when you come across it, though.

Are arrow functions always better than regular functions?

No. Arrow functions are great for short callbacks and simple logic, but regular functions are still needed for object methods and situations where you need your own this value. Knowing when to use each is more important than always picking one.

Is ES6 supported in all browsers today?

Yes, all major modern browsers fully support ES6 features. It’s been considered a stable, “safe to use” part of JavaScript for a long time now.

What comes after ES6?

JavaScript keeps getting yearly updates — ES2016, ES2017, and so on, all the way to the present. These add smaller, extra features, but ES6 remains the biggest single leap the language has taken.

Trusted Sources & References

Everything in this guide is grounded in official documentation, not guesswork. If you want to dig deeper into any feature, these are reliable places to start:

• MDN — let — official reference for block-scoped variables
• MDN — const — official reference for constants
• MDN — Arrow Functions — full syntax and this behavior explained
• MDN — Template Literals — string interpolation and tagged templates
• MDN — Destructuring Assignment — unpacking arrays and objects
• MDN — Spread Syntax — expanding arrays, objects, and function arguments
• MDN — Rest Parameters — collecting arguments into an array
• MDN — Default Parameters — fallback values for function arguments
• MDN — Classes — object blueprints and inheritance
• MDN — JavaScript Modules — import and export syntax
• MDN — Using Promises — handling asynchronous tasks

We recommend bookmarking MDN Web Docs — it’s the most trusted, community-maintained reference for JavaScript and the web in general.

Continue Learning

Want to build on what you just learned? Check out these related guides on 28LazyCoder:

• var, let, and const: The Difference That Actually Matters
• JavaScript Functions: A Complete Guide with Examples
• JavaScript Arrays: A Complete Beginner’s Guide with Examples
• JavaScript Objects: A Complete Beginner’s Guide with Examples
• JavaScript Events Explained: A Complete Beginner’s Guide
• JavaScript DOM Manipulation Explained

Explore more tutorials on 28LazyCoder.