Loops and Functions

Loops and functions are fundamental building blocks in JavaScript, allowing you to automate tasks and organize your code efficiently. They help you avoid repetitive code and make your programs more dynamic.

What is a Loop?

A loop allows you to execute a block of code repeatedly. This is incredibly useful when you need to perform the same operation on multiple pieces of data or repeat an action a certain number of times. JavaScript offers various types of loops, but we’ll focus on the for loop, which is a common and versatile choice.

Basic Example: The for Loop

The for loop works by defining a starting point, a condition to check, and an increment step. It keeps looping as long as the condition is true.

for (let i = 0; i < 5; i++) {
  console.log("Iteration number: " + i);
}

Explanation:

• for (let i = 0; i < 5; i++): This sets up the loop.
  • let i = 0: Initializes a counter variable i to 0. i is often used as a loop counter.
  • i < 5: This is the condition. The loop continues as long as i is less than 5.
  • i++: This increments i by 1 after each iteration.
• console.log("Iteration number: " + i);: This line of code runs in each iteration, printing the current value of i to the console. The loop will run 5 times, printing 0, 1, 2, 3, and 4.

What is a Function?

A function is a block of reusable code designed to perform a specific task. Functions make your code more organized, readable, and easier to maintain. They allow you to define a set of instructions and then call those instructions whenever needed, without rewriting the code.

Basic Example: A Simple Function

Here’s a basic function that adds two numbers together:

function addNumbers(a, b) {
  const sum = a + b;
  return sum;
}
 
const result = addNumbers(5, 3);
console.log("The sum is: " + result); // Output: The sum is: 8

Explanation:

• function addNumbers(a, b): This defines a function named addNumbers that takes two parameters, a and b.
• const sum = a + b;: This line calculates the sum of a and b and stores it in a variable called sum.
• return sum;: This line returns the value of sum from the function.
• const result = addNumbers(5, 3);: This calls the function addNumbers with the arguments 5 and 3. The returned value (8) is stored in the result variable.
• console.log("The sum is: " + result);: This prints the result to the console.

Practical Usage: Functions with Loops

Let’s combine a loop and a function to calculate the squares of numbers:

function square(number) {
  return number * number;
}
 
for (let i = 1; i <= 3; i++) {
  const squaredValue = square(i);
  console.log(`The square of ${i} is ${squaredValue}`);
}

Explanation:

• A square function is created to calculate the square of a number.
• A for loop iterates from 1 to 3.
• Inside the loop, the square function is called with the current loop number (i).
• The result is printed to the console. The output will be:
  • The square of 1 is 1
  • The square of 2 is 4
  • The square of 3 is 9

Key Takeaways

• Loops automate repetitive tasks by executing code multiple times.
• Functions organize your code into reusable blocks, improving readability and maintainability.
• The for loop is a common type of loop, ideal when you know how many times you want to iterate.
• Functions can take input (parameters) and return output (values).
• Use functions and loops together to create powerful and efficient programs.