Reading elements of an array with for loop using JavaScript

navya, Credit to volkotech-solutions Dec 11

We can print the array elements with the help of the loop concept, the popularly used method is for a loop. You can find them with below Snippet. 👇

array.js

//old method of for loop
let colors = ["Skyblue", "Orange", "White"];  	//defining array
for (let i = 0; i < colors.length; i++) {        	//looping through the elements of array
  console.log(colors[i] );		   	// printing the elements of array
}
//output
//Skyblue
//Orange
//White

array1.js

//we have also had shorthand operators to loop the array - newest methods
//method-1 using for in
//The use case of for in is to loop over the indexes or keys

let fruits = ["Apple", "Orange", "Pear", "false", false, 0];
for (let fruit in fruits) {
  console.log(fruit);
}
//output - returns the indexes/keys of an array
//0
//1
//2
//3
//4
//5

array2.js

//method-2 using for of 
//the use case of for of is to loop the elements over its values, a shorthand operator of for loop old method

let fruits = ["Apple", "Orange", "Pear", "false", false, 0];
for (let fruit of fruits) {
  console.log(fruit);
}
//output - returns the values of an array
//Apple
//Orange
//Pear
//false
//false
//0

index.html

<!--method-3 using for each-->
<!--for each is a function call for every array element-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>for each</title>
  </head>
  <body>
    <p id="output"></p>
    <script>
      let text = "";
      const color = ["skyblue", "orange", "pink"];
      color.forEach(colors); //function call
      document.getElementById("output").innerHTML = text;//getting out put through dom
      function colors(item, index) { //loop function
        text += index + " ** " + item + "<br>";			
      }
    </script>
  </body>
</html>

21 likes

Add to read list

Comments

Authors

Navya

Software engineer at VolkoTech Solutions

Dedicated and skilled Drupal Frontend developer, carrying 3+ years of experience with a proven track record of delivering high-quality, scalable web solutions and optimized themes with an organized Git workflow. Proficient in JavaScript, jQuery, HTML, CSS, SASS, Bootstrap, and PHP with a deep understanding of Drupal’s architecture and modules. Strong knowledge of web development best practices and search engine optimization principles.

VolkoTech Solutions

Drupal development company in india

Drupal web development & Consulting company in India.

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Reading elements of an array with for loop using JavaScript

Comments

Authors

Navya

VolkoTech Solutions

Read Next

Altering the User Password Reset Landing Page in Drupal 9/10

Open Link/URL in Same Tab/Window or New Tab in HTML & JS

Programmatically check table exists in database in Drupal 8/9

Creating Super Star Mahesh Babu Potrait with HTML and CSS

How to maintain multiple nodes versions in Linux Ubuntu 22

Device Compatibility & Responsive Design: Testing Guide & Best Practice

Building Responsive Web Designs with CSS Media Queries

Standards for creating a user-friendly navigation system

List of standards for better UX(User Experience)

Using CSS Grid and Flexbox to Create Responsive Web Pages

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Reading elements of an array with for loop using JavaScript

Related Posts

Share

Comments

Authors

Read Next