When attempting to print the elements of an array, an "undefined" value unexpectedly appeared

Question

When attempting to print the elements of an array, an "undefined" value unexpectedly appeared

I recently wrote a Javascript code to display a list of items, but for some reason an unexpected undefined text is appearing before the ordered list. I am quite puzzled as to why this issue is occurring.

I am wondering if there is a variable that has not been defined correctly or perhaps inserted in the wrong way within this particular block of code?

You can also view the demo on JSBIN. (Additionally, here is an alternative method to write the code with the same objective.)

var playList = [
  "First Life",
  "Spaceman",
  "Run run run"
];

function print(message) {
  message += "<ol>";
  for (var i=0; i<playList.length; i+=1) {
    message += "<li>" + playList[i]+"</li>";
  }
  message += "</ol>";
  document.write(message);
}

print();

javascript function variables parameters undefined

Answer 1

Answer №1

When you don't pass anything to the print() function as a parameter, the value of message defaults to undefined.

You can utilize the OR operator || to assign an empty string to message if no value is passed to the function.

var playList = [
  "First Life",
  "Spaceman",
  "Run run run"
];

function print(message) {
  message = message || ''; // Set message to empty string if not passed

  message += "<ol>"; // Removed unnecessary +

  for (var i = 0; i < playList.length; i += 1) {
    message += "<li>" + playList[i] + "</li>";
  }
  message += "</ol>";
  document.write(message);
}

print();

You can also simplify your code like this:

var playList = [
  "First Life",
  "Spaceman",
  "Run run run"
];

function print(message) {
  document.write((message || '') + '<ol><li>' + playList.join('</li><li>') + '</li></ol>');
}

print();

ol {
  color: green;
}

Answer 2

When you don't pass anything to the print() function as a parameter, the value of message defaults to undefined.

You can utilize the OR operator || to assign an empty string to message if no value is passed to the function.

var playList = [
  "First Life",
  "Spaceman",
  "Run run run"
];

function print(message) {
  message = message || ''; // Set message to empty string if not passed

  message += "<ol>"; // Removed unnecessary +

  for (var i = 0; i < playList.length; i += 1) {
    message += "<li>" + playList[i] + "</li>";
  }
  message += "</ol>";
  document.write(message);
}

print();

You can also simplify your code like this:

var playList = [
  "First Life",
  "Spaceman",
  "Run run run"
];

function print(message) {
  document.write((message || '') + '<ol><li>' + playList.join('</li><li>') + '</li></ol>');
}

print();

ol {
  color: green;
}

When attempting to print the elements of an array, an "undefined" value unexpectedly appeared

Answer №1

Similar questions

Preventing the removal of a choice by disabling it in the selector

Launching a new tab with a specific URL using React

"Utilize Ajax and PHP to seamlessly upload a PDF file directly into a MYSQL database

Access an external URL by logging in, then return back to the Angular application

Searching for NavigationEnd events specifically in Angular 12?

Is it possible for JavaScript to identify modifications in the HTML, like an input made with Ctrl+Shift+I?

Apply a border to the navbar when it hovers over a selected element

Parent controller was not in command before Child执行

Choosing a specific column in an HTML table using jQuery based on the text within it

Deleting multiple data records in PHP/SQL by using a Select Option

Retrieving the value of an inner div upon clicking the outer div

What is the process for converting a UTC datetime string into the local timezone of users?

How to add page breaks with spacing and page numbers in HTML to PDF conversion?

New from Firefox 89: The afterprint event!

How to implement multiple conditions with ng-if in HTML

Is there a way to apply the active class without relying on an anchor element?

Unique Identifier - primary export (ReactJS - JavaScript)

What is the process for retrieving the width value from an input field using jQuery?

How to access a webpage on your Android device without the address bar visible

Having trouble rendering an object in my ThreeJS project. The error message says: "THREE.OBJLoader: Unexpected line: 'usemap glass'"