Week 3

3.7 ES6+ Features

ES6+ Features – Modern JavaScript!

JavaScript has evolved a lot since its creation, and ES6+ introduced powerful new features that make coding cleaner, faster, and more efficient. Before diving in, let’s first understand what ES6+ means and how it relates to JavaScript.

1. What is ECMAScript (ES)?

ECMAScript (ES) is the official standard that defines how JavaScript should work. JavaScript itself is a programming language, while ECMAScript is the set of rules that browsers and JavaScript engines follow to ensure compatibility.

📜 Brief History

🔹 1995 – JavaScript was created by Brendan Eich in just 10 days.
🔹 1997 (ES1) – First standardization of JavaScript by ECMA International.
🔹 2015 (ES6 / ECMAScript 2015) – Biggest update in JavaScript history.
🔹 ES7, ES8, ES9, ... (ECMAScript 2016, 2017, etc.) – New features added yearly.

Difference Between JavaScript & ECMAScript

Feature JavaScript 🛠️ ECMAScript 📜

Definition Programming Language Specification (Standard)

Created By Brendan Eich (1995) ECMA International

Purpose Used in Web Development Defines JS rules/features

Updates Implemented in Browsers New versions every year

2. Key ES6+ Features Every Developer Should Know

1. let & const – Block-Scoped Variables

Before ES6, we only had var, which had function scope and was prone to bugs.

var name = "Alice";  

let age = 25;  

const country = "USA";  

name = "Bob"; // Allowed  

age = 26; // Allowed  

country = "Canada"; // Error! const cannot be reassigned

• Use let when the value will change.

• Use const when the value should stay the same.

2. Arrow Functions – Shorter & Cleaner Functions

Arrow functions simplify syntax and automatically bind this.

// Traditional function

function greet(name) {

    return "Hello, " + name + "!";

}

// Arrow function (shorter!)

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Alice")); // Output: Hello, Alice!

• No need for return or {} when there’s one expression!

3. Template Literals – String Interpolation

Before ES6, string concatenation was a pain!

const name = "Alice";

const message = `Hello, ${name}! Welcome to ES6!`;

console.log(message);

• Backticks (`) make multi-line strings easier!

4. Destructuring – Extracting Values Easily

Instead of manually accessing properties, use destructuring.

// Object Destructuring

const person = { name: "Alice", age: 25, country: "USA" };

const { name, age } = person;

console.log(name, age); // Output: Alice 25

// Array Destructuring

const colors = ["red", "green", "blue"];

const [first, second] = colors;

console.log(first, second); // Output: red green

• Extract values from objects & arrays with ease!

5. Spread & Rest Operators (...)

Spread Operator – Expanding Arrays & Objects

const nums = [1, 2, 3];

const newNums = [...nums, 4, 5]; // [1, 2, 3, 4, 5]

• Used to copy or merge arrays & objects.

Rest Operator – Collecting Arguments into an Array

function sum(...numbers) {

    return numbers.reduce((acc, curr) => acc + curr, 0);

}

console.log(sum(1, 2, 3, 4)); // Output: 10

• Used to handle multiple arguments dynamically!

6. Default Parameters – Function Defaults

function greet(name = "Guest") {

    return `Hello, ${name}!`;

}

console.log(greet()); // Output: Hello, Guest!

• Prevents errors when arguments are missing!

7. import & export – Modular JavaScript

Before ES6, JavaScript didn’t support modules natively.

Exporting a Function

export const greet = (name) => `Hello, ${name}!`;

Importing a Function

import { greet } from './module.js';

console.log(greet("Alice"));

• Makes code modular and reusable!

8. map(), filter(), reduce() – Powerful Array Methods

map() – Transforming Arrays

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(num => num * 2);

console.log(doubled); // Output: [2, 4, 6, 8]

filter() – Filtering Arrays

const nums = [1, 2, 3, 4, 5];

const evenNums = nums.filter(num => num % 2 === 0);

console.log(evenNums); // Output: [2, 4]

reduce() – Aggregating Values

const prices = [10, 20, 30];

const total = prices.reduce((sum, price) => sum + price, 0);

console.log(total); // Output: 60

• Functional programming at its best!

Final Recap – What We Learned!

• ECMAScript (ES) is the official standard for JavaScript

• ES6+ introduced modern features like let, const, and arrow functions

• Template literals (), destructuring, and spread/rest operators simplify code

• New array methods (map, filter, reduce) make functional programming easier

• Modules (import/export) allow for better code organization

Quick Challenge – Can You Solve This?

const users = [

    { name: "Alice", age: 25 },

    { name: "Bob", age: 30 },

    { name: "Charlie", age: 22 }

];

// Write a function that returns names of users above 24 using map() & filter()

Can you write this function using ES6+ features?

Next Up: Asynchronous JavaScript & APIs!