ES6 Features in JavaScript : A Simple Guide for Beginners

JavaScript is one of the most popular programming languages used to build modern websites and web applications. Over time, JavaScript has introduced many new features to make code cleaner, easier to read, and more powerful.

ES6 (ECMAScript 2015) was a major update to JavaScript released in 2015. It introduced several useful features that developers use in their daily work.

In this tutorial, you will learn the most important ES6 features with simple JavaScript examples.

1. let and const

Before ES6, developers commonly used var to declare variables. ES6 introduced let and const, which provide block scope.

Using let

Use let when you need to change a variable’s value.

let name = "Harshit";

name = "Rahul";

console.log(name); // Rahul

Using const

Use const when you do not want to reassign a variable.

const age = 25;

console.log(age); // 25

You cannot reassign a const variable. However, objects and arrays declared with const can still have their contents modified.

const user = {
    name: "Harshit"
};

user.name = "Rahul";

console.log(user.name); // Rahul

When to use them: Prefer const by default and use let when reassignment is necessary.

2. Arrow Functions

Arrow functions provide a shorter syntax for writing functions.

Traditional function

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

console.log(add(10, 20)); // 30

Arrow function

const add = (a, b) => {
    return a + b;
};

console.log(add(10, 20)); // 30

You can make it even shorter when the function contains only a single return expression.

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

console.log(add(10, 20)); // 30

Arrow functions are especially useful when working with array methods such as map() and filter().

3. Template Literals

Template literals make it easier to combine strings and variables. They use backticks instead of single or double quotes.

const name = "Harshit";
const age = 30;

const message = `My name is ${name} and I am ${age} years old.`;

console.log(message);

Output:

My name is Harshit and I am 30 years old.

You can also use template literals for multiline strings.

const message = `Hello,
Welcome to JavaScript.
Happy learning!`;

console.log(message);

Template literals are useful when generating dynamic messages, HTML content, or API responses.

4. Default Parameters

Default parameters allow you to assign default values to function parameters.

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

console.log(greet("Harshit"));
console.log(greet());

Output:

Hello, Harshit!
Hello, Guest!

If you do not provide a value for name, the function uses "Guest".

5. Destructuring

Destructuring allows you to extract values from arrays or properties from objects into variables.

Array Destructuring

const colors = ["Red", "Green", "Blue"];

const [first, second, third] = colors;

console.log(first);  // Red
console.log(second); // Green
console.log(third);  // Blue

Object Destructuring

const user = {
    name: "Harshit",
    age: 30
};

const { name, age } = user;

console.log(name); // Harshit
console.log(age);  // 30

Destructuring is commonly used when working with API data, function parameters, and JavaScript objects.

6. Spread Operator

The spread operator (...) expands the elements of an array or the properties of an object.

Example with Arrays

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const allNumbers = [...numbers1, ...numbers2];

console.log(allNumbers);

Output:

[1, 2, 3, 4, 5, 6]

Example with Objects

const user = {
    name: "Harshit",
    age: 30
};

const updatedUser = {
    ...user,
    city: "Jaipur"
};

console.log(updatedUser);

The spread operator is useful for copying arrays, combining objects, and creating updated data without changing the original object or array.

Note that spread creates a shallow copy, not a deep copy.

7. Rest Parameters

Rest parameters allow a function to accept any number of arguments and collect them into an array.

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

console.log(sum(10, 20));       // 30
console.log(sum(10, 20, 30));   // 60
console.log(sum(1, 2, 3, 4));   // 10

The ...numbers syntax collects all remaining arguments into one array.

Difference between spread and rest:

• Spread expands an array or object into individual elements or properties.
• Rest collects multiple values into an array or groups remaining properties.

8. Classes

ES6 introduced class syntax to make JavaScript object-oriented code easier to organize.

class User {
    constructor(name) {
        this.name = name;
    }

    greet() {
        return `Hello, ${this.name}!`;
    }
}

