ES6 and Beyond – Modern JavaScript
What is ES6+
ES6 (ECMAScript 2015) is a modern version of the JavaScript language that brought significant improvements: clearer syntax, more powerful functions, and better code organization. ES6+ means ES6 and all later versions (ES7, ES8, ES9, etc.).
let, const, and Code Blocks
let and const are used to declare variables. Unlike var, they
follow "block scope" — meaning they are only visible within the block where they are defined.
{
let x = 10;
const y = 20;
var z = 30;
}
console.log(z); // ✅ works
console.log(x); // ❌ error: x is not defined
Arrow Functions
A shorter way to write functions. They do not have their own this, which makes them useful for
simple functions.
const greet = (name) => `Hello, ${name}!`;
console.log(greet("John")); // Hello, John!
Default Parameters
You can set a default value for function parameters if none is provided.
function greet(name = "Anonymous") {
return `Hello, ${name}!`;
}
console.log(greet()); // Hello, Anonymous!
Rest and Spread Operators
Rest collects multiple arguments into an array. Spread "spreads" elements of an array or object.
// Rest
function sum(...numbers) {
return numbers.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3)); // 6
// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]
Array and Object Destructuring
You can extract values directly from arrays or objects into variables.
// Array
const [a, b] = [10, 20];
console.log(a); // 10
// Object
const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name); // John
Enhanced Object Literals
You can write objects more concisely, without repeating property names.
const name = "John";
const user = {
name,
greet() {
return `Hello, ${this.name}!`;
}
};
console.log(user.greet()); // Hello, John!
Modules and Imports
Modern JavaScript allows splitting code into separate files. You can export and import functions or variables.
// greet.js
export function greet(name) {
return `Hello, ${name}!`;
}
// main.js
import { greet } from './greet.js';
console.log(greet("John"));
Optional Chaining and Nullish Coalescing
Optional chaining helps access properties without causing errors if they do not exist.
Nullish coalescing provides an alternative value only if the main one is null or
undefined.
const user = { profile: { name: "John" } };
console.log(user?.profile?.name); // John
const value = null;
console.log(value ?? "Fallback"); // Fallback