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.
Example: 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.
Example: 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.
Example: 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.
Example: 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.
Example: 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));- Assuming class syntax means JavaScript gained true classical inheritance like Java or C++ -- ES6 classes are syntax sugar over JavaScript's existing prototype-based inheritance, not a fundamentally new object model.
- Using var out of habit in new code, missing the block-scoping benefits let and const were specifically introduced to provide.
- Forgetting that arrow functions handle the this keyword differently from regular functions, which can cause bugs when converting older code to arrow function syntax carelessly.
- let and const introduced proper block scoping, replacing var's function-scoping quirks for most new code.
- Arrow functions, template literals, destructuring, and default parameters are widely-used ES6 syntax improvements.
- Promises and the module system (import/export) gave JavaScript standardized tools for asynchronous code and code organization.
ES6/ES2015 features are supported natively in every browser released since roughly 2016, and are effectively universal in current browsers.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: