JS Object comes out as undefined

May 2, 2022

When I write onto the document the object comes out as undefined and I don’t know why. Any help you be greatly appreciated. P.S I’m relatively new to JS so I am still learning.

function car(make, model, year, color, passengers, convertible, mileage) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.color = color;
  this.passengers = passengers;
  this.convertible = convertible;
  this.mileage = mileage;
}

var carParams = {
  make: "Toyota",
  model: "Prius",
  year: 2012,
  color: "red",
  passengers: 1,
  convertible: false,
  mileage: 3403,
};
var toyota = new car(carParams);
document.write(
  "The " +
  toyota.make +
  " " +
  toyota.model +
  " is a really fast car because it is " +
  toyota.color +
  "."
);

>Solution :

You’re passing one argument (an object) into the car constructor, but the car constructor expects you to pass multiple arguments, one for each of the attribute of the car. So the one argument you are passing is saved as the make (that’s why you see "[object Object]"), and everything else is the value undefined.

Either pass discrete arguments (no object, just a long arguments list), like this:

function car(make, model, year, color, passengers, convertible, mileage) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.color = color;
    this.passengers = passengers;
    this.convertible = convertible;
    this.mileage = mileage;
}

var toyota = new car(
    "Toyota",
    "Prius",
    2012,
    "red",
    1,
    false,
    3403,
);
document.write(
      "The " +
      toyota.make +
      " " +
      toyota.model +
      " is a really fast car because it is " +
      toyota.color +
      "."
);

But passing in that many discrete arguments, it’s easy to get the order wrong, or to forget which one is which (although modern IDEs make that a lot easier), so passing in an object asyou did can be clearer since you specify the property names explicitly. When you want to do that, you need to accept a single parameter (the entire object) and use that. In modern code, you’d probably do that with destructuring, which leads to a very small change to your code:

function car({make, model, year, color, passengers, convertible, mileage}) {
    //       ^                                                          ^
    this.make = make;
    this.model = model;
    this.year = year;
    this.color = color;
    this.passengers = passengers;
    this.convertible = convertible;
    this.mileage = mileage;
}

var carParams = {
    make: "Toyota",
    model: "Prius",
    year: 2012,
    color: "red",
    passengers: 1,
    convertible: false,
    mileage: 3403,
};
var toyota = new car(carParams);
document.write(
      "The " +
      toyota.make +
      " " +
      toyota.model +
      " is a really fast car because it is " +
      toyota.color +
      "."
);

For clarity, that does effectively the same thing this does:

function car(params) {
    this.make = params.make;
    this.model = params.model;
    this.year = params.year;
    this.color = params.color;
    this.passengers = params.passengers;
    this.convertible = params.convertible;
    this.mileage = params.mileage;
}

var carParams = {
    make: "Toyota",
    model: "Prius",
    year: 2012,
    color: "red",
    passengers: 1,
    convertible: false,
    mileage: 3403,
};
var toyota = new car(carParams);
document.write(
      "The " +
      toyota.make +
      " " +
      toyota.model +
      " is a really fast car because it is " +
      toyota.color +
      "."
);

A couple of side notes:

While it may be okay in very simple tests like this one, in general, avoid document.write. Instead, use DOM methods to create an add elements to the page.
The overwhelmingly-common convention in JavaScript code is that constructor functions like your car start with a capital letter (Car). You don’t have to follow that convention, but I recommend you do, it’ll make your code much clearer to other people reading it.
The var keyword is effectively deprecated. Use let or const.