ECMAScript 2015, also known as ES6, was a major update to JavaScript that introduced many new features to make the language more powerful and easier to write. Here are some of the most important ones.
let and const introduced block-scoped variables, which are confined to the
{} block they are defined in. This is a significant improvement over var, which is
function-scoped.
if (true) {
var x = "I am function-scoped";
let y = "I am block-scoped";
const z = "I am also block-scoped";
}
console.log(x); // "I am function-scoped"
// console.log(y); // ReferenceError: y is not defined
Template literals provide an easy way to create multi-line strings and perform string interpolation (embedding expressions in strings).
let name = "Ragini";
let multiLineString = `
This is a
multi-line string.
`;
let greeting = `Hello, ${name}! The year is ${new Date().getFullYear()}.`;
console.log(greeting);
Arrow functions offer a more concise syntax for writing functions. A key difference is that they do not have
their own this context; they inherit it from the parent scope (lexical scoping).
// Traditional function
const add_es5 = function(a, b) {
return a + b;
};
// Arrow function (concise)
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
Destructuring makes it easy to unpack values from arrays or properties from objects into distinct variables.
const person = { name: "Ragini", age: 25, city: "Delhi" };
const { name, age } = person;
console.log(name); // "Ragini"
console.log(age); // 25
const fruits = ["Apple", "Banana", "Mango"];
const [first, second] = fruits;
console.log(first); // "Apple"
console.log(second); // "Banana"
You can now provide default values for function parameters, making functions more robust.
function greet(name = "Guest") {
console.log(`Hello, ${name}`);
}
greet(); // Hello, Guest
greet("Ragini"); // Hello, Ragini
The three dots (...) can be used for both spreading elements and gathering them.
Expands an iterable (like an array or object) into individual elements.
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
console.log(arr2);
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
console.log(obj2);
Collects multiple elements and "condenses" them into a single array. It's often used in function parameters.
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15
ES6 introduced a native module system, allowing you to split your code into separate files and import/export functionalities as needed. This helps in organizing large codebases.
// In file math.js
// export const PI = 3.14;
// In file main.js
// import { PI } from './math.js';
// console.log(PI);
| Feature | ES5 | ES6 |
|---|---|---|
| Variable Scope | var (Function-scoped) |
let, const (Block-scoped) |
| Functions | function() {} |
Arrow functions () => {} |
| Strings | Concatenation with + |
Template Literals with `${}` |
| Destructuring | Manual assignment | const {a} = obj |
| Modules | Third-party libraries (e.g., CommonJS) | Native import/export |
| Spread/Rest | .apply(), manual loops |
... operator |
const/let, arrow functions, and
destructuring for cleaner, more modern, and less error-prone JavaScript code.
Test your understanding of JavaScript ES6 Features.
function multiply(a, b) { return a * b; }.multiply.firstName = "John" and lastName = "Doe".greeting using template literals (backticks).greeting to the console.const book = { title: "1984", author: "George Orwell", year: 1949 };title and author properties into distinct variables.const fruits1 = ["Apple", "Banana"]; and const fruits2 = ["Cherry", "Date"];.allFruits....) to combine the elements of both arrays into allFruits.calculateTotal.discount.prices.