Displaying JavaScript Array Elements

To display JavaScript array elements, you can read a specific index, loop through all values, join them into a string, log them to the console, or create DOM elements for display on a web page.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];

for (let i = 0; i < scripts.length; i++) {
  console.log(scripts[i]);
}

The loop starts at index 0 and continues while i < scripts.length, so it visits every existing index from the first to the last.

Display a Single Array Element Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts[2]); // JavaScript

If the index does not exist, the result is undefined.

Display the First and Last Elements Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts[0]);                  // PHP
console.log(scripts[scripts.length - 1]); // HTML

Do not use scripts[scripts.length] for the last item because that index is one position beyond the array.

Display All Elements with a Classic for Loop Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];

for (let i = 0; i < scripts.length; i++) {
  console.log(`${i}: ${scripts[i]}`);
}

0: PHP
1: ASP
2: JavaScript
3: HTML

A classic for loop is especially useful when your logic needs the numeric index.

Display Values with for...of Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];

for (const script of scripts) {
  console.log(script);
}

for...of is usually simpler when you only need each value and not its index.

Display Values with forEach() Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];

scripts.forEach((script, index) => {
  console.log(index, script);
});

forEach() calls your callback once for each visited element. Unlike a normal loop, you cannot stop it early with break.

Get the Index and Value Together with entries() Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];

for (const [index, script] of scripts.entries()) {
  console.log(index, script);
}

This is a readable alternative when you want both index and value but prefer for...of syntax.

Display an Array as a String with join() or toString() Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts.join(" : ")); // PHP : ASP : JavaScript : HTML
console.log(scripts.toString());  // PHP,ASP,JavaScript,HTML

Use join() when you need a custom separator. toString() uses commas.

Display Array Elements Safely on a Web Page Top ↑

For page output, create DOM elements and set textContent. This avoids treating array values as HTML.

<ul id="languageList"></ul>

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
const list = document.getElementById("languageList");

for (const script of scripts) {
  const item = document.createElement("li");
  item.textContent = script;
  list.appendChild(item);
}

This is preferable to using document.write(), which can replace an already-loaded document and is not appropriate for normal modern page rendering.

Why for...in Is Usually Not the Best Array Loop Top ↑

The original page demonstrated for...in to show array keys. It is valid JavaScript, but for...in enumerates property names and can include additional enumerable properties. For array values, prefer an index loop, for...of, entries(), or an array method.

const scripts = ["PHP", "ASP", "JavaScript"];

for (const key in scripts) {
  console.log(key, scripts[key]);
}

Empty Arrays, Empty Slots, and undefined Values Top ↑

const values = ["A", , undefined, "D"];

for (let i = 0; i < values.length; i++) {
  console.log(i, values[i], i in values);
}

An empty slot and an explicitly stored undefined can both read as undefined, but i in values distinguishes whether the property actually exists.

Update Displayed Array Elements After the Array Changes Top ↑

When an array changes, rerun a rendering function that clears the old DOM output and builds it from the current array state.

function renderList(values, list) {
  list.replaceChildren();

  for (const value of values) {
    const item = document.createElement("li");
    item.textContent = value;
    list.appendChild(item);
  }
}

This separates data management from display logic and avoids concatenating HTML strings from untrusted values.

Common Array Display Mistakes Top ↑

• Looping with i <= array.length and reading one index too far.
• Using array[array.length] as the last element.
• Forgetting that indexes start at 0.
• Using for...in without understanding that it enumerates property names.
• Inserting user-controlled values with innerHTML when plain text is intended.
• Expecting forEach() to support break.

Displaying Array Elements: Video Top ↑

Create Arrays → Array length → Display with join() → Add or Remove by Position → Display Two-Dimensional Arrays → ← Array Reference

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: