JavaScriptProgrammingWeb DevelopmentBackendES6

JavaScript Mastery: Control Flow, Loops, and Functions (Part 2)

Deep dive into JavaScript logic. Master conditional statements, loops, functional programming, scope, and powerful built-in array and object methods with practical examples.

July 2, 2026

25 min read

JavaScript Mastery: Control Flow, Loops, and Functions (Part 2)

Welcome back to our comprehensive JavaScript journey! In Part 1, we learned how to store data using variables and identified the distinct data types that form the bedrock of the language. However, storing data is only half the battle; real programming happens when we start making decisions with that data.

Think of Part 1 as gathering the raw materials. Part 2 is where we build the engine. We will explore how to make our code execute conditionally, repeat tasks efficiently without rewriting code, and encapsulate logic into reusable blocks called functions.

Functions are the absolute lifeblood of JavaScript. Understanding how they handle inputs, return outputs, and behave across different execution contexts (scopes) separates a beginner who copies snippets from an engineer who writes architectures.

Additionally, we won't just stop at basic syntax. We will dive deep into how modern JavaScript iterates over collection data types like Arrays and Objects using advanced declarative methods like map, filter, and reduce.

By the end of this deep-dive guide, your code will transform from simple top-to-bottom scripts into dynamic, logical, and highly modular programs capable of handling complex application workflows.

// If-Else Conditional Logic

conditionals.js

let totalScore = 85;

if (totalScore >= 90) {
  console.log("Grade: A");
} else if (totalScore >= 75) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

// The Ternary Operator Shortcut

ternary.js

let age = 21;
let accessAllowed = (age >= 18) ? "Access Granted" : "Access Denied";

console.log(accessAllowed);

// Switch Statement for Multi-way Matching

switch.js

let targetDay = "Wednesday";

switch (targetDay) {
  case "Monday":
    console.log("Start of the workweek!");
    break;
  case "Wednesday":
    console.log("Midweek momentum!");
    break;
  case "Friday":
    console.log("Weekend is almost here!");
    break;
  default:
    console.log("Just another wonderful day.");
}

Directing Code with Control Flow

Control flow is the order in which individual statements, instructions, or function calls are executed in a script. By default, JavaScript executes code sequentially from the first line to the last line. Conditionals break this linear path, creating crossroads in your program.

The traditional 'if...else' block evaluates expressions to a boolean value (true or false). If the expression is 'truthy', the block runs. JavaScript also features strict structural comparisons through the 'switch' statement, which is cleaner when testing a single variable against multiple distinct static values.

Modern developers frequently swap out simple 'if...else' blocks for the Ternary Operator (condition ? expr1 : expr2). It keeps code concise, readable, and perfectly suited for inline value assignments or rendering dynamic content in frontend frameworks like React.

The Power of Loops: Stopping Repetitive Code

Writing the same line of code multiple times is an anti-pattern known as violating the DRY (Don't Repeat Yourself) principle. Loops allow us to run a specific block of code a set number of times, or as long as a certain condition remains true.

JavaScript provides several classic loop structures: the traditional 'for' loop (perfect when you know exactly how many iterations you need), the 'while' loop (ideal when looping depends on a dynamic condition), and the 'do...while' loop (guarantees the code block executes at least once before testing the condition).

Modern ES6 introduces specialized loop constructs like 'for...of' for cleanly iterating through values in arrays or strings, and 'for...in' for walking through the keys of an enumerable object. Mastering these prevents bugs like the infamous infinite loop, which can lock up a user's browser.

// Classic For and While Loops

classicLoops.js

// For Loop
for (let i = 1; i <= 3; i++) {
  console.log("Count is: " + i);
}

// While Loop
let batteryLevel = 3;
while (batteryLevel > 0) {
  console.log("Device active, power: " + batteryLevel);
  batteryLevel--;
}

// Modern Iteration: for...of and for...in

modernLoops.js

const skills = ["JavaScript", "Python", "DevOps"];
// Iterating values
for (const skill of skills) {
  console.log("Skill: " + skill);
}

const database = { name: "MongoDB", type: "NoSQL" };
// Iterating object properties
for (const key in database) {
  console.log(key + ": " + database[key]);
}

// Loop Control: Break and Continue

loopControl.js

for (let i = 1; i <= 5; i++) {
  if (i === 2) continue; // Skip remaining code in this iteration
  if (i === 4) break;    // Exit the loop completely
  console.log("Number: " + i);
}

While control flow and loops manage logic flow, functions structure the entire codebase. Functions act as reusable machines: you define them once, pass distinct inputs (arguments) into them, and receive output results cleanly via return statements.

In JavaScript, functions are first-class citizens. This means they behave just like any other variable; they can be passed into other functions as arguments, assigned to variables, and returned from functions. This unique property opens up the world of Functional Programming.

Understanding the mechanics of functions requires a clear grasp of Scope. Global scope variables are accessible everywhere, function/local scope isolates variables to their parent function, and block scope (thanks to let and const) ensures variables locked inside loops or conditional brackets don't spill out and cause conflicts.

// Function Declarations vs. Expressions

functions.js

// Function Declaration (Hoisted)
function calculateArea(width, height) {
  return width * height;
}

// Function Expression
const formatName = function(first, last) {
  return first + " " + last;
};

console.log(calculateArea(5, 10));
console.log(formatName("Puneet", "Tiwari"));

// Modern ES6 Arrow Functions

arrowFunctions.js

// Concise syntax with implicit return
const multiplyByTwo = num => num * 2;

const greetUser = (user, role) => {
  return "Welcome " + user + ", Role: " + role;
};

console.log(multiplyByTwo(8));
console.log(greetUser("Puneet", "Developer"));

// Essential Built-in Array Methods

arrayMethods.js

const figures = [10, 20, 30, 40];

// 1. Map: Transform elements
const doubleFigures = figures.map(x => x * 2);

// 2. Filter: Keep elements meeting a condition
const valuesAbove25 = figures.filter(x => x > 25);

// 3. Reduce: Accumulate elements into a single value
const grandTotal = figures.reduce((accumulator, current) => accumulator + current, 0);

console.log(doubleFigures); // [20, 40, 60, 80]
console.log(valuesAbove25); // [30, 40]
console.log(grandTotal);     // 100

// Useful Object Static Methods

objectMethods.js

const laptop = { brand: "Apple", chip: "M3", ram: "16GB" };

console.log(Object.keys(laptop));   // ['brand', 'chip', 'ram']
console.log(Object.values(laptop)); // ['Apple', 'M3', '16GB']
console.log(Object.entries(laptop)); // Nested key-value arrays

Summary

Brilliant work! You have cleared the biggest hurdle in programming by mastering structural logic and data transformations. You now know how to make smart conditions, run efficient loops, write modern arrow functions, and seamlessly manipulate datasets using map, filter, and reduce. In our final article (Part 3), we will unleash the full modern power of JavaScript: diving into asynchronous programming (Promises and Async/Await), mastering the Fetch API for network requests, working with local storage, and learning how to dynamically update the UI using the Document Object Model (DOM). Keep coding!

Written By

Puneet Tiwari

Full Stack Developer