Head First JavaScript Programming (2014)

Chapter 12. Advanced Object Construction: Creating objects

So far we’ve been crafting objects by hand. For each object, we’ve used an object literal to specify each and every property. That’s okay on a small scale, but for serious code we need something better. That’s where object constructors come in. With constructors we can create objects much more easily, and we can create objects that all adhere to the same design blueprint—meaning we can use constructors to ensure each object has the same properties and includes the same methods. And with constructors we can write object code that is much more concise and a lot less error prone when we’re creating lots of objects. So, let’s get started and after this chapter you’ll be talking constructors just like you grew up in Objectville.

Creating objects with object literals

So far in this book, you’ve been using object literals to create objects. With an object literal, you create an object by writing it out... well, literally. Like this:

Object literals give you a convenient way to create objects anywhere in your code, but when you need to create lots of objects—say a whole fleet of taxis—you wouldn’t want to type in a hundred different object literals now would you?

BRAIN POWER

Think about creating a fleet of taxi objects. What other issues might using object literals cause?

Using conventions for objects

The other thing we’ve been doing, so far, is creating objects by convention. For example, we’ve been putting properties and methods together and saying “it’s a car!” or “it’s a dog!”, but the only thing that makes two such objects cars (or dogs) is that we’ve followed our own conventions.

Now, this technique might work on a small scale but it’s problematic when we have lots of objects, or even lots of developers working in the same code who might not fully know or follow the conventions.

But don’t take our word for it. Take a look at some of the objects we’ve seen earlier in the book, which we’ve been told are cars:

Introducing Object Constructors

Object constructors, or “constructors” for short, are your path to better object creation. Think of a constructor like a little factory that can create an endless number of similar objects.

In terms of code, a constructor is quite similar to a function that returns an object: you define it once and invoke it every time you want to create a new object. But as you’ll see there’s a little extra that goes into a constructor.

The best way to see how constructors work is to create one. Let’s revisit our old friend, the dog object, from earlier in the book and write a constructor to create as many dogs as we need. Here’s a version of the dog object we’ve used before, with a name, a breed and a weight.

Object constructors and functions are closely related. Keep that in mind as you’re learning how to write and use constructors.

Now, if we were going to define such a dog with an object literal, it would look like this:

But we don’t want just a Fido dog, we want a way to create any dog that has a name, a breed and a weight. And, again, to do that we’re going to write some code that looks like a function, with a dash of object syntax thrown in.

With that introduction, you must be a bit curious—go ahead and turn the page and let’s get these constructors figured out and working for us.

How to create a Constructor

Using constructors is a two-step process: first we define a constructor, and then we use it to create objects. Let’s first focus on creating a constructor.

What we want is a constructor that we can use to create dogs, and, more specifically, dogs with names, breeds and weights. So, we’re going to define a function, called the constructor, that knows how to create dogs. Like this:

SHARPEN YOUR PENCIL

We need your help. We’ve been using object literals to create ducks. Given what you learned above, can you write a constructor to create ducks for us? You’ll find one of our object literals below to base your constructor on:

How to use a Constructor

We said using a constructor is a two-step process: first we create a constructor, then we use it. Well, we’ve created a Dog constructor, so let’s use it. Here’s how we do that:

So, to create a new dog object with a name of “Fido”, a breed of “Mixed” and a weight of 38, we start with the new keyword and follow it by a call to the constructor function with the appropriate arguments. After this statement is evaluated, the variable fido will hold a reference to our new dog object.

Now that we have a constructor for dogs, we can keep making them:

var fluffy = new Dog("Fluffy", "Poodle", 30);

var spot = new Dog("Spot", "Chihuahua", 10);

That’s a bit easier than using object literals isn’t it? And by creating dog objects this way, we know each dog has the same set of properties: name, breed, and weight.

EXERCISE

How constructors work

