JavaScript has evolved over the years, and ECMAScript (or ES) is the standard that defines its updates and features.
One of the most significant updates came with ES6 (2015), which introduced modern programming techniques like Object-Oriented Programming (OOP) and many other useful features.
Key Features of ES6+
1. Arrow Functions
What are they? A modern, concise way to write functions.
Syntax:
const funcName = () => console.log("Arrow function");
Key Points:
The
thiskeyword in arrow functions refers to the surrounding (lexical) scope, not the current object.If there’s only one statement in the function, you can omit the
{}andreturnkeyword.
Example:
const sum = (a, b) => a + b;
console.log(sum(5, 3)); // Output: 8
2. Template Literals
What are they? They allow embedding dynamic variables and expressions directly into strings using backticks (``).
Syntax: Use
${}to embed variables or expressions.
Example:
const name = "Shekhar";
console.log(`Hello, ${name}!`); // Output: Hello, Shekhar!
3. Rest vs Spread Operators
- What are they? Both use
...but have opposite purposes.
| Operator | Purpose | Example |
| Rest | Combines multiple elements into a single array or object. | javascript const sum = (...nums) => nums.reduce((a, b) => a + b); sum(1, 2, 3); // Output: 6 |
| Spread | Separates (spreads) elements of arrays or objects into individual parts. | javascript const arr = [1, 2, 3]; const newArr = [...arr, 4, 5]; console.log(newArr); // Output: [1, 2, 3, 4, 5] |
4. Object-Oriented Programming (OOP) in ES6
- What is it? A paradigm where objects (instances of classes) model real-world entities.
Key Concepts:
- Class: A blueprint for creating objects.
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
}
let myCar = new Car("Tesla", "Model S");
console.log(myCar); // Output: Car { brand: 'Tesla', model: 'Model S' }
- Inheritance: A class can inherit properties and methods from another class using
extends.
class Vehicle {
constructor(type) {
this.type = type;
}
}
class Car extends Vehicle {
constructor(type, brand) {
super(type); // Calls the parent constructor
this.brand = brand;
}
}
const car = new Car("Sedan", "Toyota");
console.log(car); // Output: Car { type: 'Sedan', brand: 'Toyota' }
- Constructor: A special method to assign default values when creating an object.
5. Modules in ES6
- What are they? A way to organize and share code across files using
importandexport.
Example:
File 1 (module.js):
export const greet = () => console.log("Hello, World!");
File 2 (main.js):
import { greet } from './module.js';
greet(); // Output: Hello, World!
6. Destructuring
- What is it? A shorthand way to extract values from objects or arrays.
Object Destructuring:
const movie = { title: "RRR", status: "HIT", year: 2022 };
const { title, year } = movie;
console.log(title, year); // Output: RRR 2022
Array Destructuring:
const arr = ["KGF", "VIKRAM"];
const [movie1, movie2] = arr;
console.log(movie1, movie2); // Output: KGF VIKRAM
7. Default Parameters
- What are they? Allow functions to have default values for parameters if none are provided.
Example:
const greet = (name = "Guest") => console.log(`Hello, ${name}!`);
greet(); // Output: Hello, Guest!
greet("Anubhav"); // Output: Hello, Anubhav!
8. Promises
- What are they? Promises handle asynchronous tasks, making them easier to manage.
Example:
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched!"), 2000);
});
};
fetchData().then(data => console.log(data)); // Output: Data fetched!
Summary
ES6 introduced several powerful features that modernized JavaScript:
Arrow Functions for concise function syntax.
Template Literals for dynamic string embedding.
Rest/Spread Operators to bundle and separate elements.
OOP with classes and inheritance.
Modules for reusable code.
Destructuring for easy value extraction.
Default Parameters for cleaner function definitions.
Promises for handling asynchronous operations.
These features make coding in JavaScript more efficient, readable, and organized.