How to print a JavaScript array to the DOM

Last updated: May 13, 2022.

Raw printing of the array as a string

Appending a JavaScript array directly to the DOM causing it to be silently converted to string format before being appended:

/* Printing an array directly to the DOM */

const array = ["JavaScript", "TypeScript", "React"];

document.body.append(array);

// "JavaScript,TypeScript,React"

The same result is achieved by using the toString() method on the array and then appending it to the DOM:

/* Converting an array to a string to print to the DOM */

const array = ["JavaScript", "TypeScript", "React"];

const arrayString = array.toString();

document.body.append(arrayString);

// "JavaScript,TypeScript,React"

Adding spacing between elements with join()

To add spacing between the elements, use the join method, passing in the content to be concatenated between each element:

/* Add spacing between array elements with array.join() */

const array = ["JavaScript", "TypeScript", "React"];

const arrayJoined = array.join(', ')

document.body.append(arrayJoined);

// "JavaScript, TypeScript, React"

Printing in grammatically correct format

To print the list in readable format, "and" should appear before the final element in the list.

This can be achieved by adding "and " before the final array element, joining them and removing the final comma:

/* Print contents of an array as a grammatically correct list */

let array = ["JavaScript", "TypeScript", "React"];
 
// Sets final array element to "and " + final array element
if (array.length > 1) {
   array[array.length-1] = "and " + array[array.length-1];
}
console.log(array); // ["JavaScript","TypeScript","and React"]

// Join array (including and)
let stringJoined = array.join(', ');
console.log(stringJoined); // "JavaScript, TypeScript, and React"
 
// Slice joined array before and after final comma and concatenate the results
if (array.length > 1) {
   let firstPart = stringJoined.slice(0, stringJoined.lastIndexOf(','));
   let secondPart = stringJoined.slice(stringJoined.lastIndexOf(',')+1, stringJoined.length);
   stringJoined = firstPart + secondPart;
}
 
console.log(stringJoined);  // "JavaScript, TypeScript and React"

To make it resuable, create a utility function:

/* A utility function to convert array elements to a readable list */

function arrayToList (array) {
  if (array.length > 1) {
     array[array.length-1] = "and " + array[array.length-1];
  }

  let stringJoined = array.join(', ');

  if (array.length > 1) {
     let firstPart = stringJoined.slice(0, stringJoined.lastIndexOf(','));
     let secondPart = stringJoined.slice(stringJoined.lastIndexOf(',')+1, stringJoined.length);
     stringJoined = firstPart + secondPart;
  }  
  
  return stringJoined;
}

let myArray = ["JavaScript", "TypeScript", "React"];

arrayToList(myArray);

---