Welcome to Class 13! In this session, we dive into modern JavaScript (ES6+) features that make your code cleaner, more readable, and efficient. Today’s focus will be on:

• Arrow Functions
• Template Literals
• Destructuring
• Additional ES6+ Features (as bonus)

1. Arrow Functions

What Are Arrow Functions?

Arrow functions are a concise way to write function expressions introduced in ES6. They simplify function syntax and automatically bind this.

Syntax:

// Traditional function
function greet(name) {
  return "Hello, " + name;
}

// Arrow function
const greet = (name) => "Hello, " + name;

Examples:

Single parameter:

const square = x => x * x;
console.log(square(5)); // Output: 25

Multiple parameters:

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

No parameters:

const sayHi = () => "Hi there!";
console.log(sayHi()); // Output: "Hi there!"

Multi-line function body:

const calculateArea = (length, width) => {
  let area = length * width;
  return area;
};
console.log(calculateArea(4, 5)); // Output: 20

Arrow Function Caveats

• No this binding (uses parent scope’s this)
• Cannot be used as constructors
• No arguments object

2. Template Literals

What Are Template Literals?

A way to embed expressions inside strings using backticks (`), introduced in ES6.

Syntax:

`Text ${expression} more text`

Examples:

Basic usage:

const name = "Shohel";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: "Hello, Shohel!"

Multi-line strings:

const multiLine = `This is line 1
This is line 2`;
console.log(multiLine);

Expression evaluation:

const a = 5, b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`); // Output: Sum of 5 and 10 is 15

3. Destructuring

What is Destructuring?

Destructuring allows unpacking values from arrays or properties from objects into distinct variables.

Array Destructuring:

const colors = ["red", "green", "blue"];
const [first, second, third] = colors;
console.log(first); // "red"

Skipping values:

const [x, , z] = [1, 2, 3];
console.log(z); // 3

Default values:

const [a = 10, b = 20] = [undefined];
console.log(a, b); // 10, 20

Object Destructuring:

const user = {
  name: "Shohel",
  age: 30,
  country: "Bangladesh"
};

const { name, age } = user;
console.log(name, age); // Shohel 30

Renaming variables:

const { name: fullName } = user;
console.log(fullName); // Shohel

Nested objects:

const person = {
  contact: {
    email: "shohel@example.com"
  }
};

const { contact: { email } } = person;
console.log(email); // shohel@example.com

4. Bonus: Other Useful ES6+ Features

Default Parameters

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

Spread Operator (...)

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // Copy and add new elements
console.log(arr2); // [1, 2, 3, 4, 5]

Rest Parameters

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Object Property Shorthand

const username = "shohel";
const userAge = 30;

const user = { username, userAge };
console.log(user); // { username: 'shohel', userAge: 30 }

5. Practical Examples

Example 1: Function with Arrow, Destructuring, Template

const user = {
  name: "Shohel",
  email: "shohel@example.com"
};

const greetUser = ({ name, email }) => `Welcome ${name}, your email is ${email}.`;
console.log(greetUser(user));

Example 2: Combining Spread and Rest

const numbers = [1, 2, 3];
const more = [...numbers, 4, 5];

function logAll(...items) {
  console.log(items);
}

logAll(...more); // [1, 2, 3, 4, 5]

6. Key Takeaways

• Arrow Functions are cleaner, especially for callbacks.
• Template Literals simplify string construction and multi-line strings.
• Destructuring makes code readable and avoids repetitive access.
• ES6+ features improve productivity and reduce boilerplate code.

Homework

1. Rewrite a traditional function to arrow syntax.
2. Create a template literal that outputs a person’s full name and age.
3. Destructure an object and an array, and log the extracted values.
4. Use the spread operator to merge two arrays and remove duplicates using Set.

This wraps up Class 13: JavaScript ES6+ features. You’re now equipped to write more modern and readable JavaScript code! Want the next class breakdown?