We’ve seen how to declare a constructor and also how to use it to create objects, but we should also take a look behind the scenes to see how a constructor actually works. Here’s the key: to understand constructors we need to know what the new operator is doing.

We’ll start with the statement we used to create fido:

var fido = new Dog("Fido", "Mixed", 38);

Take a look at the right-hand side of the assignment, where all the action is. Let’s follow its execution:

BEHIND THE SCENES

1. The first thing new does is create a new, empty object:

2. Next, new sets this to point to the new object.

3. With this set up, we now call the function Dog, passing “Fido”, “Mixed” and 38 as arguments.

4. Next the body of the function is invoked. Like most constructors, Dog assigns values to properties in the newly created this object.

5. Finally, once the Dog function has completed its execution the new operator returns this, which is a reference to the newly created object. Notice this is returned for you; you don’t have to explicitly return it in your code. And after the new object has been returned, we assign that reference to the variable fido.

BE THE BROWSER

Below, you’ll find JavaScript code with some mistakes in it. Your job is to play like you’re the browser and find the errors in the code. After you’ve done the exercise look at the end of the chapter to see if you found them all. And, hey by the way, this is Chapter 12. Feel free to make style comments too. You’ve earned the right.

function widget(partNo, size) {

var this.no = partNo;

var this.breed = size;

}

function FormFactor(material, widget) {

this.material = material,

this.widget = widget,

return this;

}

var widgetA = widget(100, "large");

var widgetB = new widget(101, "small");

var formFactorA = newFormFactor("plastic", widgetA);

var formFactorB = new ForumFactor("metal", widgetB);

You can put methods into constructors as well

The dog objects that the Dog constructor creates are just like the dogs from earlier in the book... except that our newly constructed dogs can’t bark (because they don’t have a bark method). This is easily fixed because in addition to assigning values to properties in the constructor, we can set up methods too. Let’s extend the code to include a bark method:

NOTE

By the way, as you know, methods in objects are properties too. They just happen to have a function assigned to them.

Take the bark method for a quick test drive

Enough talking about constructors, let’s add the code above to an HTML page, and then add the code below to test it:

var fido = new Dog("Fido", "Mixed", 38);

var fluffy = new Dog("Fluffy", "Poodle", 30);

var spot = new Dog("Spot", "Chihuahua", 10);

var dogs = [fido, fluffy, spot];

for (var i = 0; i < dogs.length; i++) {

dogs[i].bark();

}

EXERCISE

We’ve got a constructor to create coffee drinks, but it’s missing its methods.

We need a method, getSize, that returns a string depending on the number of ounces of coffee:

§ 8oz is a small

§ 12oz is a medium

§ 16oz is a large

We also need a method, toString, that returns a string that represents your order, like “You’ve ordered a small House Blend coffee.”

Write your code below, and then test it in the browser. Try creating a few different sizes of coffee. Check your answer before you go on.

JAVASCRIPT CONSOLE

You’ve ordered a medium House Blend coffee.

You’ve ordered a large Dark Roast coffee.

Here’s our output; yours should look similar.

THERE ARE NO DUMB QUESTIONS

DANGER ZONE

There’s one aspect of constructors you need to be very careful about: don’t forget to use the new keyword. It’s easy to do because a constructor is, after all, a function, and you can call it without new. But if you forget new on a constructor it can lead to buggy code that is hard to troubleshoot. Let’s take a look at what can happen when you forget the new keyword...

SAFETY CHECKLIST

Okay, let’s read the checklist to see why this might have happened:

THE CONSTRUCTOR EXPOSED

This week’s interview: Getting to know new

Head First: new, where have you been hiding? How did we get to Chapter 12 before seeing you?

new: There are still a lot of scripts out there that don’t use me, or use me without understanding me.

Head First: Why is that?

new: Because many scripters just use object literals or copy & paste code that uses me, without understanding how I work.

Head First: That’s a good point... object literals are convenient, and I myself am not quite clear on when or how to use you just yet.

