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.
  1. # 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.

Made with Slides.com