One of the first things one learns with a new programming language is how to output information. For JavaScript that is running within a browser, there are several options, as shown in Table 8.2.

When first learning JavaScript, one often uses the alert() function. It instructs the browser to display a pop-up or modal dialog window (that is, the user cannot interact with the page until dismissing the dialog) displaying the string passed to the function. There are two other modal dialog options for outputting data, as can be seen in Figure 8.6.

Figure 8.6 JavaScript output options

These pop-ups may appear different to each user depending on their browser configuration. What is universal is that the pop-up obscures the underlying web page, and no actions can be done until the pop-up is dismissed.

Alerts are generally not used in production code but provide a quick way to temporarily display or gather simple information. However, using pop-ups can get tedious quickly. The user has to click OK to dismiss the pop-up, and if you use it in a loop, you may spend more time clicking OK than doing meaningful debugging. As an alternative, the examples in this chapter will often use the console.log() method (or one of its related cousins, such as console.warn() or console.dir()) since console output doesn’t interfere with the display of HTML content (see Figure 8.7).

Figure 8.7 Chrome JavaScript console

Finally, the document.write() method can be a useful way to output markup content from within JavaScript. This method is often used to output markup or to combine markup with JavaScript variables, as shown in the following ­example:

let name = "Randy"; 
document.write("<h1>Title</h1>"); 
// this uses the concatenate operator (+) 
document.write("Hello " + name + " and welcome");

At first glance, this method seems especially useful, since it appears comfortably close to PHP’s echo statement or Java’s System.out.println(). In this case, appearances can be deceiving.

The JavaScript document.write() method outputs a string of text to the document stream. Thus, it matters where in the document the method call resides. A call that injects text out of place may overwrite existing content or may get shifted to an inappropriate location. But the main problem with document.write() is that what it outputs doesn’t get added into the document tree and thus can’t be further manipulated by JavaScript.

JavaScript has two basic data types: reference types (usually referred to as objects) and primitive types (i.e., nonobject, simple types). What makes things a bit confusing for new JavaScript developers is that the language lets you use primitive types as if they are objects. The reason for this slipperiness is that objects in JavaScript are absolutely crucial. Almost everything within the language is an object, so the language provides easy ways to use primitives as if they were objects.

Primitive types represent simple forms of data. ES2015 defines six primitives, which can be seen in Table 8.3. JavaScript also has object representations of these primitives, which can be confusing!

Primitive variables contain the value of the primitive directly within memory. In contrast, object variables contain a reference or pointer to the block of memory associated with the content of the object. Figure 8.8 illustrates the difference in memory between primitive and reference variables.

Figure 8.8 Primitive types versus reference types

Even though the variables def and xyz in Figure 8.8 have the same content, because they are primitive types, they have separate memory locations. Thus, if we change the content of variable def, it will have no effect on variable xyz. But as you can see, since the variables foo and bar are reference types, they point to the memory of an object instance. Thus, changing the object they both point to (e.g., bar[0]=200) affects both instances (e.g., both bar[0] and foo[0] are equal to 200).

Now that you have been introduced to the differences between primitive and reference types, we should revisit the differences between let and const. As shown in Figure 8.9, you cannot reassign the value of a variable defined with a const. However, for a const variable that is assigned to a reference type (such as an object or array), its properties or elements can be changed.

Figure 8.9 let versus const

You might wonder, given the numerous possible runtime exceptions generated by the const examples in Figure 8.9, why should you ever use it? As you work with JavaScript, you will discover that you use objects and arrays more frequently than you use primitive data types, so the seeming limitations shown in Figure 8.9 are not as large as you might think. The most important reason for using const is that it tells the browser (and you, the developer) that a variable shouldn’t be changing. Sometimes (maybe even often) you don’t want a variable to be reassigned; using const can help catch subtle bugs that can occur when a variable is reassigned unexpectedly.

The example in Figure 8.8 illustrates the difference between primitive types and reference types. As mentioned earlier, reference types are more generally referred to as objects. Later in this chapter, we will spend quite a bit of time creating our own custom objects. But before we do that, we should mention that JavaScript has a variety of objects you can use at any time, such as arrays, functions, and the built-in objects. Some of the most commonly used built-in objects include Object, Function, Boolean, Error, Number, Math, Date, String, and Regexp.

Later we will also frequently make use of several vital objects that are not part of the language but are part of the browser environment. These include the document, console, and window objects.

All of these objects have properties and methods (see note) that you can use. For instance, the following example creates an object that uses one of these built-in functions (via the new keyword) and then invokes the toString() method.

let def = new Date(); 
// sets the value of abc to a string containing the current date 
let abc = def.toString();

let pi = Math.PI;
let tmp = Math.random();

For bill of $20 the tip should be $2

One of the most basic programming tasks in JavaScript is to combine string literals together with other variables. This is accomplished using the concatenate operator (+). For instance, Listing 8.1 demonstrates several simple uses of the concatenate operator.

const country = "France";
const city = "Paris";
const population = 67;
const count = 2;

let msg = city + " is the capital of " + country;
msg += " Population of " + country + " is " + population;

let msg2 = population + count;

// what is displayed in the console?
console.log(msg);
console.log(msg2);

In JavaScript the meaning of the + operator will depend on whether the values on either side of the operator are both numbers or not. If the + operator is being used on numbers, then it will perform arithmetic addition; if being used on a non-number, then it will perform string concatenation instead.

In Listing 8.1, the first console.log will output Paris is the capital of France Population of France is 67, while the second console.log will output 69 (because both sides of the + operator are numbers).

Newer versions of JavaScript have added an alternative technique for concatenation, namely, template literals, which can be seen demonstrated in Listing 8.2.

const country = "France";
const city = "Paris";

let msg = `${city} is the capital of ${country}`;

Notice that the literal character in this example is the back-tick (located to the left of the 1 key on most North American keyboards). The key benefit of template literals is that you can include variable references within the literal, thereby avoiding using the concatenate operator.