new: Well it’s true, I am kind of an advanced feature. After all, to know how to use me, you first have to know how objects work, and how functions work, and how this works... it’s a lot to wrap your head around before you even learn about me at all!

Head First: Can you give us the elevator pitch about yourself? Now that our readers know about objects, functions, and this, it would be great for them to get motivated for learning about you.

new: Let me think for a second... Okay here you go: I’m the operator that operates on constructor functions to create new objects.

Head First: Umm, I hate to break it to you but that isn’t the best elevator pitch.

new: Gimme a break, I’m an operator, not a PR lackey.

Head First: Well, you do raise several questions with that pitch. First of all, you’re an operator?

new: Yup! I’m an operator. Put me in front of a function call and I change everything. An operator operates on its operands. In my case, I have only one operand and that operand is a function call.

Head First: Right, so explain exactly how you operate.

new: Well, first, I make a new object. Everyone thinks that the constructor function is what does it, but it’s actually me. It’s a thankless job.

Head First: Go on...

new: Okay, so then I call the constructor function and make sure that the new object I’ve created is referenced by the this keyword in the body of the function.

Head First: Why do you do that?

new: So that the statements in the body of the function have a way to refer to the object. After all, the whole point of a constructor function is to extend that object using new properties and methods. If you’re using the constructor to create objects like dogs and cars, you’re going to want those objects to have some properties, right?

Head First: Right. And then?

new: Then I make sure that the new object that was created is returned from the constructor. It’s a nice convenience so that developers don’t have to remember to return it themselves.

Head First: It does sound very convenient. Now why would anyone use an object literal after learning you?

new: Oh, object literal and I go way back. He’s a great guy, and I’d use him in a second if I had to create a quick object. But, you want me when you’ve got to create a lot of similar objects, when you want to make sure your objects are taking advantage of code reuse, when you want to ensure some consistency, and after you’ve learned a little more, to support some even more advanced uses.

Head First: More advanced? Oh do tell!

new: Now now, let’s keep these readers focused. We’ll talk more in the next chapter.

Head First: I think I need to re-read this interview first! Until then...

It’s Production Time!

You’ve learned your object construction skills just in time because we’ve just received a big order for cars and we can’t be creating them all by hand. We need to use a constructor so we can get the job done on time. We’re going to do that by taking the car object literals we’ve used so far in the book, and using them as a guide for creating a constructor to make cars.

Check out the various kinds of cars we need to build below. Notice we’ve already taken the liberty of making their properties and methods uniform, so they all match across each car. For now, we won’t worry about special options, or toy cars and rocket cars (we’ll come back to that later). Go ahead and take a look, and then let’s build a constructor that can create car objects for any kind of car that has these property names and methods:

EXERSICE

Use everything you’ve learned to create a Car constructor. We suggest the following order:

1. Start by providing the function keyword (actually we did that for you) followed by the constructor name. Next supply the parameters; you’ll need one for each property that you want to supply an initial value for.

2. Next, assign each property in the object its initial value (make sure you use this along with the property name).

3. Finally, add in the three car methods: start, drive and stop.

function ________(______________________________________________) {

}

NOTE

All your work goes here.

NOTE

Make sure you check all your work with the answer at the end of the chapter before proceeding!

Let’s test drive some new cars

Now that we have a way to mass-produce car objects, let’s make some, and put them through their paces. Start by putting the Car constructor in an HTML page, then add some test code.

NOTE

Note: you won’t be able to do this unless you did the exercise on the previous page!

Here’s the code we used; feel free to alter and extend it:

Are you starting to see how easy creating new objects can be with constructors? Now let’s take these cars for a test drive:

var cars = [chevy, cadi, taxi, fiat, testCar];

for(var i = 0; i < cars.length; i++) {

cars[i].start();

cars[i].drive();

cars[i].drive();

cars[i].stop();

}

JAVASCRIPT CONSOLE

Chevy Bel Air goes zoom zoom!

Chevy Bel Air goes zoom zoom!

GM Cadillac goes zoom zoom!

GM Cadillac goes zoom zoom!

Webville Motors Taxi goes zoom zoom!

Webville Motors Taxi goes zoom zoom!

Fiat 500 goes zoom zoom!

Fiat 500 goes zoom zoom!

Webville Motors Test Car goes zoom zoom!

Webville Motors Test Car goes zoom zoom!

Here’s the output we got. Did you add your own car to the mix? Try changing what the cars do (like driving before the car is started). Or, maybe you can make the number of times we call the drive method random?

Don’t count out object literals just yet

We’ve had some discussion of object constructors versus object literals, and mentioned that object literals are still quite useful, but you really haven’t seen a good example of that. Well, let’s do a little reworking of the Car constructor code, so you can see where using some object literals actually cleans up the code and makes it more readable and maintainable.

Let’s look at the Car constructor again and see how we might be able to clean it up a bit.

So the problem we’re highlighting here is that we have a heck of a lot of parameters in the Car constructor, making it difficult to read and maintain. It’s also difficult to write code to call this constructor. While that might seem like a minor inconvenience, it actually causes more bugs than you might think, and not only that, they’re often nasty bugs that are hard to diagnose at first.

NOTE

They’re hard to diagnose because if you switch two variables, the code is still syntactically correct, but it doesn’t function correctly because you’ve switched two values.

NOTE

Or if you leave out a value, all kinds of craziness can ensue!

However, there is a common technique that we can use when passing all these arguments that can be used for any function, whether or not it’s a constructor. The technique works like this: take all your arguments, throw them in an object literal, and then pass that literal to your function—that way you’re passing all your values in one container (the literal object) and you don’t have worry about matching the order of your arguments and parameters.

Let’s rewrite the code to call the Car constructor, and then do a slight rework of the constructor code to see how this works.

Rewiring the arguments as an object literal

Let’s take the call to the Car constructor and rework its arguments into an object literal:

And then we can rewrite the call to the Car constructor like this:

But we’re not done yet because the constructor itself is still expecting seven arguments, not one object. Let’s rework the constructor code, and then we’ll give this a test.

Reworking the Car constructor

Now you need to remove all the individual parameters in the Car constructor and replace them with properties from the object that we’re passing in. We’ll call that parameter params. You also need to rework the code a bit to use this object. Here’s how:

TEST DRIVE

Update the cadi and all your other cars, and test your code.

cadi.start();

cadi.drive();

cadi.drive();

cadi.stop();

EXERCISE

Copy the Car and Dog constructors into one file, and then add the code below along with it. Give this a run and capture the output.

NOTE

You’ll find the Dog constructor in You can put methods into constructors as well.

var limoParams = {make: "Webville Motors",

model: "limo",

year: 1983,

color: "black",

passengers: 12,

convertible: true,

mileage: 21120};

var limo = new Car(limoParams);

var limoDog = new Dog("Rhapsody In Blue", "Poodle", 40);

console.log(limo.make + " " + limo.model + " is a " + typeof limo);

console.log(limoDog.name + " is a " + typeof limoDog);

NOTE

Put the output here.

BRAIN POWER

Say someone handed you an object and you wanted to know what type of object it was (is it a Car? a Dog? Superman?), or you wanted to see if it was the same type as another object. Would the typeof operator be helpful?

THERE ARE NO DUMB QUESTIONS

Understanding Object Instances

You can’t look at a JavaScript object and determine that it is an object of a specific type, like a dog or a car. In JavaScript, objects are dynamic structures, and the type of all objects is just “object,” no matter what properties and methods it has. But we can get some information about an object if we know the constructor that created the object.

