11. Of Pizza, Types, Primitives, and Objects

It’s time to get serious. Srsly! In the past few chapters, we’ve been working with various kinds of values. You’ve worked with strings, numbers, booleans (aka true and false), functions, and various other built-in things that are part of the JavaScript language.

Below are some examples to jog your memory:

Click here to view code image

var someText = "hello, world!";
var count = 50;
var isActive = true;

Unlike other languages, JavaScript makes it really easy to specify and use these built-in things. You don’t even have to think about or plan ahead to use any of them. Despite how simple it is to use these different kinds of built-in things, there is a lot of detail that is hidden from you. Knowing these details is important because it will not only help you make sense of your code more easily, it may even help you to more quickly pinpoint what is going wrong when things aren’t working the way they should.

Now, as you can probably guess, “built-in-things” isn’t the proper way to describe the variety of values that you can use in JavaScript. There is a more formal name for the variety of values you can use in your code, and that name is types. In this chapter, you are going to get a gentle introduction to what they are.

Onwards!

In case you haven’t had pizza in a while, this is what a typical pizza looks like:

A pizza doesn’t just magically appear looking like this. It is made up of other ingredients—some simple and some not so simple as illustrated in Figure 11.1.

FIGURE 11.1 A pizza is made up of many smaller ingredients.

The simple ingredients are easy to spot. These would be your mushrooms and jalapeños. The reason these are simple is that you can’t break these ingredients apart any further:

They aren’t prepared. They aren’t made up of other simple ingredients. Just like the dude, they abide.

The not-so-simple, complex ingredients would be your cheese, sauce, crust, and the pepperoni. These are more complex for all the reasons the simple ones are...um...simple. These complex ingredients are made up of other ingredients:

Unfortunately for all of us, there is no one ingredient called cheese or pepperoni out there. You need to combine and prepare and add some more ingredients to make up some of the complex ingredients you see here. There is a subtle point that needs to be noted about complex ingredients. Their composition isn’t limited to just simple ingredients. Complex ingredients can themselves be made up of other complex ingredients. How scandalous?!!

Just like the cheese, sauce, pepperoni, mushrooms, and bacon in our version of a pizza, the basic types in JavaScript are String, Number, Boolean, Null, Undefined, and Object. Some of these types may be very familiar to you already, and some of them may not be. While we will look at all of these types in much greater detail in future chapters, Table 11.1 provides a very brief summary of what they do.

TABLE 11.1 Basic JavaScript Types

Now, while each of these types is pretty unique in what it does, there is a simple grouping they fall under. Just like with your pizza’s simple and complex ingredients, your types can be simple or complex as well. Except, in JavaScript terminology involving types, simple and complex are more formally known as primitive and object respectively. Another way of saying this is that your types in JavaScript are known as primitive types (or just primitives) and object types (or just objects).

The next two paragraphs are going to be really boring, and I don’t expect you to memorize what I am about to say. Your primitive types are your String, Number, Boolean, Null, and Undefined types. Any values that fall under this umbrella can’t be divided any further. They are the jalapeños and mushrooms of the JavaScript world. Anything that you create or use that is an Object, under the covers, is potentially made up of other primitive types or other Objects. Objects can also be empty, but we’ll cover all those details eventually.

As you can see, primitives are pretty easy to understand. There is no depth to them, and you pretty much get what you see when you encounter one. Your Object types are a bit more mysterious, and so they are the last thing I want to cover before unleashing details about all of these types is what Objects in JavaScript actually are.

Some objects like a paperweight don’t do much:

They just sit there. Other objects, like a television, go above and beyond the call of mere existence and do a lot of things:

A typical television takes input, allows you to turn it on or off, change the channel, adjust the volume, and do all sorts of television-y things.

The thing to realize is that objects come in different shapes, sizes, and usefulness. Despite the variations, objects are all the same at a high level. They are an abstraction. They provide an easy way for you to use them without having to worry about what goes on under the covers. Even the simplest objects hide a certain level of complexity that you simply don’t have to worry about.

For example, it doesn’t matter what goes on inside your TV, how the wires are connected, or what type of glue is used to hold everything together. Those are unnecessary details. All that you care about is that the TV does what it is told. When you want it to change the channel, the channel should change. When you adjust the volume, the volume should adjust. Everything else is just noise.

Basically, think of an object as a black box. There are some predefined/documented things it does. How it does them is something you can’t easily see. How it does its magic is also something you don’t really care about as long as it works. We’ll change that notion later when we learn to actually create the insides of an object, but let’s relish this simple and happy world for now.

TABLE 11.2 Some Pre-defined JavaScript Objects

The way you use these built-in objects is slightly different from how you use primitives. Each object has its own quirk regarding how you can use them as well. Explaining each object and how it is meant to be used is something that I will defer to for later, but here is a very short snippet of commented code to show you what is possible:

Click here to view code image

// an array
var names = ["Jerry", "Elaine", "George", "Kramer"];
var alsoNames = new Array("Dennis", "Frank", "Dee", "Mac");

// a round number
var roundNumber = Math.round("3.14");

// today's date
var today = new Date();

// a boolean object
var booleanObject = new Boolean(true);

// infinity
var unquantifiablyBigNumber = Infinity;

// a string object
var hello = new String("Hello!");

One thing that you may find puzzling is the existence of the Object-form of the string, boolean, and number primitives. On the surface, the Object-form and primitive-form of these types look very similar. Here is an example:

Click here to view code image

var movie = "Pulp Fiction";
var movieObj = new String("Pulp Fiction");

alert(movie);
alert(movieObj);

What you will see printed will be identical. Below the surface, though, both movie and movieObj are very different. One is literally a primitive of type string, and the other is of type Object. This leads to some interesting (and possibly incomprehensible) behavior that I will gradually touch upon as we explore the handful of built-in types that you’ve seen so far.