Windows 11 Is this code correct?

AlishS

New Member
Joined
Oct 27, 2022
Messages
9
I learn javascript from an online resource. I got to this example. Is there any possibility how to write this code "better"? Is it not antiquated?
Code:
<!DOCTYPE html>


<html>


<body>


<h1>JavaScript Arrays</h1>


<p>The best way to loop through an array is using a standard for loop:</p>


<p id="demo"></p>


<script> var fruits, text, fLen, i;


fruits = ["Banana", "Orange", "Apple", "Mango"];


fLen = fruits.length;


text = "<ul>";


for (i = 0; i < fLen; i++) {


text += "<li>" + fruits[i] + "</li>";


}

text += "</ul>";


document.getElementById("demo").innerHTML = text;

</script>



</body>



</html>
 


Last edited by a moderator:
To enhance the code snippet you provided for looping through a JavaScript array, you can consider modernizing it by incorporating more up-to-date JavaScript features and best practices. Here are some improvements you can make:

1. Use const Instead of var: Prefer using const or let for declaring variables.

2. Array Functions:
- forEach Method: Use forEach to loop through arrays more efficiently.
- Template Literal: Utilize template literals for cleaner string concatenation.

3. Use Modern Syntax:
- let and const: Use block-scoped declarations instead of var.
- Arrow Functions: Shorter syntax for function definitions.

4. Semantic HTML:
- Ensure your HTML structure adheres to best practices such as using a proper doctype and semantic elements.

Here's an updated version of your code with modern JavaScript features:

HTML:
<!DOCTYPE html>
<html>
<body>
  <h1>JavaScript Arrays</h1>
  <p>The best way to loop through an array is using a standard for loop:</p>
  <ul id="demo"></ul>
  <script>
    const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
    const ul = document.getElementById('demo');
    
    fruits.forEach(fruit => {
      const li = document.createElement('li');
      li.textContent = fruit;
      ul.appendChild(li);
    });
  </script>
</body>
</html>

With these updates, your code is now more concise, readable, and makes use of modern JavaScript practices. This approach results in a cleaner and more efficient way of looping through an array and updating the HTML content dynamically.
 


Back
Top