const user = new User("Harshit");

console.log(user.greet());

Output:

Hello, Harshit!

The constructor() method runs when a new object is created. The greet() method defines behavior for objects created from the class.

JavaScript classes use prototype-based inheritance behind the scenes.

9. Modules: import and export

ES6 modules allow you to organize JavaScript code into separate files and reuse functions or variables.

Export a function

Create a file named math.js:

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

Import the function

In another file named app.js:

import { add } from "./math.js";

console.log(add(10, 20)); // 30

To run this example in a browser, load app.js as a module:

<script type="module" src="app.js"></script>

Modules help keep large applications organized and easier to maintain.

10. Promises

Promises help handle asynchronous operations, such as API requests and other tasks that finish later.

A promise can be pending, fulfilled, or rejected.

const promise = new Promise((resolve, reject) => {
    resolve("Task completed successfully!");
});

promise.then((result) => {
    console.log(result);
});

Output:

Task completed successfully!

The then() method handles a fulfilled promise, while catch() can handle a rejection.

Promise.reject("Something went wrong")
    .catch((error) => {
        console.log(error);
    });

Promises are an important foundation for understanding async and await, which provide another way to write asynchronous JavaScript.

11. Enhanced Object Literals

ES6 makes it easier to create objects using shorter property and method syntax.

Before ES6

const name = "Harshit";

const user = {
    name: name,
    greet: function() {
        return "Hello!";
    }
};

With ES6

const name = "Harshit";

const user = {
    name,
    greet() {
        return "Hello!";
    }
};

console.log(user.name);
console.log(user.greet());

When the variable name and property name are the same, you can write name instead of name: name.

12. for…of Loop

The for...of loop makes it easy to iterate over iterable values such as arrays and strings.

const fruits = ["Apple", "Banana", "Mango"];

for (const fruit of fruits) {
    console.log(fruit);
}

Output:

Apple
Banana
Mango

It is useful when you need to process array elements one by one.

Unlike for...in, which iterates over enumerable property keys, for...of iterates over values provided by an iterable.

Why Should You Learn ES6?

ES6 introduced features that make JavaScript development easier and more productive.

Here are some benefits:

• Cleaner code: Write functions and objects with less boilerplate.
• Better readability: Use destructuring and template literals to simplify code.
• Reusable code: Use modules to organize functions into separate files.
• Modern development: Understand syntax used in many JavaScript libraries and frameworks.
• Better data handling: Use spread and rest syntax to work with arrays and objects.

These features are useful for frontend development, backend development with Node.js, and frameworks such as React.

Conclusion

ES6 was a major milestone in JavaScript development. Features such as let and const, arrow functions, template literals, destructuring, spread operators, classes, modules, and promises help developers write cleaner and more maintainable code.

If you are learning JavaScript, practice each feature with small examples before moving to advanced topics. Once you understand these concepts, you will have a stronger foundation for learning modern JavaScript frameworks and building real-world applications.

Frequently Asked Questions (FAQs)

What is ES6 in JavaScript?

ES6, also known as ECMAScript 2015, is a major JavaScript update released in 2015. It introduced features such as arrow functions, classes, destructuring, modules, and promises.

What are the most important ES6 features?

Some important features are let and const, arrow functions, template literals, destructuring, spread and rest operators, classes, modules, and promises.

What is the difference between var, let, and const?

var is function-scoped, while let and const are block-scoped. let allows reassignment, whereas const does not allow reassignment after initialization.

Is ES6 still used today?

Yes. ES6 features remain widely used in modern JavaScript development. Modern JavaScript also includes newer features introduced after ES6.

Do I need to learn ES6 before React?

You should understand the main ES6 features before learning React. Arrow functions, destructuring, modules, and spread syntax are especially useful when writing React components.

Can I use ES6 in a browser?

Yes. Modern browsers support most ES6 features. For older browsers or compatibility requirements, developers may use tools such as Babel to transform modern JavaScript into compatible code.