ES6 Features
ES6 (ECMAScript 2015) introduced a number of new features to JavaScript that significantly improved its functionality, readability, and maintainability. These features include let and const, template literals, destructuring, spread and rest operators, and modules.
Contents
let and const
In ES6, let and const were introduced to improve variable scoping and ensure better control over variable values. These are alternatives to var, which has been used since the beginning but comes with issues related to hoisting and function-level scope.
1.1 let
- Block-scoped: Variables declared with
letare only accessible within the block in which they are declared (inside{}). - No hoisting: Unlike
var,letvariables are not initialized before the code runs, which prevents accessing them before they are declared.
Example:
let name = "Alice";
if (true) {
let name = "Bob"; // This 'name' is scoped within the block
console.log(name); // Output: "Bob"
}
console.log(name); // Output: "Alice"
1.2 const
- Block-scoped: Like
let,constis also block-scoped. - Immutable: Variables declared with
constcannot be reassigned. However, objects and arrays declared withconstcan still have their properties or elements modified.
Example:
const age = 30;
// age = 31; // Error: Assignment to constant variable
const person = { name: "Alice", age: 25 };
person.age = 26; // This is allowed, object properties can be modified
Template Literals
Template literals provide a cleaner and more readable way to work with strings, especially when you need to concatenate variables or expressions. Template literals use backticks (`...`) instead of quotes, and they support string interpolation and multi-line strings.
Example: String Interpolation
let name = "Alice";
let age = 25;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Output: "Hello, my name is Alice and I am 25 years old."
Destructuring
Destructuring is a convenient way to extract values from arrays or properties from objects into distinct variables. It simplifies code and improves readability when working with complex data structures.
3.1 Array Destructuring
const colors = ["red", "green", "blue"];
const [first, second, third] = colors;
console.log(first); // Output: "red"
console.log(second); // Output: "green"
3.2 Object Destructuring
const person = { name: "Alice", age: 25, city: "New York" };
const { name, age, city } = person;
console.log(name); // Output: "Alice"
console.log(age); // Output: 25
- Default Values: You can also provide default values when destructuring.
const { name, country = "USA" } = person;
console.log(country); // Output: "USA"
3.3 Nested Destructuring
You can destructure nested objects or arrays.
const user = {
name: "Alice",
address: {
city: "New York",
zipcode: 10001
}
};
const { address: { city, zipcode } } = user;
console.log(city); // Output: "New York"
Spread and Rest Operators
The spread (...) and rest (...) operators are powerful tools that help in handling arrays, objects, and function parameters. They share the same syntax but are used in different contexts.
4.1 Spread Operator
The spread operator is used to spread elements of an array or object into another array or object. It is useful for creating copies, merging arrays or objects, and passing elements to functions.
Example: Spread in Arrays
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // Output: [1, 2, 3, 4, 5]
Example: Spread in Objects
const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, city: "New York" };
console.log(updatedPerson); // Output: { name: "Alice", age: 25, city: "New York" }
4.2 Rest Operator
The rest operator is used to group a variable number of function arguments into an array or to group remaining object or array elements.
Example: Rest in Function Parameters
function sum(...numbers) {
return numbers.reduce((acc, current) => acc + current, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
Example: Rest in Destructuring
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // Output: 1
console.log(rest); // Output: [2, 3, 4]
Modules
ES6 introduced native modules to JavaScript, enabling developers to split code into smaller, reusable pieces. Modules help organize and maintain large codebases by allowing you to import and export variables, functions, or classes between files.
5.1 Exporting from a Module
You can export variables, functions, or classes from a module so that they can be imported elsewhere.
Named Exports: You can export multiple things from a module using named exports.
// math.js
export const pi = 3.14;
export function add(a, b) {
return a + b;
}
- Default Export: You can export a single default value from a module.
// greet.js
export default function greet(name) {
return `Hello, ${name}!`;
}
5.2 Importing from a Module
To use exported variables or functions from another module, you use the import keyword.
Named Imports:
import { pi, add } from './math.js';
console.log(add(2, 3)); // Output: 5
- Importing a Default Export:
import greet from './greet.js';
console.log(greet("Alice")); // Output: "Hello, Alice!"
5.3 Renaming Imports and Exports
You can rename imports and exports when necessary.
Renaming Exports:
export { add as sum };
- Renaming Imports:
import { sum as addNumbers } from './math.js';