Remember that each time you call a constructor using the new operator, you are creating a new instance of an object. And, if you used, say, the Car constructor to do that, then we say, informally, that the object is a car. More formally, we say that object is an instance of a Car.

Now saying an object is an instance of some constructor is more than just talk. We can actually write code to inspect the constructor that made an object with the instanceof operator. Let’s look at some code:

As it turns out, one of the things the new operator does behind the scenes when the object is created is to store information that allows it to determine, at any time, the constructor that created the object. And instanceof uses that to determine if an object is an instance of a certain constructor.

NOTE

It’s a bit more complicated than we’re describing here, but we’ll talk about that in the next chapter.

JAVASCRIPT CONSOLE

Congrats, it's a Car!

EXERCISE

We need a function named dogCatcher that returns true if the object passed to it is a dog, and false otherwise. Write that function and test it with the rest of the code below. Don’t forget to check your answer at the end of the chapter before you go on!

Yes, that’s how it works. JavaScript doesn’t have a strong sense of an object’s type, so if you need to compare objects to see if they are both cats or both dogs, you check to see if they were constructed the same way—that is, with the same constructor function. As we’ve said, a cat is a cat if it was created by the Cat constructor, and a dog is a dog if it was created by the Dog constructor.

Now in the next chapter you’re going to see JavaScript constructors and objects are even more flexible than we’ve already seen. For instance, we might have an object that was created with a Taxi constructor, and yet we know that it is also a car. But for now, just stash that idea in the back of your brain and we’ll come back to it later.

Even constructed objects can have their own independent properties

We’ve talked a lot about how to use constructors to create consistent objects—objects that have the same set of properties and the same methods. But what we haven’t mentioned is that using constructors still doesn’t prevent us from changing an object into something else later, because after an object has been created by a constructor, it can be altered.

What exactly are we talking about? Remember when we introduced object literals? We looked at how we could add and delete properties after the object was created. You can do the same with objects created from constructors:

You can even add new methods if you like:

Notice that here we’re changing only the fido object. If we add a method to fido, only fido has that method. No other dogs have it:

Yes, a car is still a car, even if you change it later. And what we mean by that is if you check to see if your object is still an instance of Car, it will be. For instance, if we create a car object:

var cadiParams = {make: "GM", model: "Cadillac",

year: 1955, color: "tan",

passengers: 5, convertible: false,

mileage: 12892};

var cadi = new Car(cadiParams);

We can add a new property chrome and delete the property convertible:

cadi.chrome = true;

delete cadi.convertible;

and yet, the cadi is still a car:

cadi instanceof Car

NOTE

Evaluates to true.

Now is it really a car in practical terms? What if we deleted every property in the object? Would it still be a car? The instanceof operator would tell us yes. But judging by our own terms, probably not.

NOTE

This is what we meant earlier when we said that JavaScript has a dynamic type system.

Chances are, you won’t often want to use a constructor to create an object and then later change it into something that’s unrecognizable as an object created by that constructor. In general, you’ll use constructors to create objects that are fairly consistent. But if you need objects that are more flexible, well, JavaScript can handle that. It’s your job as a code designer to decide how to use constructors and objects in a way that makes sense for you (and don’t forget your coworkers).

Real World Constructors

JavaScript comes with a set of constructors for instantiating some handy objects—like objects that know how to deal with dates and times, objects that are great at finding patterns in text, and even objects that will give you a new perspective on arrays. Now that you know how constructors work, and also how to use the new keyword, you’re in a great position to make use of these constructors, or more importantly the objects they create. Let’s just take a quick dip into a couple, and then you’ll be all ready to go out and explore them on your own.

Let’s start with JavaScript’s built-in date object. To get one we just use its constructor:

Calling the Date constructor gives you back an instance of Date that represents the current local date and time. With a date object in hand, you can then use its methods to manipulate dates (and times) and also retrieve various properties of a date and time. Here are a few examples:

