Mastering Control Flow and Iterations

Introduction

JavaScript’s control flow and iteration mechanisms are fundamental for making logical decisions and executing repetitive tasks efficiently in your code. These features allow developers to dictate the flow of their programs based on specific conditions, handle multiple possibilities with ease, and process collections or data structures systematically. Whether you’re determining outcomes using conditional statements like if or switch, or iterating over arrays and objects with various looping techniques, mastering these concepts is essential for building interactive and dynamic web applications.

In this blog, we’ll explore JavaScript’s versatile tools for decision-making and looping, including if, else, and else if statements, the switch construct, and loops like for, for…in, for…of, and while. We’ll also delve into controlling the flow of loops with break and continue and understanding iterables for more complex data manipulation. With real-world examples and step-by-step explanations, this guide will solidify your understanding and prepare you to handle advanced programming scenarios.

JavaScript if, else, and else if Statements

if Statement

The if statement executes a block of code if a specified condition evaluates to true.

let age = 18; if (age >= 18) { console.log(“You are eligible to vote.”); }

else Statement

The else statement executes a block of code when the if condition evaluates to false. let age = 16; if (age >= 18) { console.log(“You are eligible to vote.”); } else { console.log(“You are not eligible to vote.”); }

else if Statement

The else if statement allows you to test multiple conditions sequentially.

let marks = 85; if (marks >= 90) { console.log(“Grade: A”); } else if (marks >= 75) { console.log(“Grade: B”); } else { console.log(“Grade: C”); }

2. JavaScript switch Statement

The switch statement evaluates an expression and executes code based on matching cases. It’s a cleaner alternative to multiple else if statements.

let day = 2; switch (day) { case 1: console.log(“Monday”); break; case 2: console.log(“Tuesday”); break; case 3: console.log(“Wednesday”); break; default: console.log(“Invalid day”); }

3. JavaScript for Loop

The for loop repeats a block of code as long as a specified condition is true. for (let i = 0; i < 5; i++) { console.log(`Iteration ${i}`); }

Loop Breakdown:

1. Initialization: let i = 0;
2. Condition: i < 5
3. Increment: i++

4. JavaScript for…in Loop

The for…in loop iterates over enumerable properties of an object or array.

let student = { name: “John”, age: 20, grade: “A” }; for (let key in student) { console.log(`${key}: ${student[key]}`); }

5. JavaScript for…of Loop

The for…of loop iterates over iterable objects like arrays, strings, or sets.

let colors = [“red”, “green”, “blue”]; for (let color of colors) { console.log(color); }

6. JavaScript while Loop

The while loop repeats a block of code as long as a condition is true.

let i = 0; while (i < 3) { console.log(`Count: ${i}`); i++; } do…while Loop

Executes the block of code once before checking the condition.

let i = 0; do { console.log(`Count: ${i}`); i++; } while (i < 3);

7. JavaScript break and continue Statements

break Statement

Exits a loop entirely when a condition is met. for (let i = 0; i < 5; i++) { if (i === 3) break; console.log(i); }

continue Statement

Skips the current iteration and moves to the next one.

for (let i = 0; i < 5; i++) { if (i === 2) continue; console.log(i); }

8. JavaScript Iterables

Iterables are objects that can be looped over using for…of. Examples include arrays, strings, and sets.

Custom Iterables

You can create your own iterables by implementing the Symbol.iterator method. let myIterable = { *[Symbol.iterator]() { yield 1; yield 2; yield 3; } }; for (let value of myIterable) { console.log(value); // Outputs 1, 2, 3 }

JavaScript Sets

A Set in JavaScript is a collection of unique values. Unlike arrays, sets do not allow duplicate entries, making them a great choice for scenarios where data uniqueness is crucial. Sets can store any data type, whether primitive or object references.

Creating a Set

You can create a Set using the Set constructor.

const mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(2); // Duplicate values are ignored console.log(mySet); // Output: Set { 1, 2 }

Features of Sets:

Values in a Set are unique.
Sets maintain insertion order.
Sets are iterable, making them usable with for…of and other iteration methods.

JavaScript Set Methods

1. add()

Adds a new element to the Set.

const mySet = new Set(); mySet.add(‘apple’); mySet.add(‘banana’); console.log(mySet); // Output: Set { ‘apple’, ‘banana’ }

2. delete()

Removes a specified value from the Set.

mySet.delete(‘apple’); console.log(mySet); // Output: Set { ‘banana’ }

3. has()

Checks if a value exists in the Set. console.log(mySet.has(‘banana’)); // Output: true

4. clear()

Removes all elements from the Set.

mySet.clear(); console.log(mySet); // Output: Set {}

5. size Property

Returns the number of elements in the Set. console.log(mySet.size); // Output: 0

JavaScript Maps

A Map is a collection of key-value pairs. Unlike objects, Maps allow keys of any data type and maintain insertion order.Creating a Map

You can create a Map using the Map constructor.

const myMap = new Map(); myMap.set(‘name’, ‘John’); myMap.set(‘age’, 30); console.log(myMap); // Output: Map { ‘name’ => ‘John’, ‘age’ => 30 }

Features of Maps:

Keys can be any data type.
Maps maintain insertion order.
cMaps provide better performance for frequently adding and removing key-value pairs compared to objects.

JavaScript Map Methods

1. set()

Adds a key-value pair to the Map or updates an existing key.

myMap.set(‘job’, ‘developer’); console.log(myMap); // Output: Map { ‘name’ => ‘John’, ‘age’ => 30, ‘job’ => ‘developer’ }

2. get()

Retrieves the value associated with a key.

console.log(myMap.get(‘name’)); // Output: John

3. delete()

Removes a key-value pair by its key.

myMap.delete(‘age’); console.log(myMap); // Output: Map { ‘name’ => ‘John’, ‘job’ => ‘developer’ }

4. has()

Checks if a key exists in the Map.

console.log(myMap.has(‘job’)); // Output: true

5. clear()

Removes all key-value pairs from the Map.

myMap.clear(); console.log(myMap); // Output: Map {}

6. size Property

Returns the number of key-value pairs in the Map.

console.log(myMap.size); // Output: 2

Conclusion

In this blog, we thoroughly explored JavaScript’s control flow and iteration mechanisms, including conditional statements (if, else, and switch) and loops (for, while, for…in, for…of). We also covered how to control loop execution with break and continue and delved into the concept of iterables. These tools are foundational for efficient JavaScript programming, enabling you to build dynamic and interactive applications. Stay tuned for more advanced topics in the next blog!

Request more information

Mastering Control Flow and Iterations