Loops, Arrays and Objects
Loops, arrays, and objects in JavaScript are like handy tools in a toolbox.
Loops allow us to repeat tasks without duplicating code, saving time and effort.
Arrays enable us to store and manipulate collections of data, making it easier to organize and access information.
Objects provide a way to structure data with key-value pairs, like a name and its corresponding value.
Incorporating these features in JavaScript enhances code readability, scalability, and maintainability - ultimately leading to more effective and robust software development.
Loops
The While Loop
A while loop is like a repeating command. It keeps doing something as long as a condition is true. Once the condition becomes false, it stops.
let count = 0; // Start counting from 0
// Keep looping as long as count is less than 5
while (count < 5) {
console.log("Count is: " + count); // Print the current count to the console
count++; // Increase count by 1 for the next iteration
}
This loop counts from 0 to 4. It starts with count set to 0. Then, as long as count is less than 5, it prints the current value of count to the console and increases count by 1. It stops when count reaches 5 because then the condition count < 5 becomes false.
A while loop keeps going forever if nothing stops it. That's why we need to make sure there's a condition that eventually becomes false, or else it never stops!
The For Loop
A for loop is like a countdown. You tell it where to start, where to end, and how to move each step. It keeps doing something until it reaches the end.
Here's a simple JavaScript loop that outputs the numbers from 1 to 12:
// Start incrementing from 1, keep going as long as i is less than or equal to 12, increase i by 1 each time
for (let i = 1; i <= 12; i++) {
console.log("i is: " + i); // Print the current value of i to the console
}
Check out this live example on CodePen.
Here's a simple JavaScript loop that outputs the 7 times table from 7 × 1 = 7 to 7 × 12 = 84:
// Start incrementing from 1, keep going as long as i is less than or equal to 12, increase i by 1 each time
for (let i = 1; i <= 12; i++) {
// Calculate the product of 7 and i, then construct the string to display the equation
// Print the current times table entry to the console
console.log(`7 x ${i} = ${7 * i}`);
}
Check out this live example on CodePen.
This code will print the multiplication tables for the numbers 1 through 12. Each table will be headed by a line saying, "1 times table:", followed by the results of multiplying 1 through 12. To achieve this, we will use a nested for loop.
// This outer loop starts at 1 and increments the variable 'i' up to and including 12
for(let i = 1; i <= 12; i++){
// For each iteration of the outer loop, print the heading for the times table of the current 'i' value
console.log(`${i} times table:`);
// This inner loop also starts at 1 and increments the variable 'j' up to and including 12
for(let j = 1; j <= 12; j++){
// For each iteration of the inner loop, calculate and print the product of 'i' and 'j'
console.log(`${j} * ${i} = ${j * i}`);
}
// After the inner loop completes, it moves on to the next iteration of the outer loop
}
Check out this live example on CodePen.
Arrays
Arrays are ordered lists of values. In JavaScript, an array is a single variable that stores multiple elements. Each element in an array can be accessed by its numerical index, with indexing starting at 0. Here's a simple example:
const favouriteFoods = ['Fish and Chips', 'Pizza', 'Bangers and Mash'];
In this example, favouriteFoods is an array that stores three strings. You can access the elements like this:
console.log(favouriteFoods[0]); // Outputs: Fish and Chips
console.log(favouriteFoods[1]); // Outputs: Pizza
console.log(favouriteFoods[2]); // Outputs: Bangers and Mash
Check out this live example on CodePen.
Arrays + Loops = BFFs
Arrays and loops are "Best Friends Forever" in programming. This is because combining arrays with loops is a powerful and common practice in many programming tasks. Here's a simple example in JavaScript to demonstrate how they work together:
const favouriteFoods = ['Fish and Chips', 'Pizza', 'Bangers and Mash'];
// Use a loop to iterate over the array and print each element
for (let i = 0; i < favouriteFoods.length; i++) {
console.log(favouriteFoods[i]);
}
// Outputs: Fish and Chips
// Outputs: Pizza
// Outputs: Bangers and Mash
Check out this live example on CodePen.
In this example, the loop goes through the favouriteFoods array and prints each element to the console. This illustrates the basic idea behind "Arrays + Loops = BFFs": loops enable you to efficiently work through each element of an array, making them an indispensable pairing in programming.
Objects
Objects in JavaScript are collections of key-value pairs where each key (also known as a property) maps to a value. This structure makes objects ideal for storing more complex data, as each property can hold values of various types, including numbers, strings, arrays, and even other objects. Here's how you can define and use an object that represents a simple pizza recipe:
const pizzaRecipe = {
title: 'Pizza',
servings: 2,
ingredients: ['pizza dough', 'tomato sauce', 'mozzarella cheese', 'basil'],
directions: [
'Preheat the oven to 475°F (245°C).',
'Spread tomato sauce over the pizza dough.',
'Sprinkle mozzarella cheese on top.',
'Bake for 12-15 minutes.',
'Garnish with basil leaves before serving.'
]
};
In this example, pizzaRecipe is an object that stores information about a pizza recipe. You can access its properties using either dot notation or bracket notation:
// Dot notation
console.log(pizzaRecipe.title); // Outputs: Pizza
// Bracket notation
console.log(pizzaRecipe['servings']); // Outputs: 2
// A loop to print the list of ingredients
console.log('Ingredients:');
for (let ingredient of pizzaRecipe.ingredients) {
console.log(ingredient);
}
// A loop to print the directions
console.log('Directions:');
for (let step of pizzaRecipe.directions) {
console.log(step);
}
Object Functions/Methods
A method on an object is essentially a function that's attached to the object. It can perform actions using the object's data or modify that data. To add a function called letsCook to the pizzaRecipe object that outputs a message including the recipe title, you can define the function within the object itself. Then, you can call this new method to see the message. Here's how you would do it:
const pizzaRecipe = {
title: 'Pizza',
servings: 2,
ingredients: ['pizza dough', 'tomato sauce', 'mozzarella cheese', 'basil'],
directions: [
'Preheat the oven to 475°F (245°C).',
'Spread tomato sauce over the pizza dough.',
'Sprinkle mozzarella cheese on top.',
'Bake for 12-15 minutes.',
'Garnish with basil leaves before serving.'
],
letsCook () {
console.log(`I'm hungry! Let's cook ${this.title}.`);
}
};
// Call the letsCook method
pizzaRecipe.letsCook();
// Outputs: "I'm hungry! Let's cook Pizza."
Check out this live example on CodePen.
When you call pizzaRecipe.letsCook();, it will output: "I'm hungry! Let's cook Pizza." The this keyword in the letsCook function refers to the pizzaRecipe object itself, allowing you to access its title property.
Let's integrate all the components we've discussed into a simple front-end application. This application will allow us to manage our list of favorite foods - "Fish and Chips", "Pizza", and "Bangers and Mash". The application will feature two main functionalities:
- Add New Foods: Add a new favorite to the list.
- Remove Foods: Remove food that's no longer a favorite.
Check out this live example on CodePen.