You can easily create date objects representing any date and time by passing additional arguments to the Date constructor. For instance, say you need a date object representing “May 1, 1983”, you can do that with:

And you can get even more specific by including a time:

We are, of course, just giving you a flyby of the date object; you’ll want to check out its full set of properties and methods in JavaScript: The Definitive Guide.

The Array object

Next up, another interesting built-in object: the array object. While we’ve been creating arrays using the square bracket notation [1, 2, 3], you can create arrays using a constructor too:

Here, we’re creating a new, empty array object. And at any time we can add items to it, like this:

We can also create array objects that have a specific size. Say we want an array with three items:

Here we’ve created an array of length three. Initially the three items in oddNumbers are undefined, but we then set each item in the array to a value. You could easily add more items to the array if you wanted.

None of this should be shockingly different than what you’re used to. Where the array object gets interesting is in its set of methods. You already know about array’s sort method, and here are a few other interesting ones:

Again, that’s just the tip of the iceberg, so take a look at JavaScript: The Definitive Guide to fully explore the array object. You’ve got all the knowledge you need to take it on.

Good catch. The bracket notation, [ ], that you’ve been using to create arrays is actually just a shorthand for using the Array constructor directly. Check out these two equivalent ways of creating empty arrays:

Likewise, if you write code like this:

That’s just a shorthand for using the constructor in another way:

And, the objects created from the literal notation or by using the constructor directly are the same, so you can use methods on either one.

You might be asking why you’d ever use the constructor rather than the literal notation. The constructor comes in handy when you need to create an array of a specific size you determine at runtime, and then add items to it later, like this:

So, for creating a quick array, using the array literal syntax to create your array objects works wonderfully, but using the Array constructor might make sense when you’re creating the array programmatically. You can use either or both as much as you want.

Even more fun with built-in objects

Date and array aren’t the only built-in objects in JavaScript. There are lots of other objects that come with the language you might find handy at times. Here’s a short list (there are more, so search online for “JavaScript’s standard built-in objects” if you’re curious!).

OBJECT

By using the Object constructor you can create objects. Like arrays, the object literal notation { } is equivalent to using new Object(). More on this later.

MATH

This object has properties and methods for doing math stuff. Like Math. PI and Math.random().

REGEXP

Use this constructor to create regular expression objects, which allow you to search for patterns, even complex ones, in text.

ERROR

This constructor creates standard error objects that are handy when catching errors in your code.

THERE ARE NO DUMB QUESTIONS

Webville Motors is revolutionizing car production by creating all their cars from a prototype car. The prototype gives you all the basics you need: a way to start, drive and stop it along with a couple properties like the make and year it was manufactured—but the rest is up to you. Want it to be red or blue? No problem, just customize it. Need for it to have a fancy stereo? No problem, go crazy, add it.

So this is your opportunity to design your perfect car. Create a CarPrototype object below, and make the car of your dreams. Check out our design at the end of the chapter before moving on.

BULLET POINTS

§ An object literal works well when you need to create a small number of objects.

§ A constructor works well when you need to create many similar objects.

§ Constructors are functions that are meant to be used with the new operator. We capitalize the names of constructors by convention.

§ Using a constructor we can create objects that are consistent, having the same property names and methods.

§ Use the new operator with a constructor function call to create an object.

§ When you use new with a constructor function call, it creates a new, empty object, which is assigned to this within the body of the constructor.

§ Use this in a constructor function to access the object being constructed and add properties to the object.

§ A new object is returned automatically by the constructor function.

§ If you forget to use new with a constructor, no object is created. This will cause errors in your code that can be difficult to debug.

§ To customize objects, we pass arguments to a constructor, and use those values to initialize the properties of the object being created.

§ If a constructor has a lot of parameters, consider consolidating them into one object parameter.

§ To know if an object was created by a specific constructor, use the instanceof operator.

§ You can modify an object that was created by a constructor just like you can modify an object literal.

