JavaScript ES6 Features Explained

MSMAXPRO March 29, 2026 7 min read

If you are still writing JavaScript using only var and massive nested function() blocks, you are writing legacy code. In 2015, ECMAScript 6 (ES6) completely revolutionized how JavaScript is written, and today, mastering these features is the bare minimum requirement to work with frameworks like React, Vue, or Node.js.

Let's break down the most powerful ES6 features that you must use daily, with clear examples of the "old way" versus the "new way".

1. Let and Const (Goodbye Var)

The old var keyword is function-scoped, which often led to terrifying bugs where a variable would leak outside of an if statement block. ES6 introduced block-scoping.

const: Use this 95% of the time. It declares a variable that cannot be reassigned.
let: Use this only when you know the value will change (like a counter in a for-loop).
var: Never use this again.

2. Arrow Functions

Arrow functions give you a much shorter syntax, but more importantly, they fix the notorious this binding problem. Arrow functions do not bind their own this, they inherit it from the parent scope.

// Old ES5 Way
var multiply = function(x, y) {
    return x * y;
};

// ES6 Arrow Function
const multiply = (x, y) => x * y;

Notice how we eliminated the function keyword, the curly braces, and the return keyword entirely for this one-liner!

3. Object & Array Destructuring

If you fetch data from an API, you usually get a massive JSON object. Destructuring allows you to unpack specific values directly into variables.

const user = { name: 'MSMAXPRO', role: 'Admin', age: 25 };

// Old Way
const name = user.name;
const role = user.role;

// ES6 Destructuring
const { name, role } = user;
console.log(name); // 'MSMAXPRO'

4. Template Literals

Stop using the + operator to concatenate strings. Template literals use backticks (``) and allow you to inject variables directly using ${}.

// Old Way
const greeting = 'Hello, ' + name + '! You are ' + age + ' years old.';

// ES6 Way
const greeting = `Hello, ${name}! You are ${age} years old.`;

The Spread Operator (...)

The spread operator is incredibly powerful for copying objects or arrays without mutating the original (a core concept in React state management).

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // Result: [1, 2, 3, 4, 5]

const user = { name: 'John' };
const updatedUser = { ...user, role: 'Admin' };

Mini Task: Modernize Your Code

Open an old JavaScript file you wrote months ago.
Use Ctrl+F to find every instance of var and replace it with const or let.
Convert at least 3 old functions into ES6 Arrow Functions.

Best External Resources

Keep learning and mastering Modern JS:

JavaScript.info MDN Web Docs ES6 Features Catalog FreeCodeCamp JS

Written by MSMAXPRO

Professional web developer and security enthusiast crafting modern digital experiences. Follow me for more tutorials and roadmaps.