JS ES6 / 2015
In this page:
let variable = value;
const CONSTANT = value;
const fn = (x) => x;
class ClassName { }
`template ${expr}`let and const: Block Scoping
let and const introduced true block scoping (limited to the nearest { }), fixing var's confusing function-scoping and hoisting behavior -- const additionally prevents reassignment, making the programmer's intent (this value will not change) explicit in the code itself.
उदाहरण: let and const: Block Scoping
{
let blockScoped = "inside";
const fixed = "cannot reassign";
console.log(blockScoped, fixed);
}
// console.log(blockScoped); // ReferenceError, not visible out hereArrow Functions and Template Literals
Arrow functions (x => x * 2) offer a shorter function syntax and inherit this from their surrounding scope rather than defining their own, and template literals (Hello ${name}) let you embed expressions directly inside a string using backticks, replacing awkward string concatenation.
उदाहरण: Arrow Functions and Template Literals
// Declare the constant `double` as an arrow function taking `x`
// Declare the constant `double` as an arrow function taking `x`
const double = x => x * 2;
// Declare the constant `name`, set to "Sam"
// Declare the constant `name`, set to "Sam"
const name = "Sam";
// Print `double(5), `Hello ${name}`` to the console
// Print `double(5), `Hello ${name}`` to the console
console.log(double(5), `Hello ${name}`);Destructuring and Default Parameters
Destructuring lets you unpack values from an array or object into individual variables in one line (const { name, age } = person), and default parameters let a function parameter fall back to a specified value automatically when the caller does not provide one.
उदाहरण: Destructuring and Default Parameters
// Declare the constant `person`, set to `{ name: "Sam", age: 30 }`
// Declare the constant `person`, set to `{ name: "Sam", age: 30 }`
const person = { name: "Sam", age: 30 };
// Destructure {name, age} out of `person`
// Destructure {name, age} out of `person`
const { name, age } = person;
// Define the function `greet` taking `greeting`
// Define the function `greet` taking `greeting`
function greet(greeting = "Hello") { console.log(greeting); }
// Call `greet()`
// Call `greet()`
greet();
// Print `name, age` to the console
// Print `name, age` to the console
console.log(name, age);Classes and Promises
ES6's class keyword provides cleaner, more familiar syntax for defining constructor functions and their prototype methods (JavaScript's existing inheritance model underneath), and the Promise object standardized handling asynchronous operations, replacing inconsistent, ad-hoc callback patterns that came before it.
उदाहरण: Classes and Promises
// Define the class `Animal`
// Define the class `Animal`
class Animal {
constructor(name) { this.name = name; }
}
// Create a new `Promise` instance with `resolve => resolve("done")).then(v => console.log(v)`
// Create a new `Promise` instance with `resolve => resolve("done")).then(v => console.log(v)`
new Promise(resolve => resolve("done")).then(v => console.log(v));
// Print `new Animal("Rex").name` to the console
// Print `new Animal("Rex").name` to the console
console.log(new Animal("Rex").name);Modules: import and export
ES6 introduced a native module system -- export makes a variable, function, or class available to other files, and import brings it into another file -- standardizing how JavaScript code is split across multiple files, something the language had no built-in mechanism for before.
उदाहरण: Modules: import and export
// math.js: export function add(a, b) { return a + b; }
// main.js:
import { add } from './math.js';
console.log(add(2, 3));Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: