JavaScript Tutorial Series: Looping through Arrays and Objects | js Arrays vs Objects

JavaScript Tutorial Series: Looping through Arrays and Objects | js Arrays vs Objects | web-beast.com

web-beast.com February 25, 2023

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',