let animals = ["cat", "duck", "penguin"];
for (let i = 0; i < animals.length; i++) {
console.log(animals[i]);
}
"cat"
"duck"
"penguin"
let Person = {firstName: "Jane", lastName: "Doe", age: 20};
for (let key in Person) {
console.log(key + ": " + Person[key]);
}"firstName: Jane"
"lastName: Doe"
"age: 20"JavaScript is a popular programming language that is commonly used for creating dynamic web pages and interactive web applications. One of the core concepts in JavaScript is working with arrays and objects. In this tutorial series, we will explore how to loop through arrays and objects in JavaScript.
Looping through Arrays
An array is a data structure that holds a collection of values of the same data type. It can be a string, number, boolean, or any other data type in JavaScript. You can loop through an array using different methods, such as the for loop, for...of loop, forEach loop, and the map method.
For Loop
The for loop is a traditional way of iterating through an array. It uses a counter variable that starts at 0 and increments by 1 until it reaches the array's length.
const fruits = ['apple', 'banana', 'orange'];
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}
For...Of Loop
The for...of loop is a modern way of iterating through an array. It loops through each element in the array and assigns it to a variable.
const fruits = ['apple', 'banana', 'orange'];
for(let fruit of fruits){
console.log(fruit);
}
ForEach Loop
The forEach loop is a method that is available on an array. It iterates through each element in the array and executes a callback function for each element.
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
console.log(fruit);
});
Map Method
The map method is a functional programming method that is used to transform an array into a new array with modified values. It takes a callback function as an argument that returns the modified value.
const fruits = ['apple', 'banana', 'orange'];
const capitalizedFruits = fruits.map(function(fruit) {
return fruit.toUpperCase();
});
console.log(capitalizedFruits);
Looping through Objects
An object is a data structure that holds key-value pairs. You can loop through an object using different methods, such as the for...in loop, Object.keys method, and the Object.values method.
For...In Loop
The for...in loop is used to loop through an object's properties. It assigns each property key to a variable, which you can then use to access the property value.
const person = {
name: 'John',
age: 30,
occupation: 'Developer'
};
for(let key in person){
console.log(`${key}: ${person[key]}`);
}
Object.keys Method
The Object.keys method is used to retrieve an array of an object's keys. You can then loop through this array using a for loop or for...of loop.
const person = {
name: 'John',
age: 30,
occupation: 'Developer'
};
const keys = Object.keys(person);
for(let key of keys){
console.log(`${key}: ${person[key]}`);
}
Object.values Method
The Object.values method is used to retrieve an array of an object's values. You can then loop through this array using a for loop or for...of loop.
const person = {
name: 'John',
age: 30,
occupation: 'Developer'
};
const values = Object.values(person);
for(let value of values){
console.log(value);
}