§ JavaScript comes with a number of constructors you can use to create useful objects like date objects, regular expressions and arrays.

JAVASCRIPT CROSS

Construct some new connections in your brain with this crossword puzzle.

SHARPEN YOUR PENCIL SOLUTION

We need your help. We’ve been using object literals to create ducks. Given what you learned above, can you write a constructor to create ducks for us? You’ll find one of our object literals below to base your constructor on. Here’s our solution.

NOTE

P.S. We know you haven’t fully figured out how this all works yet, so for now concentrate on the syntax.

EXERCISE SOLUTION

Get some quick hands on experience to help this all sink in. Go ahead and put this code in a page and give it a test drive. Write your output here.

function Dog(name, breed, weight) {

this.name = name;

this.breed = breed;

this.weight = weight;

}

var fido = new Dog("Fido", "Mixed", 38);

var fluffy = new Dog("Fluffy", "Poodle", 30);

var spot = new Dog("Spot", "Chihuahua", 10);

var dogs = [fido, fluffy, spot];

for (var i = 0; i < dogs.length; i++) {

var size = "small";

if (dogs[i].weight > 10) {

size = "large";

}

console.log("Dog: " + dogs[i].name

+ " is a " + size

+ " " + dogs[i].breed);

}

JAVASCRIPT CONSOLE

Dog: Fido is a large Mixed

Dog: Fluffy is a large Poodle

Dog: Spot is a small Chihuahua

BE THE BROWSER SOLUTION

Below, you’ll find JavaScript code with some mistakes in it. Your job is to play like you’re the browser and find the errors in the code. Here’s our solution.

EXERCISE SOLUTION

We’ve got a constructor to create coffee drinks, but it’s missing its methods.

We need a method, getSize, that returns a string depending on the number of ounces of coffee:

§ 8oz is a small

§ 12oz is a medium

§ 16oz is a large

We also need a method, toString, that returns a string specifying your order.

Write your code below, and then test it in the browser. Try creating a few different sizes of coffee. Here’s our solution.

JAVASCRIPT CONSOLE

You’ve ordered a medium House Blend coffee.

You’ve ordered a large Dark Roast coffee

Here’s our output; yours should look similar.

EXERCISE SOLUTION

Use everything you’ve learned to create a Car constructor. We suggest the following order:

1. Start by providing the function keyword (actually we did that for you) followed by the constructor name. Next supply the parameters; you’ll need one for each property that you want to supply an initial value for.

2. Next, assign each property in the object its initial value (make sure you use this along with the property name).

3. Finally, add in the three car methods: start, drive and stop.

Here’s our solution.

EXERCISE SOLUTION

Copy the Car and Dog constructors into one file, and then add the code below along with it. Give this a run and capture the output. Here’s our result:

var limoParams = {make: "Webville Motors",

model: "limo",

year: 1983,

color: "black",

passengers: 12,

convertible: true,

mileage: 21120};

var limo = new Car(limoParams);

var limoDog = new Dog("Rhapsody In Blue", "Poodle", 40);

console.log(limo.make + " " + limo.model + " is a " + typeof limo);

console.log(limoDog.name + " is a " + typeof limoDog);

JAVASCRIPT CONSOLE

Webville Motors limo is a object

Rhapsody In Blue is a object

What we got.

EXERCISE SOLUTION

We need a function, dogCatcher, that returns true if the object passed to it is a Dog, and false otherwise. Write that function and test it with the rest of the code below. Here’s our solution:

Webville Motors is revolutionizing car production by creating all their cars from a prototype car. The prototype gives you all the basics you need: a way to start, drive and stop it along with a couple properties like the make and year it was manufactured—but the rest is up to you. Want it to be red or blue? No problem, just customize it. Need for it to have a fancy stereo? No problem, go crazy, add it.

So this is your opportunity to design your perfect car. Check out our design below.

JAVASCRIPT CROSS SOLUTION