Level Up Your JavaScript with ES6!
{ ES6 }
1
What is the DOM ?
3
DOM Manipulation
Summary
2
DOM Elements
4
DOM Events
# What is the DOM ?
1. What is ECMAScript ?
ES6 (ECMAScript 2015)
ES6, also known as ECMAScript 2015, introduced a plethora of new features to JavaScript, making the language more powerful and developer-friendly. It addressed common issues, streamlined syntax, and brought JavaScript closer to other modern programming languages.
# What is HTML?

# Essential Extensions
2. Variable Declaration
The New Guards of Variables!
# VSC Interface Overview
let and const
let age = 25; // Can be updated
const PI = 3.14; // Cannot be re-assigned
// Block scope demonstration
if (true) {
let x = 10;
const y = 20;
console.log(x, y); // Works inside the block
}
// console.log(x, y); // Error: x and y are not defined outside the block
- let: Used for block-scoped variables. Unlike var, it cannot be re-declared in the same scope.
- const: Declares constants. These cannot be re-assigned after initialization.
# Attributes
3. Template Literals
# VSC Interface Overview
Template Literals
const name = "Alice";
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// Multi-line strings
const multiLine = `
This is a string
spanning multiple
lines.`;
console.log(multiLine);
Template literals allow embedding expressions and multi-line strings, using backticks (`) instead of quotes.
4. Ternary Operator
# VSC Interface Overview
Ternary Operator
condition ? expressionIfTrue : expressionIfFalse;
The ternary operator is a concise alternative to if-else statements.
Syntax
const age = 20;
const canVote = age >= 18 ? "Yes, you can vote." : "No, you cannot vote.";
console.log(canVote);
Exemple
5. Arrow Functions
# VSC Interface Overview
Arrow Functions
const add = (a, b) => a + b; // Implicit return
const greet = name => `Hello, ${name}!`; // Single argument doesn't need parentheses
const sayHi = () => console.log("Hi!"); // No arguments
Arrow functions provide a shorthand way to write functions.
Syntax
const numbers = [1, 2, 3];
const squared = numbers.map(num => num ** 2);
console.log(squared); // [1, 4, 9]
Exemple
6. Array Functions
# VSC Interface Overview
Array Functions
ES6 brought several new methods for array manipulation:
-
map
: Transforms each element. -
filter
: Filters elements based on a condition. -
reduce
: Reduces the array to a single value. -
find
: Returns the first element matching a condition.
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
const squares = numbers.map(num => num ** 2);
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(evens); // [2, 4]
console.log(squares); // [1, 4, 9, 16, 25]
console.log(sum); // 15
8. Destructuring
# VSC Interface Overview
Destructuring
Destructuring is an ES6 feature that simplifies the process of extracting values from arrays or objects into distinct variables. It makes the code more concise and readable, especially when dealing with complex data structures.
# VSC Interface Overview
1. Array Destructuring
You can extract values from an array based on their positions.
const fruits = ["apple", "banana", "cherry"];
// Destructure into variables
const [first, second, third] = fruits;
console.log(first); // Output: "apple"
console.log(second); // Output: "banana"
console.log(third); // Output: "cherry"
Array Destructuring:
# VSC Interface Overview
1. Array Destructuring
You can skip unwanted elements by leaving placeholders.
const numbers = [10, 20, 30, 40];
const [, second, , fourth] = numbers;
console.log(second); // Output: 20
console.log(fourth); // Output: 40
Skipping Elements:
# VSC Interface Overview
1. Array Destructuring
Provide default values in case the array doesn’t have enough elements.
const colors = ["red"];
const [primary, secondary = "blue"] = colors;
console.log(primary); // Output: "red"
console.log(secondary); // Output: "blue"
Default Values:
# VSC Interface Overview
1. Array Destructuring
Destructuring can swap variable values without a temporary variable.
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Output: 2
console.log(b); // Output: 1
Swapping Variables:
# VSC Interface Overview
2. Object Destructuring
Extract properties from objects and assign them to variables.
const user = { name: "Alice", age: 25 };
// Destructure into variables
const { name, age } = user;
console.log(name); // Output: "Alice"
console.log(age); // Output: 25
Basics:
# VSC Interface Overview
2. Object Destructuring
You can rename variables while destructuring.
const user = { name: "Bob", age: 30 };
const { name: userName, age: userAge } = user;
console.log(userName); // Output: "Bob"
console.log(userAge); // Output: 30
Renaming Variables:
# VSC Interface Overview
2. Object Destructuring
Provide defaults for missing properties.
const product = { title: "Laptop" };
const { title, price = 1000 } = product;
console.log(title); // Output: "Laptop"
console.log(price); // Output: 1000
Default Values:
# VSC Interface Overview
2. Object Destructuring
Extract values from nested objects.
const user = {
name: "Charlie",
address: {
city: "New York",
zip: 10001
}
};
const { name, address: { city, zip } } = user;
console.log(name); // Output: "Charlie"
console.log(city); // Output: "New York"
console.log(zip); // Output: 10001
Nested Destructuring:
# VSC Interface Overview
3. Mixed Destructuring
Combine destructuring for arrays and objects.
const data = {
title: "Post Title",
tags: ["JavaScript", "ES6", "Coding"]
};
const { title, tags: [firstTag, secondTag] } = data;
console.log(title); // Output: "Post Title"
console.log(firstTag); // Output: "JavaScript"
console.log(secondTag); // Output: "ES6"
# VSC Interface Overview
4. Function Parameters Destructuring
Destructure directly in function parameters to make code concise.
const printUser = ({ name, age }) => {
console.log(`Name: ${name}, Age: ${age}`);
};
const user = { name: "Diana", age: 28 };
printUser(user);
// Output: Name: Diana, Age: 28
# VSC Interface Overview
4. Function Parameters Destructuring
With Default Values:
const greet = ({ name = "Guest", age = "unknown" }) => {
console.log(`Hello, ${name}. You are ${age} years old.`);
};
greet({ name: "Eve" });
// Output: Hello, Eve. You are unknown years old.
Provide defaults in function parameters.
9. Spread and Rest Operator
# VSC Interface Overview
Spread VS Rest Operator
The spread
and rest
operators in ES6 use the same syntax: three dots (...
). However, their purpose and behavior are different.
# VSC Interface Overview
1. The Spread Operator (...)
What It Does:
- The spread operator expands the elements of an array or object into individual elements.
- It’s used to copy or combine arrays and objects or pass array elements as arguments to a function.
# VSC Interface Overview
1. The Spread Operator (...)
1.1 Expanding Arrays:
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5]; // Adds new elements
console.log(newNumbers); // Output: [1, 2, 3, 4, 5]
Use Cases:
1.2 Combining Arrays:
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4]
# VSC Interface Overview
1. The Spread Operator (...)
1.3 Copying Arrays (Immutable):
const original = [10, 20, 30];
const copy = [...original];
copy.push(40);
console.log(original); // Output: [10, 20, 30] (Unchanged)
console.log(copy); // Output: [10, 20, 30, 40]
Use Cases:
1.4 Expanding Objects:
const user = { name: "Alice", age: 30 };
const updatedUser = { ...user, location: "Paris" }; // Add a new property
console.log(updatedUser);
// Output: { name: "Alice", age: 30, location: "Paris" }
# VSC Interface Overview
1. The Spread Operator (...)
1.5 Function Arguments:
const numbers = [5, 10, 15];
console.log(Math.max(...numbers)); // Output: 15
Use Cases:
# VSC Interface Overview
2. The Rest Operator (...)
- The rest operator collects the remaining elements of an array or object into a single variable.
- It’s used in function parameters to handle variable numbers of arguments or to gather properties into a new object.
What It Does:
# VSC Interface Overview
2. The Rest Operator (...)
2.1 Function Parameters:
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
Use Cases:
2.2 Collecting Remaining Array Items:
const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first); // Output: 10
console.log(second); // Output: 20
console.log(rest); // Output: [30, 40, 50]
# VSC Interface Overview
2. The Rest Operator (...)
2.3 Collecting Remaining Object Properties:
const user = { name: "Alice", age: 30, location: "Paris" };
const { name, ...details } = user;
console.log(name); // Output: "Alice"
console.log(details); // Output: { age: 30, location: "Paris" }
Use Cases:
# VSC Interface Overview
3. Examples Showing Both in Action
const numbers = [1, 2, 3, 4, 5];
const [first, ...rest] = numbers; // Rest collects remaining items
console.log(first); // Output: 1
console.log(rest); // Output: [2, 3, 4, 5]
const newNumbers = [...rest, 6, 7]; // Spread expands elements
console.log(newNumbers); // Output: [2, 3, 4, 5, 6, 7]
Combining Both Operators:
# VSC Interface Overview
3. Examples Showing Both in Action
const user = { name: "Alice", age: 30, location: "Paris" };
const { location, ...personalDetails } = user; // Rest collects properties
console.log(personalDetails); // Output: { name: "Alice", age: 30 }
const updatedUser = { ...personalDetails, location: "London" }; // Spread expands properties
console.log(updatedUser); // Output: { name: "Alice", age: 30, location: "London" }
Mixing Objects:
- Think of spread as unpacking a suitcase (taking items out).
- Think of rest as packing a suitcase (gathering items in).
Pro Tip: Use Spread for Expansion and Rest for Gathering
END.
Copy of Copy of Copy of HTML introduction
By Fatima BENAZZOU
Copy of Copy of Copy of HTML introduction
- 141