ES6 Features - JavaScript

Template Literals

What Are Template Literals?

Template literals are string literals that allow embedded expressions, multi-line strings, and easier string construction.

Introduced in ES6 (ECMAScript 2015)
Written with backticks (`) instead of quotes

Features of Template Literals

Basic String Creation
const msg = `This is a template literal.`;
console.log(msg);
String Interpolation
const user = "Alice";
console.log(`Welcome, ${user}!`); // Welcome, Alice!
Multi-line Strings
const text = `Line 1
Line 2
Line 3`;
console.log(text);
Expression Evaluation
const a = 5, b = 10;
console.log(`Sum: ${a + b}`); // Sum: 15
Function Calls Inside
const greet = name => `Hello, ${name.toUpperCase()}`;
console.log(greet("john")); // Hello, JOHN
Nesting Template Literals
const lang = "JavaScript";
console.log(`I love ${`${lang}`.toUpperCase()}`);

Advantages

Readable & clean — No messy + concatenations
Multi-line support — No need for \n
Expression embedding — Insert variables & logic directly
Tagged templates — Allow custom processing
Great for dynamic content — Useful in DOM, emails, reports, logs
Supports nesting — Works even inside other template literals

Disadvantages

Browser Compatibility — Not supported in very old browsers (IE11)
Readability issues with complex logic
Overuse of Tagged Templates — Can confuse beginners
Security Risk (XSS) — Avoid injecting user input directly into HTML

Real-Life Use Cases

Dynamic Emails / Messages
const user = "Sarah";
const msg = `Hi ${user}, thanks for joining our platform!`;
Reports / Receipts
const customer = "John";
const total = 250;
console.log(`🧾 Receipt
Customer: ${customer}
Total: $${total}`);
CSS in JS (React styled-components)
const Button = styled.button`
background: ${props => props.primary ? "blue" : "gray"};
color: white;
`;

Default Function Parameters in JavaScript

Definition

Default function parameters let you set a fallback value for a function’s arguments if no value (or undefined) is passed. Introduced in ES6 (2015), this feature makes functions safer and cleaner by avoiding errors when arguments are missing.

Syntax

function functionName(param1 = defaultValue, param2 = defaultValue) {
// function body
}

Example 1: Basic Default Parameter

function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest
greet("Alice"); // Hello, Alice

Explanation:
If no argument is passed → name defaults to "Guest".
If "Alice" is passed → it overrides the default.

Example 2: Multiple Parameters

Real-Life Analogy

Imagine ordering pizza 🍕:
If you don’t specify toppings, the shop gives you “cheese” by default.
If you say "pepperoni", they override the default.

function orderPizza(topping = "cheese") {
console.log(`Pizza with ${topping}`);
}

orderPizza(); // Pizza with cheese
orderPizza("olives"); // Pizza with olives

Advantages

Cleaner & shorter code (no need for if (param === undefined) checks).
Safer (avoids undefined errors).
Supports expressions and functions as defaults.
Improves readability & maintainability.

Disadvantages

Not supported in very old JS (pre-ES6) – requires transpilers (like Babel).
Can sometimes hide bugs if you forget to pass values (JS just falls back silently).
Overusing defaults may make function signatures harder to read.

Before ES6 (Old Way)

function greet(name) {
name = (name === undefined) ? "Guest" : name;
console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest
greet("Alice"); // Hello, Alice

👉 ES6 default parameters make this much simpler.

Destructuring in JavaScript

Definition

Destructuring is an ES6 feature that allows you to unpack values from arrays or objects into distinct variables in a clean and concise way. Instead of accessing values with indexes (arr[0]) or dot notation (obj.key), destructuring lets you extract them directly into variables.

Types of Destructuring

Array Destructuring
Object Destructuring
Nested Destructuring
Default Values with Destructuring
Rest Syntax in Destructuring
Function Parameters Destructuring

Syntax

Array Destructuring

const [var1, var2, var3] = array;

Object Destructuring

const { key1, key2 } = object;

Nested Destructuring

const { nestedKey: { innerKey } } = object;

Default Values

const { key = defaultValue } = object;
const [a = defaultValue] = array;

Rest Syntax

const { key, ...rest } = object;
const [first, ...others] = array;

Function Parameters Destructuring

function func({ key1, key2 }) {
// use key1, key2
}

Advantages

Cleaner, shorter syntax.
Great for working with APIs (JSON responses).
Makes swapping values super easy.
Improves readability & maintainability.

Disadvantages

Can be confusing with deeply nested structures.
Overuse may reduce readability for beginners.
Errors if trying to destructure undefined or null.

Spread & Rest Operators in JavaScript

Definition

The three dots (...) in JavaScript can act in two different ways depending on context:

Spread Operator → Expands (spreads) an array or object into individual elements.
Rest Operator → Collects (gathers) multiple elements into an array or object.

👉 Same syntax, different purpose depending on where it’s used.

Syntax

Spread Operator

// Arrays
const arr2 = [...arr1];
const merged = [...arr1, ...arr2];

// Objects
const obj2 = { ...obj1, key: value };

Rest Operator

// Function Parameters
function sum(...nums) { }

// Array Destructuring
const [first, ...others] = array;

// Object Destructuring
const { key, ...rest } = object;

Real-Life Analogy

Think of ... like a bag of candies 🍬:
Spread → You pour out the candies one by one (expand).
Rest → You scoop up multiple candies into a bag (gather).

Advantages

Cleaner array/object handling (copy, merge).
Makes function arguments flexible (...args).
Simplifies destructuring (ignore vs collect values).
Avoids mutation when copying objects/arrays.

Disadvantages

Shallow copy only → Nested objects/arrays are still referenced.
Overusing ... in big objects/arrays may impact performance.

JavaScript Modules (import / export)

Definition

Modules in JavaScript allow you to split your code into separate files and reuse them across projects. Introduced in ES6 (2015), they make code more organized, reusable, and maintainable. Works using export (to share code) and import (to use code).

Syntax

Export

// Named Export
export const value = 42;
export function add(a, b) { return a + b; }

// Default Export
export default function greet(name) { return `Hello, ${name}`; }

Import

// Import Named
import { value, add } from './file.js';

// Import Default
import greet from './file.js';

// Import Everything
import * as utils from './file.js';

// Rename Import
import { add as sum } from './file.js';

Rules of ES6 Modules

Use export in one file, import in another.
Default export → no {} required.
Named exports → use {}.
Modules run in strict mode automatically.
Must use type="module" in HTML when used in browsers.

Real-Life Analogy

Think of modules like a restaurant kitchen 🍴:
The chef (export) prepares dishes.
The waiter (import) brings only what’s ordered.

Advantages

Keeps code organized (split into files).
Encourages reusability.
Avoids global scope pollution.
Works well with modern bundlers (Webpack, Vite, Parcel).
Supports tree-shaking (removes unused code).

Disadvantages

Not supported in older browsers (requires Babel or bundlers).
Must use file extensions (.js) when importing in browser.
Needs "type": "module" in package.json for Node.js ES modules.