JavaScript ES6: Comprehensive Guide

JavaScript ES6: Comprehensive Guide 1

Key Features of ES6 2
1. let and const 3
Example: 3
2. Arrow Functions 3
Example: 3

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

1
3. Template Literals 3
Example: 3
4. Destructuring 3
Array Destructuring: 3
Object Destructuring: 4
5. Default Parameters 4
Example: 4
6. Spread and Rest Operators 4
Example: 4
7. Modules 4
Example: 4
8. Classes 5
Example: 5
9. Promises 5
Example: 5
10. Async/Await 5
Example: 6
Exercises 6
Exercise 1: Convert Function to Arrow Function 6
Exercise 2: Destructure an Object 6
Exercise 3: Write a Class 6
Multiple-Choice Questions 7
Question 1: 7
Question 2: 7
Question 3: 8
Best Practices 8

ES6 (ECMAScript 2015) introduced significant updates to JavaScript, making it more modern,
concise, and powerful. This guide will teach you ES6 features with code examples,
explanations, multiple-choice questions, and exercises.

Key Features of ES6

1. Block-Scoped Declarations: let and const

2. Arrow Functions
3. Template Literals
4. Destructuring
5. Default Parameters
6. Spread and Rest Operators
7. Modules (import/export)
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

2
 8. Classes
9. Promises and Async/Await
10. Iterators and Generators

1. let and const

● let: Block-scoped, reassignable.

● const: Block-scoped, not reassignable.

Example:
let x = 10;
x = 20; // Allowed
const y = 30;
// y = 40; // Error: Assignment to constant variable

Why Use: Avoids issues with var hoisting and scope.

2. Arrow Functions

Arrow functions provide a shorter syntax for function expressions and do not bind their own
this.

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

3. Template Literals

Template literals allow embedding variables and expressions within strings.

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

4. Destructuring

Destructuring allows unpacking values from arrays or properties from objects.

Array Destructuring:
const [a, b] = [1, 2];
console.log(a, b); // Output: 1 2
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

3
Object Destructuring:
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // Output: Alice 25

5. Default Parameters

Set default values for function parameters.

Example:
const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet()); // Output: Hello, Guest!
console.log(greet("Alice")); // Output: Hello, Alice!

6. Spread and Rest Operators

● Spread (...): Expands arrays or objects.

● Rest (...): Collects multiple arguments into an array.

Example:
// Spread
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]
// Rest
const sum = (...nums) => nums.reduce((a, b) => a + b);
console.log(sum(1, 2, 3, 4)); // Output: 10

7. Modules

Use import and export for modular code.

Example:

Export:

// file: math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Import:
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

4
// file: main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // Output: 8

8. Classes

ES6 introduced classes for object-oriented programming.

Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, my name is ${this.name} and I am ${this.age} years
old.`;
}
}
const alice = new Person("Alice", 25);
console.log(alice.greet());
// Output: Hello, my name is Alice and I am 25 years old.

9. Promises

Promises simplify asynchronous programming.

Example:
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 1000);
});
};
fetchData().then((data) => console.log(data));
// Output: Data fetched

10. Async/Await

Async/await is built on Promises and provides cleaner syntax for handling asynchronous
operations.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

5
Example:
const fetchData = async () => {
const data = await new Promise((resolve) => setTimeout(() =>
resolve("Data fetched"), 1000));
console.log(data);
};
fetchData();
// Output: Data fetched

Exercises

Exercise 1: Convert Function to Arrow Function

Rewrite the following as an arrow function:

function multiply(a, b) {
return a * b;
}

Solution:

const multiply = (a, b) => a * b;

Exercise 2: Destructure an Object

Given the following object, extract name and age:

const user = { name: "Bob", age: 30, country: "USA" };

Solution:

const { name, age } = user;

console.log(name, age); // Output: Bob 30

Exercise 3: Write a Class

Create a Car class with properties make, model, and year, and a method getDetails.

Solution:

class Car {
constructor(make, model, year) {

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

6
 this.make = make;
this.model = model;
this.year = year;
}
getDetails() {
return `${this.year} ${this.make} ${this.model}`;
}
}
const car = new Car("Toyota", "Corolla", 2022);
console.log(car.getDetails());
// Output: 2022 Toyota Corolla

Multiple-Choice Questions

Question 1:

What is the output of the following code?

const arr = [1, 2, 3];

const [x, y] = arr;
console.log(x, y);

1. 1, 2
2. undefined, undefined
3. [1, 2], undefined
4. Error

Answer: 1. 1, 2

Question 2:

What does the ... operator do in the following example?

const nums = [1, 2, 3];

const newNums = [...nums, 4];

1. Copies nums into newNums.

2. Combines arrays.
3. Adds numbers together.
4. Destructures nums.

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

7
Answer: 1. Copies nums into newNums.

Question 3:

What will the following code output?

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

console.log(greet());

1. Error
2. Hello, !
3. Hello, Guest!
4. undefined

Answer: 3. Hello, Guest!

Best Practices

1. Use let and const: Replace var with let or const for better scoping.
2. Prefer Arrow Functions: Use arrow functions for concise syntax, except where this
binding is required.
3. Use Default Parameters: Simplify function definitions with default values.
4. Leverage Modules: Split your code into reusable modules using import and export.
5. Handle Promises Properly: Use async/await for cleaner asynchronous code.

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis