Parlez-vous JavaScript?

Successfully learning a programming language is very similar to how you would approach learning a real world language. You start off with the basics. Once you’ve gotten good at that, you move on to something a bit more advanced. This whole process just keeps repeating itself, and it never really ends. None of us ever truly stop learning. It just requires starting somewhere. To help you with the “starting somewhere” part is where this book comes in. This book is filled from beginning to end with all sorts of good (and hilarious—I hope!) stuff to help you learn JavaScript.

Now, I hate to say anything bad about a programming language behind its back, but JavaScript is pretty dull and boring:

There is no other way to describe it. Despite how boring JavaScript might most certainly be, it doesn’t mean that learning it has to be boring as well. (FYI: All grammatical snafus are carefully and deliberately placed—most of the time!) As you make your way through the book, hopefully you will find the very casual language and illustrations both informative as well as entertaining (infotaining!).

All this casualness and fun is balanced out by deep coverage of all the interesting things you need to know about JavaScript to become better at using it.

By the time you reach the last chapter, you will be prepared to face almost any JavaScript-related challenge head-on without breaking a sweat.

Contacting Me/Getting Help

If you ever get stuck at any point or just want to contact me, post in the forums at:

forum.kirupa.com.

For non-technical questions, you can also send e-mail to kirupa@kirupa.com, tweet to @kirupa, or message me on Facebook (facebook.com/kirupa). I love hearing from readers like you, and I make it a point to personally respond to every message I receive.

And with that, flip the page—it’s time to get started!

What Is JavaScript?

JavaScript is a modern-day programming language that is a peer of HTML and CSS. In a nutshell, it allows you to add interactivity to your document. A short list of things you can do with JavaScript include:

• Listen to events like a mouse click and do something.

• Modify the HTML and CSS of your page after the page has loaded.

• Make things move around the screen in interesting ways.

• Create awesome games that work in the browser like Cut the Rope.

• Communicate data between the server and the browser.

• Allow you to interact with a webcam, microphone, and other devices

....and much more! The way you write JavaScript is pretty simple—sort of. You put together words that often resemble everyday English to tell your browser what to do. The following example shows some old-fashioned, fresh outta-the-oven JavaScript:

Click here to view code image

let defaultName = "JavaScript";

function sayHello(name) {
  if (name == null) {
    alert("Hello, " + defaultName + "!");
  } else {
    alert("Hello, " + name + "!");
  }
}

Don’t worry if you don’t know what any of that means. Just pay attention to what the code looks like. Notice that you see a lot of English words such as function, if, else, alert, name. In addition to the English words, you also have a lot of bizarre symbols and characters from the parts of your keyboard that you probably never notice. You’ll be noticing them plenty really soon, and you’ll also fully understand what everything in this code does as well.

Anyway, that’s enough background information for now. While you would expect me to now provide a history of JavaScript and the people and companies behind making it work, I’m not going to bore you with stuff like that. Instead, I want you to get your hands dirty by writing some JavaScript. By the end of this tutorial, I want you to have created something sweet and simple that displays some text in your browser.

Hello, World!

Right now, you may feel a bit unprepared to start writing some code. This is especially true if you aren’t all that familiar with programming in general. As you’ll soon find out, JavaScript isn’t nearly as annoying and complicated as it often pretends to be. Let’s get started.

The HTML Document

The first thing you need is an HTML document. This document will host the JavaScript that you will be writing. Launch your favorite code editor. If you don’t have one, I encourage you to use Visual Studio Code. After you’ve launched your favorite code editor, go ahead and create a new file. In Visual Studio Code, you will see a tab that says Untitled similar to the screenshot in Figure 1.3.

Save this newly created file by going to File | Save. You will be asked to give this file a name and specify where you would like to save it. Give this file the name hello_world.htm and save it to your Desktop. After you have saved this file, add the following HTML into it:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>An Interesting Title Goes Here</title>

  <style>

  </style>
</head>

<body>
  <script>

  </script>

</body>

</html>

After you’ve added this HTML, save your document to confirm these changes. It’s time to take a look at what our page looks like in our browser.

In either File Explorer or Finder, navigate to your Desktop folder and double-click on hello_world.htm. You will see your default browser appearing and displaying the name of this file. You should see something that looks like what is shown in Figure 1.4.

If everything worked out well, you should see a blank page! No, there isn’t anything wrong here. While our page has content, there is nothing visible going on. That’s fine, for we’ll fix that shortly. The key to making this fix is to go back to your code editor and focus on the <script> tag that you see toward the bottom of your HTML:

<script>

</script>

The script tag acts as a container where you can place any JavaScript you want to run inside it. What we want to do is display the words hello, world! in a dialog that appears when you load your HTML page. To make this happen, inside your script region, add the following line:

Click here to view code image

<script>
  alert("hello, world!");
</script>

Save your HTML file and run it in your browser. Notice what you will see once your page has loaded. You should see a dialog appear that looks like Figure 1.5.

If this is your first attempt at writing JavaScript, congratulations! Now, let’s look at what you just did.

Looking at the Code: Statements and Functions

You just wrote a very simple JavaScript statement. A statement is a logical set of instructions that tell your browser what to do. A typical application will have many MANY statements. In our case, we just have one:

Click here to view code image

alert("hello, world!");

You can tell something is a statement by looking at the last character in it. It is usually a semicolon (;) just like what you see here.

Inside a statement, you will see all sorts of funky JavaScript jargon. Our code, despite being just one line, is no exception. You have this weird thing called alert that makes an appearance. This is an example of a common English word that behaves similarly in the JavaScript world. It is responsible for getting your attention by displaying some text.

To be more precise, the word alert is something known as a function. You will use functions all the time; a function is basically a reusable chunk of code that does something. The “something” it does could be defined by you, defined by some third-party library you are using, or it could be defined by the JavaScript framework itself. In our case, the code that gives your alert function the magical ability to display a dialog with a message you pass to it lives deep inside the browser. All you really need to know is that if you want to use the alert function, simply call it and pass in the text you want it to display. Everything else is taken care of for you.

Getting back to our example, the text you want to display is hello, world!, and notice how I am specifying it. I wrap the words inside quote marks:

Click here to view code image

<script>
  alert("hello, world!");
</script>

Whenever you are dealing with text (more commonly known as strings) you will always wrap them inside a single quote or a double quote. I know that seems weird, but every programming language has its own quirks. This is one of the many quirks you will see as you further explore JavaScript. We’ll look at strings in greater detail shortly; for now, just enjoy the view.

Let’s go one step further. Instead of displaying hello, world!, change the text you are displaying to say your first and last name instead. Here is an example of what my code looks like when I use my name:

Click here to view code image

<script>
  alert("Kirupa Chinnathambi!");
</script>

If you run your application, you will see your name appear in the dialog (Figure 1.6).

Pretty straightforward, right? You can replace the contents of your string with all sorts of stuff: the name of your pet, your favorite TV show, and so on—JavaScript will display it.

Using Variables

A variable is an identifier for a value. Instead of typing hello, world!, every time you want to use that phrase in your application, you can assign that phrase to a variable and use that variable whenever you need to use hello, world! again. This will make more sense in a few moments—I promise!

There are several ways to use variables. For most cases, the best way is by relying on the let keyword followed by the name you want to give your variable:

let myText

In this line of code, we declare a variable called myText. Right now, our variable has simply been declared. It doesn’t contain anything of value. It is merely an empty shell.

Let’s fix that by initializing our variable to a value like...let’s say...hello, world!:

Click here to view code image

let myText = "hello, world!";

At this point, when this code runs, our myText variable will have the value hello, world! associated with it. Let’s put all of this together as part of a full example. If you still have hello_world.htm open from earlier, replace the contents of your script tag with the following...or create a new HTML file and add the following contents into it:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>An Interesting Title Goes Here</title>

  <style>

  </style>
</head>

<body>
  <script>
    let myText = "hello, world!";                                                   
    alert(myText);                                                                  
  </script>

</body>

</html>

Notice that we are no longer passing in the hello, world! text to the alert function directly. Instead, we are now passing in the variable name myText instead. The end result is the same. When this script runs, an alert with hello, world! will be shown. What this change allows us to do is have one place in our code where hello, world! is being specified. If we wanted to change hello, world! to The dog ate my homework!, all we would have to do is just make one change to the phrase specified by the myText variable:

Click here to view code image

let myText = "The dog ate my homework!";
alert(myText);

Throughout our code, wherever we referenced the myText variable, we will now see the new text appear. While this is hard to imagine for something as simple as what we have right now, for larger applications, this convenience with having just one location where we can make a change that gets reflected everywhere is a major time saver. You’ll see more, less trivial cases of the value variables provide in subsequent examples.

More Variable Stuff

What we learned in the previous section will take us far in life. At least, it will in the parts of our life that involve getting familiar with JavaScript. We won’t dive too much further into variables here, for we’ll do all of that as part of future chapters where the code is more complex and the importance of variables is more obvious. With that said, there are a few odds and ends that we should cover before calling it a day.

let myText;
let $;
let r8;
let _counter;
let $field;
let thisIsALongVariableName_butItCouldBeLonger;
let __$abc;
let OldSchoolNamingScheme;

myText = "hello, world!";
alert(myText);

let myText;
myText = "hello, world!";
alert(myText);

let myText;
myText = "hello, world!";
myText = 99;
myText = 4 * 10;
myText = true;
myText = undefined;
alert(myText);

const siteURL = "https://www.google.com";
alert(siteURL);

What Is a Function?

At a very basic level, a function is nothing more than a wrapper for some code. A function basically:

• Groups statements together

• Makes your code reusable

You will rarely write or use code that doesn’t involve functions, so it’s important that you get familiar with them and learn all about how well they work.

A Simple Function

The best way to learn about functions is to just dive right in and start using them, so let’s start off by creating a very simple function. Creating a function isn’t very exciting. It just requires understanding some little syntactical quirks like using weird parenthesis and brackets.

Below is an example of what a very simple function looks like:

Click here to view code image

function sayHello() {
  alert("hello!");
}

Just having a function defined isn’t enough, though. Our function needs to be called, and we can do that by adding the following line afterwards:

Click here to view code image

function sayHello() {
  alert("hello!");
}
sayHello();                                

To see all this for yourself, create a new HTML document (call it functions_sayhello.htm) and add the following into it:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Say Hello!</title>

  <style>

  </style>
</head>

<body>
  <script>
    function sayHello() {
      alert("hello!");
    }
    sayHello();
  </script>
</body>

</html>

If you typed all this in and previewed your page in your browser, you will see hello! displayed. The only thing that you need to know right now is that our code works. Let’s look at why the code works next by breaking the sayHello function into individual chunks and looking at each in greater detail.

First, we see the function keyword leading things off as in Figure 3.3.

This keyword tells the JavaScript engine that lives deep inside your browser to treat this entire block of code as something having to do with functions.

After the function keyword, we specify the actual name of the function followed by some opening and closing parentheses, ( ) as in Figure 3.4.

Rounding out our function declaration are the opening and closing brackets that enclose any statements that we may have inside (Figure 3.5).

The final thing is the contents of our function—the statements that make our function actually functional (Figure 3.6).

In our case, the content is the alert function that displays a dialog with the word hello! displayed.

The last thing to look at is the function call (Figure 3.7).

The function call is typically the name of the function we want to call (aka invoke) followed again by the parentheses. Without our function call, the function we created doesn’t do anything. It is the function call that wakes our function up and makes it do things.

Now, what we have just seen is a look at a very simple function. In the next couple of sections, we are going to build on what we’ve just learned and look at increasingly more realistic examples of functions.

Creating a Function that Takes Arguments

The previous sayHello example was quite simple:

Click here to view code image

function sayHello() {
  alert("hello!");
}
sayHello();

We call a function, and the function does something. That simplification by itself is not out of the ordinary. All functions work just like that. What is different is the details on how functions get invoked, where they get their data from, and so on. The first such detail we are going to look at involves functions that take arguments.

Let’s start with a simple and familiar example:

alert("my argument");

What we have here is our alert function. We’ve probably seen it a few (or a few dozen) times already. What this function does is take what is known as an argument for figuring out what to actually display when it gets called. Calling the alert function with an argument of my argument results in the display shown in Figure 3.8.

The argument is the stuff between your opening and closing parentheses when calling the alert function. The alert function is just one of many functions available to you that take arguments, and many functions you create will take arguments as well.

To stay local, just from this chapter itself, another function that we briefly looked at that takes arguments is our showDistance function:

Click here to view code image

function showDistance(speed, time) {
  alert(speed * time);
}

See, you can tell when a function takes arguments by looking at the function declaration itself:

Click here to view code image

function showDistance(speed, time) {                             
  alert(speed * time);
}

What used to be empty parenthesis following the function name will now contain some information about the quantity of arguments your function needs along with some hints on what values your arguments will take.

For showDistance, we can infer that this function takes two arguments. The first argument corresponds to the speed and the second argument corresponds to the time.

We specify your arguments to the function as part of the function call:

Click here to view code image

function showDistance (speed, time) {
  alert (speed * time);
}

showDistance(10, 5);

In our case, we call showDistance and specify the values we want to pass to your function inside the parentheses (Figure 3.9).

Because we are providing more than one argument, we can separate the individual arguments by a comma. Oh, and before I forget to call this out, the order in which you specify your arguments matters.

Let’s look at all of this in greater detail starting with the diagram in Figure 3.10.

When the showDistance function gets called, it passes in a 10 for the speed argument, and it passes in a 5 for the distance argument. That mapping, as shown in the previous diagram, is entirely based on order.

Once the values you pass in as arguments reach our function, the names we specified for the arguments are treated just like variable names as shown in Figure 3.11.

We can use these variable names to easily reference the values stored by the arguments inside our function without any worry in the world.

Creating a Function that Returns Data

The last function variant we will look at is one that returns some data back to whatever called it. Here is what we want to do. We have our showDistance function, and we know that it looks as follows:

Click here to view code image

function showDistance(speed, time) {
  alert(speed * time);
}

Instead of having our showDistance function calculate the distance and display it as an alert, we want to store that value for some future use. We want to do something like this:

Click here to view code image

let myDistance = showDistance(10, 5);

The myDistance variable will store the results of the calculation the showDistance function does.

function getDistance(speed, time) {
  let distance = speed * time;
  return distance;                                            
}

let myDistance = getDistance(10, 5);

function getDistance(speed, time) {
  let distance = speed * time;
  return distance;
  if (speed < 0) {
    distance *= -1;
  }
}

function doSomething() {
  let foo = "Nothing interesting";
  return;
}

The If / Else Statement

The most common conditional statement we will use in our code is the if / else statement or just the if statement. The way this statement works is shown in Figure 4.2.

To make sense of this, let’s take a look at a simple example of an if / else statement in action. Create a new HTML document and add the following markup and code into it:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>If / Else Statements</title>
</head>

<body>
  <script>
    let safeToProceed = true;
    if (safeToProceed) {
      alert("You shall pass!");
    } else {
      alert("You shall not pass!");
    }
  </script>
</body>
</html>

Save this document with the name if_else.htm and preview it in your browser. If all worked as expected, you will see an alert with the text You shall pass! displayed (Figure 4.3).

The code responsible for making this work is the following lines from our example:

Click here to view code image

let safeToProceed = true;

if (safeToProceed) {
  alert("You shall pass!");
} else {
  alert("You shall not pass!");
}

Our expression (the thing following the keyword if that ultimately evaluates to true or false) is the variable safeToProceed. This variable is initialized to true, so the true part of our if statement kicked in.

Now, go ahead and change the value of the safeToProceed variable from a true to a false:

Click here to view code image

let safeToProceed = true;                                        

if (safeToProceed) {
  alert("You shall pass!");
} else {
  alert("You shall not pass!");
}

This time when you run this code, you will see an alert with the text You shall not pass! because our expression now evaluates to false (Figure 4.4).

So far, all of this probably seems really boring. A large part of the reason for this is because we haven’t turned up the complexity knob to focus on more realistic scenarios. We’ll tackle that next by taking a deeper look at conditions.

Meet the Conditional Operators

In most cases, our expression will rarely be a simple variable that is set to true or false like it is in our earlier example. Our expression will involve what are known as conditional operators that help us to compare between two or more expressions to establish a true or false outcome.

The general format of such expressions is shown in Figure 4.5.

The operator (aka a conditional operator) defines a relationship between an expression. The end goal is to return a true or a false so that our if statement knows which block of code to execute. Key to making all this work are the conditional operators themselves. They are shown in Table 4.1.

Operator	When it is true
==	If the first expression evaluates to something that is equal to the second expression.
>=	If the first expression evaluates to something that is greater or equal to the second expression.
>	If the first expression evaluates to something that is greater than the second expression.
<=	If the first expression evaluates to something that is lesser or equal to the second expression.
<	If the first expression evaluates to something that is less than the second expression.
!=	If the first expression evaluates to something that is not equal to the second expression.
&&	If the first expression and the second expression both evaluate to true.
||	If either the first expression or the second expression evaluate to true.

Let’s take our general understanding of conditional operators and make it more specific by looking at another example...such as the following with our relevant if-related code highlighted:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Are you speeding?</title>
</head>

<body>
  <script>
    let speedLimit = 55;

    function amISpeeding(speed) {
      if (speed >= speedLimit) {                                    
        alert("Yes. You are speeding.");                            
      } else {                                                      
        alert("No. You are not speeding. What's wrong with you?");  
      }                                                             
    }

    amISpeeding(53);
    amISpeeding(72);
  </script>
</body>

</html>

Let’s take a moment to understand what exactly is going on. We have a variable called speedLimit that is initialized to 55. We then have a function called amISpeeding that takes an argument named speed. Inside this function, we have an if statement whose expression checks if the passed in speed value is greater than or equal (Hello >= conditional operator!) to the value stored by the speedLimit variable:

Click here to view code image

function amISpeeding(speed) {
  if (speed >= speedLimit) {                                       
    alert("Yes. You are speeding.");
  } else {
    alert("No. You are not speeding. What's wrong with you?");
  }
}

The last thing our code does is actually call the amISpeeding function by passing in a few values for speed:

amISpeeding(53);
amISpeeding(72);

When we call this function with a speed of 53, the speed >= speedLimit expression evaluates to false. The reason is that 53 is not greater than or equal to the stored value of speedLimit which is 55. This will result in an alert showing that you aren’t speeding.

The opposite happens when we call amISpeeding with a speed of 72. In this case, we are speeding and the condition evaluates to a true. An alert telling us that we are speeding will also appear.

let xPos = 300;
let yPos = 150;

function sendWarning(x, y) {
  if ((x < xPos) && (y < yPos)) {
    alert("Adjust the position");

  } else {
    alert("Things are fine!");
  }
}

sendWarning(500, 160);
sendWarning(100, 100);
sendWarning(201, 149);

function sendWarning(x, y) {
        if ((x < xPos) && (y < yPos)) {                         
                alert("Adjust the position");
        } else {
                alert("Things are fine!");
        }
}

if (weight > 5000) {
  alert("No free shipping for you!");
}

if (position < 100) {
  alert("Do something!");
} else if ((position >= 200) && (position < 300)) {
  alert("Do something else!");
} else {
  alert("Do something even more different!");
}

if (condition) {
  ...
} else if (condition) {
  ...
} else if (condition) {
  ...
} else if (condition) {
  ...
} else if (condition) {
  ...
} else if (condition) {
  ...
} else {
  ...
}

Switch Statements

In a world filled with beautiful if, else, and else if statements, the need for yet another way of dealing with conditionals may seem unnecessary. People who wrote code on room-sized machines and probably hiked uphill in snow (with wolves chasing them) disagreed, so we have what are known as switch statements. What are they? We are going to find out!

Using a Switch Statement

We are going to cut to the chase and look at the code first. The basic structure of a switch statement is as follows:

Click here to view code image

switch (expression) {
  case value1:
    statement;
    break;
  case value2:
    statement;
    break;
  case value3:
    statement;
    break;
  default:
    statement;
    break;
}

The thing to never forget is that a switch statement is nothing more than a conditional statement that tests whether something is true or false. That something is a variation of whether the result of evaluating the expression equals a case value. Let’s make this explanation actually make sense by looking at a better example:

Click here to view code image

let color = "green";

switch (color) {
  case "yellow":
    alert("yellow color");
    break;
  case "red":
    alert("red color");
    break;
  case "blue":
    alert("blue color");
    break;
  case "green":
    alert("green color");
    break;
  case "black":
    alert("black color");
    break;
  default:
    alert("no known color specified");
    break;
}

In this simple example, we have a variable called color whose value is set to green:

let color = "green";

The color variable is also what we specify as our expression to the switch statement:

Click here to view code image

switch (color) {                                       
  case "yellow":
    alert("yellow color");
    break;
  case "red":
    alert("red color");
    break;
  case "blue":
    alert("blue color");
    break;
  case "green":
    alert("green color");
    break;
  case "black":
    alert("black color");
    break;
  default:
    alert("no known color specified");
    break;
}

Our switch statement contains a collection of case blocks. Only one of these blocks will get hit with their code getting executed. The way this chosen one gets picked is by matching a block’s case value with the result of evaluating the expression. In our case, because our expressions evaluate to a value of green, the code inside the case block whose case value is also green gets executed:

Click here to view code image

switch (color) {                                       
  case "yellow":
    alert("yellow color");
    break;
  case "red":
    alert("red color");
    break;
  case "blue":
    alert("blue color");
    break;
  case "green":                                        
    alert("green color");                              
    break;                                             
  case "black":
    alert("black color");
    break;
  default:
    alert("no known color specified");
    break;
}

Note that only the code inside the green case block gets executed. That is thanks to the break keyword that ends that block. When your code hits the break, it exits the entire switch block and continues executing the code that lies below it. If you did not specify the break keyword, you will still execute the code inside the green case block. The difference is that you will then move to the next case block (the black one in our example) and execute any code that is there. Unless you hit another break keyword, your code will just move through every single case block until it reaches the end.

With all of this said, if you were to run this code, you would see an alert window that looks like Figure 4.6.

You can alter the value for the color variable to other valid values to see the other case blocks execute. Sometimes, no case block’s value will match the result of evaluating an expression. In those cases, your switch statement will just do nothing. If you wish to specify a default behavior, add a default block:

Click here to view code image

switch (color) {                                     
  case "yellow":
    alert("yellow color");
    break;
  case "red":
    alert("red color");
    break;
  case "blue":
    alert("blue color");
    break;
  case "green":
    alert("green color");
    break;
  case "black":
    alert("black color");
    break;
  default:                                           
    alert("no known color specified");               
    break;                                           
}

Note that the default block looks a bit different than your other case statements. It actually doesn’t contain the word case.

let number = 20;

if (number > 10) {
  alert("yes");
} else {
  alert("nope");
}

switch (number > 10) {
  case true:
    alert("yes");
    break;
  case false:
    alert("nope");
    break;
}

let color = "green";

switch (color) {
  case "yellow":
    alert("yellow color");
    break;
  case "red":
    alert("red color");
    break;
  case "blue":
    alert("blue color");
    break;
  case "green":
    alert("green color");
    break;
  case "black":
    alert("black color");
    break;
  default:
    alert("no color specified");
    break;
}

let color = "green";

if (color == "yellow") {
  alert("yellow color");
} else if (color == "red") {
  alert("red color");
} else if (color == "blue") {
  alert("blue color");
} else if (color == "green") {
  alert("green color");
} else if (color == "black") {
  alert("black color");
} else {
  alert("no color specified";
}

Deciding Which to Use

In the previous section, we saw how interchangeable switch statements and if / else statements are. When we have two ways of doing something very similar, it is only natural to want to know when it is appropriate to use one over the other. In a nutshell, use whichever one you prefer. There are many arguments on the web about when to use switch vs an if / else, and the one thing is that they are all inconclusive.

My personal preference is to go with whatever is more readable. If you look at the comparisons earlier between switch and if / else statements, you’ll notice that if you have a lot of conditions, your switch statement tends to look a bit cleaner. It is certainly less verbose and a bit more readable. What your cutoff mark is for deciding when to switch (ha!) between using a switch statement and an if / else statement is entirely up to you. I tend to draw the line at around four or five conditions.

Second, a switch statement works best when you are evaluating an expression and matching the result to a value. If you are doing something more complex involving weird conditions, value checking, etc., you probably want to use something different. That could involve something even more different than an if / else statement, by the way! We will touch upon those different somethings later.

To wrap this all up, the earlier guidance still stands: use whatever you like. If you are part of a team with coding guidelines, then follow them instead. Whatever you do, just be consistent. It makes your life as well as the life of anybody else who will be working in your code a little bit easier. For what it is worth, I’ve personally never been in a situation where I had to use a switch statement. Your mileage may vary.

let loginStatus = false;

if (name == "Admin") {
  loginStatus = true;
}

The for Loop

One of the most common ways to create a loop is by using the for statement to create a for loop. A for loop allows us to repeatedly run some code until an expression we specify returns false. To help clarify this definition, let’s look at an example.

If we had to translate our earlier saySomething example using for, it would look as follows:

Click here to view code image

for (let i = 0; i < 10; i++) {
  saySomething();
}

function saySomething() {
  document.writeln("hello!");
}

If you want to follow along more actively and see this code for yourself, enter this code inside some script tags in an HTML document:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Loops!</title>

  <style>

  </style>
</head>

<body>
  <script>
    for (let i = 0; i < 10; i++) {
      saySomething();
    }

    function saySomething() {
      document.writeln("hello!");
    }
  </script>
</body>

</html>

Once your document is ready, save your document and preview it in your browser. After the page has loaded, what you would see is shown in Figure 5.1.

The word hello! will be repeated ten times across your page. This is made possible thanks to the for loop, so we are going to thank it back by learning all about how it works. First, here is our star:

Click here to view code image

for (let i = 0; i < 10; i++) {                                 
  saySomething();
}

This is a for loop. It probably looks very different from other statements we’ve seen so far, and that’s because...well, it is very different. To understand the differences, let’s generalize a for loop into the form shown in Figure 5.2.

This high-level view corresponds to the actual values from our example (Figure 5.3).

These three differently colored regions each play a very important role in how your loop functions. In order to use a for loop well, we must know what each region accomplishes, so we will spend the next few minutes diving deeper into each section.

The Starting Point

In the first region, we define the starting point for our loop. A common thing to put here is some code to declare and initialize a variable, similar to what we did in Figure 5.4.

What we are telling JavaScript is to start our loop with the variable i initialized to 0.

The Step

We are going to skip ahead to the step region next (Figure 5.5).

In this stage, we specify how our starting point will evolve. For our example, what we are saying is that each time our loop runs, the value of i will be increased by 1. That is captured by the cryptic looking i++. We’ll cover what the ++ means later when we look at how numbers and math in JavaScript work, but another way of representing this would be to say i = i + 1.

The Condition (aka How Long to Keep Looping)

Going back to the stage we skipped, we have the condition part of our loop that determines when the loop will stop running (Figure 5.6).

In our example, the condition is that our i variable is less than the value of 10:

• If our i variable is less than 10, this expression evaluates to true and our loop continues to run.

• If our i variable becomes equal to or greater than 10, the condition is false, and our loop terminates.

for (let i = 0; i < 10; i++) {
  saySomething();
}

function saySomething() {
  document.writeln("hello!");
}

Some for Loop Examples

In the previous section, we dissected a simple for loop and labeled all its inner workings. The thing about for loops and most everything in JavaScript is that a simple example doesn’t always cover everything we might need. The best solution is to look at some more examples of for loops, and that’s what we are going to be doing in the next few sections.

for (let i = 0; i < 100; i++) {
  document.writeln(i);

  if (i == 45) {
    break;
  }
}

let floors = 28;

for (let i = 1; i <= floors; i++) {
  if (i == 13) {
    // no floor here
    continue;
  }

  document.writeln("At floor: " + i + "<br>");
}

for (let i = 25; i > 0; i--) {
  document.writeln("hello");
}

for (let i = "a"; i != "aaaaaaaa"; i += "a") {
  document.writeln("hmm...");
}

let i = 0;
let yay = true;

for (; yay;) {
  if (i == 10) {
    yay = false;
  } else {
    i++;
    document.writeln("weird");
  }
}

The Other Loops

Living in the shadow of the beloved for loop are the while and do...while loop variants. In the interest of completeness, let’s quickly look at both of them.

let count = 0;

while (count < 10) {
  document.writeln("looping away!");

  count++;
}

let count = 0;

while (count < 10) {                                          
  document.writeln("looping away!");

  count++;
}

let count = 0;

do {
    document.writeln("I don't know what I am doing here! <br>");


    count++;
} while (count < 10);

while (false) {
  document.writeln("Can't touch this!");
}

do {
  document.writeln("This code will run once!");
} while (false);

What Are Comments?

Comments are the things we write as part of our code to communicate something to humans:

Click here to view code image

// This is for not inviting me to your birthday party!
let blah = true;

function sweetRevenge() {
  while (blah) {
    // Infinite dialog boxes! HAHAHA!!!!
    alert("Hahahaha!");
  }
}
sweetRevenge();

In this example, the comments are marked by the // character, and they provide some questionably useful information about the code being described.

The thing to keep in mind about comments is that they don’t run and get executed like all the other code you write. JavaScript ignores your comments. It doesn’t like you. It doesn’t care what you have to say, so you don’t have to worry about proper syntax, punctuation, spelling, and everything else you need to keep in mind when writing normal code. Comments exist only for us to help understand what a piece of code is doing.

There is one other purpose comments serve. We can use comments to mark lines of code that we don’t want executed:

Click here to view code image

function insecureLogin(input) {
  if (input == "password") {
    // let key = Math.random() * 100000;
    // processLogin(key);
  }
  return false;
}

In this example, the following two lines can be seen in our code editor, but they won’t run:

Click here to view code image

// let key = Math.random() * 100000;
// processLogin(key);

We’ll often find ourselves using the code editor as a scratchpad, and comments are a great way to keep track of things we’ve tried in making our code work without affecting how your application ultimately runs.

// Return the larger of the two arguments
function max(a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}

let zorb = "Alien"; // Annoy the planetary citizens

/*
let mouseX = 0;
let mouseY = 0;

canvas.addEventListener("mousemove", setMousePosition, false);

function setMousePosition(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
}
*/

/**
 * Shuffles the contents of your Array.
 *
 * @this {Array}
 * @returns {Array} The current array with the contents
fully shuffled.
 */
Array.prototype.shuffle = function () {
  let input = this;

  for (let i = input.length - 1; i >= 0; i--) {

    let randomIndex = Math.floor(Math.random() *
(i + 1));
    let itemAtIndex = input[randomIndex];

    input[randomIndex] = input[i];
    input[i] = itemAtIndex;
  }
  return input;
}

Commenting Best Practices

Now that we have a good idea of what comments are and the several ways we have to write them in JavaScript, let’s talk a bit about how to properly use comments to help make our code easy to read:

• Always comment your code as you are writing it. Writing comments is dreadfully boring, but it is an important part of writing code. It is much more time efficient for you (and others) to understand what your code does from reading a comment as opposed to reading line after line of boring JavaScript.

• Don’t defer comment writing for later. Deferring comment writing for a later time is the grown-up equivalent of procrastinating on a chore. If you don’t comment your code as you are writing it, you’ll probably just skip commenting entirely. That’s not a good thing.

• Use more English and less JavaScript. Comments are one of the few places when writing JavaScript where you can freely use English (or whatever language you prefer communicating in). Don’t complicate your comments unnecessarily with code. Be clear. Be concise. Use words.

• Embrace whitespace. When scanning large blocks of code, you want to ensure your comments stand out and are clear to follow. That involves being liberal with your Spacebar and Enter/Return key. Take a look at the following example:

  Click here to view code image

  function selectInitialState(state) {
    let selectContent = document.querySelector("#stateList");
    let stateIndex = null;
  
    /*  
        For the returned state, we would like to ensure that
        we select it in our UI. This means we iterate through
        every state in the drop-down until we find a match. 
        When a match is found, we ensure it gets selected.
    */
  
    for (let i = 0; i < selectContent.length; i++) {
  
      let stateInSelect = selectContent.options[i].innerText;
  
      if (stateInSelect == state) {
        stateIndex = i;
      }
    }
  
    selectContent.selectedIndex = stateIndex;
  }

  Notice that our comment is appropriately spaced to distinguish it from the rest of the code. If your comments are strewn about in arbitrary locations where they are difficult to identify, that just unnecessarily slows you and whoever is reading your code down.

• Don’t comment obvious things. If a line of code is self-explanatory, don’t waste time explaining what it does unless there is some subtle behavior you need to call out as a warning. Instead, invest that time in commenting the less obvious parts of your code.

The best practices you see here will take you far in ensuring you write properly commented code. If you are working on a larger project with other people, I can assure you that your team already has some established guidelines on what proper commenting looks like. Take some time to understand those guidelines and follow them. You’ll be happy. Your team will be happy.

Delaying with setTimeout

The setTimeout function allows us to delay executing some code. The way we use it is quite nice. This function allows us to specify what code to execute and how many milliseconds to wait before the code we specified executes. Putting that into JavaScript, it will look something like this:

Click here to view code image

let timeoutID = setTimeout(someFunction, delayInMilliseconds);

Going a bit more example-ish, if we wanted to call a function called showAlert after 5 seconds, the setTimeout declaration would look as follows:

Click here to view code image

function showAlert() {
  alert("moo!");
}

let timeoutID = setTimeout(showAlert, 5000);                           

Cool, right? Now, let’s talk about something less interesting that we need to cover for completeness. That something has to do with the timeID variable that is initialized to our setTimeout function. It isn’t there by accident. If we ever wanted to access this setTimeout timer again, we need a way to reference it. By associating a variable with our setTimeout declaration, we can easily accomplish that.

Now, you may be wondering why we would ever want to reference a timer once we’ve created it. There aren’t too many reasons. The only reason I can think of would be to cancel the timer. For setTimeout, that is conveniently accomplished using the clearTimeout function and passing the timeout ID as the argument:

clearTimeout(timeoutID);

If you are never planning on canceling your timer, you can just use setTimeout directly without having it be part of the variable initialization.

Let’s talk about when we would commonly use it in the real world. UI development. When we are doing UI development, deferring some action to a later time is unusually common. Here are some examples that I ran into just in the past month:

A menu slides in, and after a few seconds of the user no longer playing with the menu, the menu slides away.

You have a long running operation that is unable to complete, and a setTimeout function interrupts that operation to return control back to the user.

My favorite (and one that I wrote a tutorial about as well) is where you use the setTimeout function to detect whether users are inactive or idle!

If you do a search for setTimeout on this site or Google, you’ll see many more real-world cases where setTimeout proves very useful.

let intervalID = setInterval(someFunction, delayInMilliseconds);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Show me some text!</title>
</head>

<body>
  <script>
    let thingToPrint = "";

    function drawText() {
      thingToPrint += "#";
      document.writeln(thingToPrint);
    }

    setInterval(drawText, 2000);
  </script>
</body>

</html>

clearInterval(intervalID);

// 1000 divided by 60 is the millisecond value for 60fps
setInterval(moveCircles, 1000 / 60);

let requestID = requestAnimationFrame(someFunction);

function animationLoop() {
  // animation-related code

  requestAnimationFrame(animationLoop)
}

// start off our animation loop!
animationLoop();

Global Scope

We are going to start our exploration of scope at the very top with what is known as global scope. In real life, when we say that something can be heard globally, it means that we can be anywhere in the world and still be able to hear that...something

In JavaScript, much the same applies. If we say, for example, a variable is available globally, it means that any code on our page has access to read and modify this variable. The way we make something apply globally is by declaring it in our code completely outside of a function.

To illustrate this, let’s take a look at the following example:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Variable Scope</title>
</head>

<body>
  <script>
    let counter = 0;
    alert(counter);
  </script>
</body>

</html>

Here, we are simply declaring a variable called counter and initializing it to 0. By virtue of this variable being declared directly inside the script tag without being placed inside a function, the counter variable is considered to be global. What this distinction means is that our counter variable can be accessed by any code that lives in our document.

The below code highlights this:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Variable Scope</title>

</head>
<body>
  <script>
    let counter = 0;                                         

    function returnCount() {                                 
      return counter;                                        
    }                                                        

    alert(returnCount());                                    
  </script>
</body>

</html>

In this example, the counter variable is declared outside of the returnCount function. Despite that, the returnCount function has full access to the counter variable. When the code runs, the alert function calls the returnCount function that returns the value of the counter variable.

At this point, you are probably wondering why I am pointing this out. We’ve been using global variables all this time without really noticing it. All I am doing here is formally introducing you to a guest that has been hanging around your party for a while.

Local Scope

Now, things get a little interesting when we look at things that aren’t globally declared. This is where understanding scope really starts paying dividends. As we saw earlier, a variable declared globally is accessible inside a function:

Click here to view code image

let counter = 0;

function returnCount() {
  return counter;
}

The opposite doesn’t hold true. A variable declared inside a function will not work when accessed outside of a function:

Click here to view code image

function setState() {
  let state = "on";
}
setState();

alert(state) // undefined

In this example, the state variable is declared inside the setState function, and accessing the state variable outside of that function doesn’t work. The reason is that the scope for our state variable is local to the setState function itself. A more generic way of describing this is by saying that your state variable is just local.

function setState() {
  state = "on";
}
setState();

alert(state) // "on"

Miscellaneous Scoping Shenanigans

Since we are talking about JavaScript here, things would be too easy if we just left everything with variable scope as they stand now. In the following sections, I am going to highlight some quirks that you need to be familiar with.

let safeToProceed = false;

function isItSafe() {
  if (safeToProceed) {
    alert("You shall pass!");
  } else {
    alert("You shall not pass!");
  }
}

isItSafe();

let safeToProceed = false;

function isItSafe() {
  if (safeToProceed) {                                      
    alert("You shall pass!");                               
  } else {                                                  
    alert("You shall not pass!");                           
  }                                                         
}                                                           

isItSafe();

let safeToProceed = false;

function isItSafe() {
  if (safeToProceed) {
    alert("You shall pass!");                                 
  } else {
    alert("You shall not pass!");
  }
}

let safeToProceed = false;

function isItSafe() {
  if (safeToProceed) {
    alert("You shall pass!");                                       
  } else {
    alert("You shall not pass!");
  }
}

function isThePriceRight(cost) {
  let total = cost + 1;

  if (total > 3) {
    alert(total);
  } else {
    alert("Not enough!");
  }
}

isThePriceRight(4);

function isThePriceRight(cost) {
  let total = cost + 1;

  if (total > 3) {
    let warning = true;
    alert(total);
  } else {
    alert("Not enough!");
  }

  alert(warning);                                                
}

isThePriceRight(4);

function isThePriceRight(cost) {
  let total = cost + 1;

  if (total > 3) {
    var warning = true;                                    
    alert(total);
  } else {
    alert("Not enough!");
  }

  alert(warning);
}

isThePriceRight(4);

let foo = "Hello!";
alert(foo);

alert(foo);
let foo = "Hello!";

alert(foo);
var foo = "Hello!";

alert(foo);
let foo = "Hello!";

let foo;
alert(foo);
foo = "Hello!";

var foo = undefined;
alert(foo);
foo = "Hello!";

Functions within Functions

The first thing we are going to do is really drill in on what happens when you have functions within functions...and the inner function gets returned. As part of that, let’s do a quick review of functions.

Take a look at the following code:

Click here to view code image

function calculateRectangleArea(length, width) {
  return length * width;
}

let roomArea = calculateRectangleArea(10, 10);
alert(roomArea);

The calculateRectangleArea function takes two arguments and returns the multiplied value of those arguments to whatever called it. In this example, the whatever called it part is played by the roomArea variable.

After this code has run, the roomArea variable contains the result of multiplying 10 and 10...which is simply 100 (Figure 9.2).

As you know, what a function returns can pretty much be anything. In this case, we returned a number. You can very easily return some text (aka a String), the undefined value, a custom object, etc. As long as the code that is calling the function knows what to do with what the function returns, you can do pretty much whatever you want. You can even return another function. Let me rathole on this a bit.

Below is a very simple example of what I am talking about:

Click here to view code image

function youSayGoodBye() {

  alert("Good Bye!");

  function andISayHello() {
    alert("Hello!");
  }

  return andISayHello;
}

We can have functions that contain functions inside them. In this example, we have our youSayGoodBye function that contains an alert and another function called andISayHello (Figure 9.3).

The interesting part is what the youSayGoodBye function returns when it gets called. It returns the andISayHello function:

Click here to view code image

function youSayGoodBye() {

  alert("Good Bye!");

  function andISayHello() {
    alert("Hello!");
  }

  return andISayHello;                                       
}

Let’s go ahead and play this example out. To call this function, initialize a variable that points to youSayGoodBye:

Click here to view code image

let something = youSayGoodBye();

The moment this line of code runs, all of the code inside your youSayGoodBye function will get run as well. This means, you will see a dialog (thanks to the alert) that says Good Bye! (Figure 9.4).

As part of running to completion, the andISayHello function will be created and then returned as well. At this point, our something variable only has eyes for one thing, and that thing is the andISayHello function (see Figure 9.5).

The youSayGoodBye outer function, from the something variable’s point of view, simply goes away. Because the something variable now points to a function, you can invoke this function by just calling it using the open and close parentheses like you normally would:

Click here to view code image

let something = youSayGoodBye();
something();                                                

When you do this, the returned inner function (aka andISayHello) will execute. Just like before, you will see a dialog appear, but this dialog will say Hello! (Figure 9.6) – which is what the alert inside this function specified.

All of this should probably a review. The only thing that you may have found new is realizing once a function returns a value, it is no longer around. The only thing that remains is the returned value.

Ok, we are getting close to the promised hostile territory. In the next section, we will extend what we’ve just seen by taking a look at another example with a slight twist.

When the Inner Functions Aren’t Self-Contained

In the previous example, our andISayHello inner function was self-contained and didn’t rely on any variables or state from the outer function:

Click here to view code image

function youSayGoodBye() {

  alert("Good Bye!");

  function andISayHello() {                                    
    alert("Hello!");                                           
  }                                                            

  return andISayHello;
}

In many real scenarios, very rarely will we run into a case like this. We will often have variables and data that are shared between the outer function and the inner function. To highlight this, take a look at the following:

Click here to view code image

function stopWatch() {
  let startTime = Date.now();

  function getDelay() {
    let elapsedTime = Date.now() - startTime;
    alert(elapsedTime);
  }

  return getDelay;
}

This example shows a very simple way of measuring the time it takes to do something. Inside the stopWatch function, we have a startTime variable that is set to the value of Date.now():

Click here to view code image

function stopWatch() {
  let startTime = Date.now();                                

  function getDelay() {
    let elapsedTime = Date.now() - startTime;
    alert(elapsedTime);
  }

  return getDelay;
}

We also have an inner function called getDelay:

Click here to view code image

function stopWatch() {
  let startTime = Date.now();

  function getDelay() {                                    
    let elapsedTime = Date.now() - startTime;              
    alert(elapsedTime);                                    
  }                                                        

  return getDelay;
}

The getDelay function displays a dialog containing the difference in time between a new call to Date.now() and the startTime variable declared earlier.

Getting back to the outer stopWatch function, the last thing that happens is that it returns the getDelay function before exiting. As we can see, the code here is very similar to the earlier example. We have an outer function, we have an inner function, and we have the outer function returning the inner function.

Now, to see the stopWatch function at work, add the following lines of code:

Click here to view code image

let timer = stopWatch();

// do something that takes some time
for (let i = 0; i < 1000000; i++) {
  let foo = Math.random() * 10000;
}

// invoke the returned function
timer();

The full markup and code for this example looks as follows:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Closures</title>

  <style>

  </style>
</head>

<body>
  <script>
    function stopWatch() {
      var startTime = Date.now();

      function getDelay() {
        var elapsedTime = Date.now() - startTime;
        alert(elapsedTime);
      }

      return getDelay;
    }

    let timer = stopWatch();

    // do something that takes some time
    for (let i = 0; i < 1000000; i++) {
      let foo = Math.random() * 10000;
    }

    // invoke the returned function
    timer();
  </script>
</body>

</html>

If you run this example, we’ll see a dialog displaying the number of milliseconds it took between your timer variable getting initialized, your for loop running to completion, and the timer variable getting invoked as a function (Figure 9.7).

To explain in a different way, we have a stopwatch that we invoke, run some long-running operation, and invoke again to see how long the long-running operation took place.

Now that we can see our little stopwatch example working, let’s go back to the stopWatch function and see what exactly is going on. Like I mentioned a few lines ago, a lot of what we see is similar to the youSayGoodBye / andISayHello example. There is a twist that makes this example different, and the important part to note is what happens when the getDelay function is returned to the timer variable.

Figure 9.8 is an incomplete visualization of what this looks like.

The stopWatch outer function is no longer in play, and the timer variable is bound to the getDelay function. Now, here is the twist. The getDelay function relies on the startTime variable that lives in the context of the outer stopWatch function:

Click here to view code image

function stopWatch() {
  let startTime = Date.now();                                 

  function getDelay() {
    let elapsedTime = Date.now() - startTime;                 
    alert(elapsedTime);
  }

  return getDelay;
}

When the outer stopWatch function goes away when getDelay is returned to the timer variable, what happens in the following line?

Click here to view code image

function getDelay() {
  let elapsedTime = Date.now() - startTime;                   
  alert(elapsedTime);
}

In this context, it would make sense if the startTime variable is actually undefined, right? But the example totally worked, so something else is going on here. That something else is the shy and mysterious closure. Here is a look at what happens to make our startTime variable actually store a value and not be undefined.

The JavaScript runtime that keeps track of all of your variables, memory usage, references, and so on is really clever. In this example, it detects that the inner function (getDelay) is relying on variables from the outer function (stopWatch). When that happens, the runtime ensures that any variables in the outer function that are needed are still available to the inner function even if the outer function goes away.

To visualize this properly, Figure 9.9 shows you what the timer variable looks like.

It is still referring to the getDelay function, but the getDelay function also has access to the startTime variable that existed in the outer stopWatch function. This inner function, because it enclosed relevant variables from the outer function into its bubble (aka scope), is known as a closure (Figure 9.10).

To define the closure more formally, it is a newly created function that also contains its variable context (Figure 9.11).

To review this one more time using our existing example, the startTime variable gets the value of Date.now the moment the timer variable gets initialized and the stopWatch function runs. When the stopWatch function returns the inner getDelay function, the stopWatch function goes away. What doesn’t go away are any shared variables inside stopWatch that the inner function relies on. Those shared variables are not destroyed. Instead, they are enclosed by the inner function aka the closure.

Approach #1: All the Code Lives in Your HTML Document

The first approach we will look at is one that we’ve been using all along so far. This is the approach where all of our JavaScript lives inside a script tag alongside the rest of your HTML document:

Click here to view code image

<!DOCTYPE html>
<html>

<body>
  <h1>Example</h1>

  <script>
    function showDistance(speed, time) {
      alert(speed * time);
    }

    showDistance(10, 5);
    showDistance(85, 1.5);
    showDistance(12, 9);
    showDistance(42, 21);
  </script>
</body>

</html>

When our browser loads the page, it goes through and parses every line of HTML from top to bottom. When it hits the script tag, it will go ahead and execute all the lines of JavaScript as well. Once it has finished executing our code, it will continue to parse the rest of our document. This means the location the script tag lives in our page is important. We will discuss that later when looking at the Running Your Code at the Right Time chapter.

Approach #2: The Code Lives in a Separate File

The second approach is one where our main HTML document doesn’t contain any JavaScript content. Instead, all of our JavaScript lives in a separate document. There are two parts to this approach. The first part deals with the JavaScript file. The second part deals with referencing this JavaScript file in the HTML. Let’s look at both of these parts in greater detail.

The JavaScript File

Key to making this approach work is the separate file that contains our JavaScript code. It doesn’t matter what you name this file, but its extension is typically .js. For example, my JavaScript file is called example.js.

Inside this file, the only thing you will have is JavaScript:

Click here to view code image

function showDistance(speed, time) {
  alert(speed * time);
}

showDistance(10, 5);
showDistance(85, 1.5);
showDistance(12, 9);
showDistance(42, 21);

Everything we would normally put inside a script tag in the HTML will go here. Nothing else will go into this file. Putting anything else like arbitrary pieces of HTML and CSS isn’t allowed, and our browser will complain.

<!DOCTYPE html>
<html>

<body>
  <h1>Example</h1>

  <script src="example.js"></script>                       
</body>

</html>

<!DOCTYPE html>
<html>

<body>
  <h1>Example</h1>

  <script src="some/other/folder/example.js"></script>        
</body>

</html>

<!DOCTYPE html>
<html>

<body>
  <h1>Example</h1>

  <script src="https://www.kirupa.com/js/example.js"></script>     
</body>

</html>

So...Which Approach to Use?

We have two main approaches around where our code should live (Figure 10.4).

The approach you end up choosing depends on your answer to the following question: Is the identical code going to be used across multiple HTML documents?

Yes, My Code Will Be Used on Multiple Documents!

If the answer is yes, then you probably want to put the code in an external file and then reference it across all of the HTML pages you want it executing in. The first reason you want to do this is to avoid having code repeated across multiple pages (Figure 10.5).

Duplicate code makes maintenance a nightmare where a change to your script will require you updating every single HTML document with the exact change. If you are employing some sort of templating or SSI logic where there is only one HTML fragment containing your script, then the maintenance issue is less of a problem.

The second reason has to do with file size. When you have your script duplicated across many HTML pages, each time a user loads one of those HTML pages, they are downloading your script all over again. This is less of a problem for smaller scripts, but once you have more than a few hundred lines of code, the size starts adding up.

When you factor all our code into a single file, you don’t have the issues I just outlined (Figure 10.6).

Your code is easily maintainable because you update your code inside the one file only. Any HTML document that references this JavaScript file automatically gets the most recent version when it loads. By having all of your code in one file, your browser will download the code only once and deliver the cached version of the file on subsequent accesses.

Meet the Console

Even if you think you write the most perfect JavaScript, you’ll be spending a fair amount of time in what is known as the console. If you’ve never used the console before, it is part of your browser’s developer tools where all sorts of text and stuff gets printed for you to see and (occasionally) interact with.

It will look a little bit like what is shown in Figure 11.1

At a very high level, your console helps with a bunch of things:

• You can read messages you have told your code to log and display

• You can modify your application state by setting (or overwriting) variables and values

• You can inspect the value of any DOM element, applied style, or code that is accessible and in scope

• You can use it as a virtual code editor and write/execute some code just for kicks

In this article, we won’t focus on all the things your console is capable of doing. Instead, we’re just going to take it easy and gradually get you comfortable with using the console to just display messages. We will cover all of the crazy console-related things eventually, so don’t worry.

Displaying the Console

The first thing we are going to do is get your console up. The console is a part of your browser’s developer tools. The way you bring up your browser developer tools is by fiddling with your browser’s menus or by using the handy keyboard shortcuts. From inside your browser, press Ctrl + Shift + I on Windows or Cmd + Alt + I on Mac to bring up the developer tools.

Depending on your browser and platform, each of your developer tools will look a little different. The important thing is to find the Console tab and make sure the console gets displayed.

When you bring up the console in Chrome, you’ll see something like what you see in Figure 11.2.

On Safari, the console will look a bit like Figure 11.3.

Firefox’s console looks like what is shown in Figure 11.4.

Bringing up the console in Microsoft Edge will look like Figure 11.5.

The thing I want to highlight is that it doesn’t matter which browser you use. The console looks and functions pretty much the same on all browsers. Just bring up the console in your favorite browser and get ready to start actually using the console in the following sections.

If You Want to Follow Along

Now, you can just read the following sections and learn a whole bunch of console-related things without lifting a finger. If that is what you would like to do, then skip all of this and jump to the next section.

On the other hand, if you want to get your hands a bit dirty and see some of the console shenanigans for yourself on your screen, create a new HTML document and add the following HTML, CSS, and JavaScript into it:

Click here to view code image

<!DOCTYPE html>
<html>

<head>
  <title>Console Stuff</title>

  <style>
    #container {
      padding: 50px;
    }

    #myButton {
      font-family: sans-serif;
      font-size: 24px;
      font-weight: lighter;
      background-color: #FFF;
      border: 3px #333 solid;
      padding: 15px;
    }

    #myButton:hover {
      background-color: aliceblue;
    }

  </style>
</head>

<body>
  <div id="container">
    <button id="myButton">click me</button>
  </div>
  <script>

    let myButton = document.querySelector("#myButton");
    myButton.addEventListener("click", doSomething, false);

    function doSomething(e) {
      alert("Is this working?");
    }
  </script>
</body>

</html>

What we have here is a really simple HTML page with a button that you can click. When you click on the button, an alert dialog (the same one we described earlier) will appear. In the following sections, we’ll modify this example to help bring some of the console-related things to life!

Console Logging 101

The first thing we are going to do is tell our console to display things on screen. This is no different than what we did with the alert statement earlier, and it is almost just as easy. The key to all of this is the Console API. This API contains a bunch of properties and methods that allow you to display things to your console in a variety of ways. The first and probably most popular of these properties and methods is the log method.

Meet the Log Method

At its most basic level, the way you use the log method is as follows:

Click here to view code image

console.log("Look, ma! I'm logging stuff.")

You call it via the console object and pass in the text that you want to display. To see this in action, we can replace the alert from our example with the following:

Click here to view code image

function doSomething(e) {
  console.log("Is this working?");
}

When you run this code, take a look at your console after clicking on the click me button. If everything worked out properly, you will see the “Is this working?” text displayed inside it as shown in Figure 11.6.

If you keep clicking on the button, you’ll see more instances of “Is this working?” getting logged as shown in Figure 11.7.

How that looks will depend on the developer tools you are using. You will probably just see a counter to the left of your initial message getting incremented as shown in the screenshot. You may see the text “Is this working?” getting duplicated in each line as well. Don’t be alarmed if what you see doesn’t exactly match what you see in my screenshots. The important detail is that your call to console.log works and is logging messages for you to see in the console. Also, these messages aren’t read only. You can select them. You can copy them. You can even print them and frame them on the wall behind you.

Going Beyond Predefined Text

Now that you’ve just seen the basics, let’s go a bit deeper. When using the console, you aren’t limited to only printing some predefined text. For example, a common thing you might do is print the value of something that exists only by evaluating an expression or accessing a value. To see what we mean by this, make the following change to your doSomething function:

Click here to view code image

function doSomething(e) {
  console.log("We clicked on: " + e.target.id);
}

What we are doing here is telling our console to display the text “We clicked on” in addition to the id value of the element we clicked on. If you preview these changes in your browser, click on the click me button again, and check out what is shown in the console, as in Figure 11.8.

The id value of the button you clicked on is displayed in addition to our predefined text. Now, getting the id value of an element is probably not the most exciting thing you might want to print, but you can print pretty much anything that would look good when represented as text. That’s powerful!

Displaying Warnings and Errors

It is time to look beyond the log method! Our console object provides us with the warn and error methods that allow us to display messages formatted as warnings and errors, respectively, as shown in Figure 11.9.

The way you use these two methods is no different from how you used the log method. Just pass in whatever you want to display. You can see an example of how to use these methods in the following snippet:

Click here to view code image

let counter = 0;

function doSomething(e) {
  counter++;

  console.log("Button clicked " + counter + " times!");

  if (counter == 3) {
    showMore();
  }
}

function showMore() {
  console.warn("This is a warning!");
  console.error("This is an error!");
}

When this code runs and our button is clicked three times, the showMore function gets called. Inside that function, all we have is our console warning and error:

Click here to view code image

function showMore() {
  console.warn("This is a warning!");
  console.error("This is an error!");
}

Now, there is something cool about warnings and errors that goes beyond just their appearance compared to their more boring log counterparts. You can expand them in the console and see the full stack trace of all the functions your code took before hitting them as shown in Figure 11.10.

For large pieces of code with a lot of branching, this is really useful. The warn and error methods provide an excellent way for us to better understand the twisted paths our code took into getting into whatever state it ended up in!

The Absolute Minimum

The console provides you with one of the best tools you have for understanding what your code is doing. Displaying messages is only one part of what the console allows you to do. Within our narrow focus on just displaying messages, there is a whole lot more that we can cover than what we’ve seen so far. We’ll cover more things the console does later, but the few console techniques you’ve seen here will take you far in helping you find and squash bugs in your code.

If you have any questions, feel free to post them on the forums at https://forum.kirupa.com. I and others will be extremely totally happy to help you out!

Let’s First Talk About Pizza

No, I haven’t completely lost it. Since I am always eating something (or thinking about eating something), I am going to try to explain the mysterious world of types by first explaining the much simpler world of pizza.

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:

The simple ingredients are easy to spot. These would be your mushrooms and jalapenos. The reason these are simple is because 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 simples one are...um...simple. These complex ingredients are made up of other ingredients:

Unfortunately for all of us, there is no one simple ingredient called cheese or pepperoni out there. We need to combine and prepare and add some more ingredients to make up some of the complex ingredients we see here. There is a subtle wrinkle to call out 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?!!

From Pizza to JavaScript!

While this may be hard to believe, everything we learned about pizzas in the previous section was there for a purpose. The description of the simple and complex ingredients very neatly applies to types in JavaScript. Each individual ingredient could be considered a counterpart to a type that you can use (Figure 12.1).

Just like the cheese, sauce, pepperoni, mushrooms, and bacon in our version of a pizza, the types in JavaScript are string, number, boolean, null, undefined, bigint, symbol, 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, the Table 12.1 provides a very brief summary of what they do.

Now, while each of the types is pretty unique in what it does. There is a simple grouping they fall under. Just like with our pizza’s simple and complex ingredients, our 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 our types in JavaScript are either known as primitive types (or just primitives) and object types (or just objects).

Our primitive types are string, number, boolean, null, bigint, symbol, and undefined types. Any values that fall under their umbrella can’t be divided any further. They are the jalapenos and mushrooms of the JavaScript world. Primitives are pretty easy to define and bucket into something understandable. There is no depth to them, and we pretty much get what we see when we encounter one.

Our object types, represented by Object in our table, are a bit more mysterious, so the last thing we want to cover before unleashing you with details about all of these types is what objects in JavaScript actually are.

What Are Objects?

The concept of objects in a programming language like JavaScript maps nicely to its real-world equivalents. In the real world, you are literally surrounded by objects. Your computer is an object. A book on a shelf is an object. A potato is (arguably) an object. Your alarm clock is an object. A poster you got on eBay is also an object. I could go on forever, but (for everyone’s sake) I’m going to stop here.

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.

The Predefined Objects Roaming Around in JavaScript

Besides the built-in types you saw earlier, you also have a handful of predefined objects in JavaScript that you can use out-of-the-box. These objects allow you to work with everything from collections of data to dates to even text and numbers. Table 12.2 lists these objects along with, just like before, a short blurb on what they do:

The way you use these built-in objects is a little bit different than how you use primitives. Each object has its own quirk on 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
let names = ["Jerry", "Elaine", "George", "Kramer"];
let alsoNames = new Array("Dennis", "Frank", "Dee", "Mac");

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

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

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

// infinity
let unquantifiablyBigNumber = Number.POSITIVE_INFINITY;

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

One thing that you may find puzzling is the existence of the Object-form of the string, boolean, symbol, bigint, 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

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

console.log(movie);
console.log(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 we’ve seen so far.

Creating an Array

The popular way all the cool kids create arrays these days is to use an open and close bracket. Below is our groceries variable that is initialized to an empty array:

let groceries = [];

You have your variable name on the left, and you have a pair of brackets on the right that initializes this variable as an empty array. This bracket-y approach for creating an array is better known as the array literal notation.

Now, you will commonly want to create an array with some items inside it from the very beginning. To create these non-empty arrays, place the items you want inside the brackets and separate them by commas:

Click here to view code image

let groceries = ["Milk", "Eggs", "Frosted Flakes", "Salami",
"Juice"];

Notice that my groceries array now contains Milk, Eggs, Frosted Flakes, Salami, and Juice. I just have to reiterate how important the commas are. Without the commas, you’ll just have one giant item instead. All right, now that you’ve learned how to declare an array, let’s look at how you can actually use it to store and work with data.

Accessing Array Values

One of the nice things about arrays is that you not only have easy access to the array, but you also have easy access to the array values...similar to highlighting an item in your grocery list (Figure 13.2).

The only thing you need to know is what the procedure is for accessing an individual item.

Inside an array, each item is assigned a number starting with zero. In Figure 3.2, Milk is given the value 0, Eggs the value 1, Frosted Flakes the value 2, and so on. The formal term for these numbers is called the index value.

Let’s say that our groceries array is declared as follows:

Click here to view code image

let groceries = ["Milk", "Eggs", "Frosted Flakes", "Salami",
"Juice"];

If I wanted to access an item from the array, all I need to do is pass in the index value of the item I am interested in:

groceries[1]

The index value is passed in to your array using square brackets. In this example, you are referring to the Eggs value because the index position 1 refers to it. If you passed in a 2, you would return Frosted Flakes. You can keep passing in an index value until you have no more values left.

The range of numbers you can use as your index values is one less than your array’s length. The reason is that, as shown in the diagram earlier, your index values start with a value of 0. If your array only has 5 items, trying to display grocery[6] or grocery[5] will result in a message of undefined.

Let’s go one step further. In most real-world scenarios, you will want to programmatically go through your array as opposed to accessing each item individually.

You can take what I explained in the previous paragraph and use a for loop to accomplish this:

Click here to view code image

for (let i = 0; i < groceries.length; i++) {
  let item = groceries[i];
}

Notice the range of your loop starts at 0 and ends just one before your array’s full length (as returned by the length property). This works because, like I mentioned earlier, your array index values go from 0 to one short of the value returned for the array’s length. And yes, the length property returns a count of all the items in your array!

Adding Items to Your Array

Rarely will you leave your array in the state you initialized it in originally. You will want to add items to it. To add items to your array, you will use the push method:

groceries.push("Cookies");

The push method is called directly on your array, and you pass in the data you want to add to it. By using the push method, your newly added data will always find itself at the end of the array.

For example, after running the code on our initial array, you will see Cookies added to the end of your groceries array (Figure 13.3).

If you want to add data to the beginning of your array, you use the unshift method:

Click here to view code image

groceries.unshift("Bananas");

When data is added to the beginning of your array, the index value for all of the existing items increases to account for the newly inserted data (Figure 13.4).

The reason is that the first item in your array will always have an index value of 0. This means that the space originally occupied by the 0th item needs to push itself and everything below it out to make room for the new data.

Both the push and unshift methods, besides adding the elements to the array when you use them, return the new length of the array as well:

Click here to view code image

console.log(groceries.push("Cookies")); // returns 6

Not sure why that is useful, but keep it under your hat in case you do need it.

Removing Items from the Array

To remove an item from the array, you can use the pop or shift methods. The pop method removes the last item from the array and returns it:

Click here to view code image

let lastItem = groceries.pop();

The shift method does the same thing on the opposite end of the array. Instead of the last item being removed and returned, the shift method removes and returns the first item from the array:

Click here to view code image

let firstItem = groceries.shift();

When an item is removed from the beginning of the array, the index positions of all remaining elements are decremented by 1 to fill in the gap (Figure 13.5).

Note that when you are adding items to your array using unshift or push, the returned value from that method call is the new length of your array. That is not what happens when you call the pop and shift methods, though! When you are removing items using shift and pop, the value returned by the method call is the removed item itself!

Finding Items in the Array

To find items inside your array, you have a handful of built-in methods: indexOf, lastIndexOf, includes, find, findIndex, and filter. For the sake of simplicity, we will focus on indexOf and lastIndexOf for now. These two methods work by scanning your array and returning the index position of the matching element.

The indexOf method returns the first occurrence of the item you are searching for:

Click here to view code image

let groceries =["Milk", "Eggs", "Frosted Flakes", "Salami",
"Juice"];
let resultIndex = groceries.indexOf("Eggs",0);

console.log(resultIndex); // 1

Notice that the resultIndex variable stores the result of calling indexOf on our groceries array. To use indexOf, I pass in the element I am looking for along with the index position to start from:

Click here to view code image

groceries.indexOf("Eggs", 0);

The value returned by indexOf in this case will be 1.

The lastIndexOf method is similar to indexOf in how you use it, but it differs a bit on what it returns when an element is found. Where indexOf finds the first occurrence of the element you are searching for, lastIndexOf finds the last occurrence of the element you are searching for and returns that element’s index position.

When you search for an element that does not exist in your array, both indexOf and lastIndexOf return a value of -1.

Merging Arrays

The last thing we are going to do is look at how to create a new array that is made up of two separate arrays. Let’s say you have two arrays called good and bad:

Click here to view code image

let good = ["Mario", "Luigi", "Kirby", "Yoshi"];
let bad = ["Bowser", "Koopa Troopa", "Goomba"];

To combine both of these arrays into one array, use the concat method on the array you want to make bigger and pass the array you want to merge into it as the argument. What will get returned is a new array whose contents are both good and bad:

Click here to view code image

let goodAndBad = good.concat(bad);
console.log(goodAndBad);

In this example, because the concat method returns a new array, the goodAndBad variable ends up becoming an array that stores the results of our concatenation operation. The order of the elements inside goodAndBad is good first and bad second.

Mapping, Filtering, and Reducing Arrays

So far, we looked at several ways to add items, remove items, and other basic bookkeeping tasks. One of the other things arrays bring to the table is really simple ways for you to manipulate the data that is contained inside them. These simple ways are brought to you via the map, reduce, and filter methods.

The Old School Way

Before we talk about map, reduce, and filter and how they make accessing and manipulating data inside an array a breeze, let us look at the non-breezy approach first. This is an approach that typically involves a for loop, keeping track of where in the array you are, and shedding a certain amount of tears.

To see this in action, let’s say we have an array of names:

Click here to view code image

let names = ["marge", "homer", "bart", "lisa", "maggie"];

This aptly named names array contains a list of names that are currently lowercased. What we want to do is capitalize the first letter in each word to make these names look proper. Using the for loop approach, this can be accomplished as follows:

Click here to view code image

let names = ["marge", "homer", "bart", "lisa", "maggie"];

let newNames = [];

for (let i = 0; i < names.length; i++) {
  let name = names[i];
  let firstLetter = name.charAt(0).toUpperCase();
  newNames.push(firstLetter + name.slice(1));
}

console.log(newNames);

Notice that we go through each item, capitalize the first letter, and add the properly capitalized name to a new array called newNames. There is nothing magical or complicated going on here, but you’ll often find yourself taking the items in your array, manipulating (or accessing) the items for some purpose, and returning a new array with the manipulated data. It’s a common enough task with a lot of boilerplate code that you will keep replicating unnecessarily. In large codebases, making sense of what is going on in a loop adds unnecessary overhead. That’s why map, filter, and reduce were introduced. You get all the flexibility of using a for loop without the unwanted side effects and extra code. Who wouldn’t want this?!

Modifying Each Array Item with Map

The first of the array methods we will look at for manipulating our array data is map. We will use the map method to take all the items in our array and modify them into something else that is an entirely new array (Figure 13.6).

The way you use it looks as follows:

Click here to view code image

let newArray = originalArray.map(someFunction);

This single line looks nice and friendly, but it hides a lot of complexity. Let’s de-mystify it a bit. The way map works is as follows: You call it on the array that you wish to affect (originalArray), and it takes a function (someFunction) as the argument. This function will run on each item in the array—allowing you to write code to modify each item as you wish. The end result is a new array whose contents are the result of someFunction having run and potentially modified each item in the original array. Sounds simple enough, right?

Using map, let’s revisit our earlier problem of taking the lowercased names from the array and capitalizing them properly. We’ll look at the full code first and then focus on the interesting details next. The full code is as follows:

Click here to view code image

let names = ["marge", "homer", "bart", "lisa", "maggie"];

function capitalizeItUp(item) {
  let firstLetter = item.charAt(0).toUpperCase();
  return firstLetter + item.slice(1);
}

let newNames = names.map(capitalizeItUp);
console.log(newNames);

Take a moment to see how this code works. The interesting part is the capitalizeItUp function that is passed in as the argument to the map method. This function runs on each item, and notice that the array item you are currently on is passed in to this function as an argument. You can reference the current item argument via whatever name you prefer. We are referencing this argument using the boring name of item:

Click here to view code image

function capitalizeItUp(item) {                               
  let firstLetter = item.charAt(0).toUpperCase();
  return firstLetter + item.slice(1);
}

Inside this function, we can write whatever code we want to manipulate the current array item. The only thing we need to do is return the new array item value:

Click here to view code image

function capitalizeItUp(item) {
  let firstLetter = item.charAt(0).toUpperCase();
  return firstLetter + item.slice(1);                          
}

That’s all there is to it. After all of this code runs, map returns a new array with all of the capitalized items in their correct locations. The original array is never modified, so keep that in mind.

Filtering Items

With arrays, you’ll often find yourself filtering (aka removing) items based on a given criterion (Figure 13.7).

For example, let’s say we have an array of numbers:

Click here to view code image

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

Right now, our numbers array has both even numbers as well as odd numbers. Let’s say we want to ignore all of the odd numbers and only look at the even ones. The way we can do that is by using our array’s filter method and filtering out all of the odd numbers so only the even numbers remain.

The way we use the filter method is similar to what we did with map. It takes one argument, a callback function, and this function will determine whether each array item will be filtered out or not. This will make more sense when we look at some code. Take a look at the following:

Click here to view code image

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let evenNumbers = numbers.filter(function (item) {
  return (item % 2 == 0);
});

console.log(evenNumbers);

We create a new array called evenNumbers that will store the result of filter running on our numbers array. The contents of this array will be the even numbers only thanks to our callback function checking each item to see whether the result of item % 2 (aka checking if the remainder when you divide by 2) is 0. If the callback function returns a true, the item is carried over to the filtered array. If the callback function returns false, the item is ignored.

One thing to note here is that our callback function isn’t an explicitly named function like our capitalizeItUp function we saw earlier. It is simply an anonymous one, but it still gets the job done. You’ll see this anonymous form commonly where a callback function needs to be specified, so become familiar with this style of defining a function.

Getting One Value from an Array of Items

The last array method we will look at is reduce. This is a bizarre one. With both map and filter, we went from one array with a starting set of values to another array with a different set of values. With the reduce method, we will still start with an array. What we will end up with will be a single value (Figure 13.8).

This is definitely one of those cases where we need an example to explain what is going on.

Let’s reuse our numbers array from earlier:

Click here to view code image

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

What we want to do is add up all the values here. This is the kind of thing the reduce method was built for where we reduce all the values in our array into a single item. Take a look at the following code:

Click here to view code image

let total = numbers.reduce(function(total, current) {
  return total + current;
}, 0);

console.log(total);

We call reduce on our numbers array, and we pass in two arguments to it:

• The callback function

• Initial value

We start our summing at an initial value of 0, and our callback function is responsible for adding up each item in the array. Unlike earlier where our callback function took only the current array item as its argument, the callback function for reduce is slightly more involved. You need to deal with two arguments here as well:

• The first argument contains the total value of all the actions you’ve done so far

• The second argument is the familiar current array item

By using these two arguments, you can easily construct all sorts of scenarios involving keeping track of something. In our example, since all we want is the sum of all items in the array, we are summing up the total with the value of current. The end result will be 31.

let words = ["Where", "do", "you", "want", "to", "go", "today?"];

let phrase = words.reduce(function (total, current, index) {
  if (index == 0) {
    return current;
  } else {
    return total + " " + current;
  }
}, "");

console.log(phrase);

A Short Foray into Functional Programming

As the last few sections have highlighted, the map, filter, and reduce methods greatly simplify how we work with arrays. There is another HUGE thing that these three methods scratch the surface of. That thing is something known as functional programming. Functional programming is a way of writing your code where you use functions that:

• Can work inside other functions

• Avoid sharing or changing state

• Return the same output for the same input

There are more nitpicky details that we can list here, but this is a good start. Anyway, you can see how functional programming principles apply to the various callback functions we’ve used so far. Our callback functions match these three criteria perfectly, for they are functions that can be dropped into or out of any situation as long as the arguments still work. They definitely don’t modify any state, and they work fully inside the map, filter, or reduce methods. Functional programming is a fun topic that needs a lot more coverage than what we’ve looked at in the last few sentences, so we’ll leave things be for now and cover it in greater detail in the future.

The Basics

The way we can work with strings is by just using them in our code. We just need to make sure to enclose them in single or double quotes. Below are some examples:

Click here to view code image

let text = "this is some text";
let moreText = 'I am in single quotes!';

console.log("this is some more text");

Besides just listing strings, we’ll often combine a couple of strings together. We easily do that by just using the + operator:

Click here to view code image

let initial = "hello";
console.log(initial + " world!");

console.log("I can also " + "do this!");

In all of these examples, we are able to see the string. The only reason I point out something this obvious is that, when we can see the contents of your string as literally as we do, these strings are more appropriately known as string literals. That doesn’t change the fact that the resulting structure is still a built-in primitive type called a string (you know...a simple pizza ingredient from the previous chapter).

If we had to visualize what the text and moreText strings look like, they would look like Figure 14.1.

We just have our two variables pointing to some literal chunks of text. There isn’t anything else that is going on. If you are wondering why I wasted this space in visualizing something so obvious, the visualizations will get more complex once we move into Object territory. You’ll see hints of that in this chapter itself.

Anyway, all of this isn’t particularly important...yet. The only important thing to keep in mind is that you need to wrap your string literals in either quotation marks (") or apostrophes (') to designate them as a region of text. If you don’t do that, bad things happen, and your code probably won’t run.

That’s all there is to the basics. The fun stuff comes from using all of the functionality JavaScript provides for working with strings. We’ll look at that and more in the following sections.

String Properties and Methods

When we are working with strings, the underlying String object implementation contains a lot of properties that make working with text (usually) easier. In the following sections, instead of going over every property and boring both of us to death, I’ll just focus on the important ones in the context of tasks you will be doing.

Accessing Individual Characters

While a string looks like one cohesive unit, it is actually made up of a series of characters. We can access each character in several ways. The most common way is by using array/bracket notation and passing in a number that corresponds to the index position of the character:

Click here to view code image

let vowels = "aeiou";
console.log(vowels[2]);

In this example, we will see the i character because it is the item at the second index position. To better visualize what just happened, the diagram in Figure 14.2 will help.

Here is something we should keep in mind when the word index is thrown around. Index positions in JavaScript start at 0 and move up from there. That is why our index position is 2, but the count of the element at that position is actually 3. This gets less weird the more you work with JavaScript and other languages that don’t contain the words Visual and Basic where indexes start from 1.

To go one step further, we can access all characters in our string by just looping through the index positions. The start of the loop will be 0, and the end of your loop will be determined by the length of your string. The length of your string (aka a count of the number of characters) is returned by the length property.

Here is an example of the preceding paragraph in action:

Click here to view code image

let vowels = "aeiou";

for (let i = 0; i < vowels.length; i++) {
  console.log(vowels[i]);
}

While we may not be looping through a string all the time, it is very common to use the length property to get a count of the number of characters in your string.

If we don’t get along with the array/bracket notation, we also have the charAt method that returns a character at a specified index position:

Click here to view code image

let vowels = "aeiou";
console.log(vowels.charAt(2));

The end result is identical to what we see using the array notation. I wouldn’t use this method unless you care about really old browsers like Internet Explorer 7. Yep, I didn’t think you did either.

Wait...What?

If you are wondering where in the world string primitives have the ability to access properties only available to String objects, suspend your curiosity for a few moments until the next chapter where we’ll look at this in much greater detail.

let stringA = "I am a simple string.";
let stringB = "I am a simple string, too!";

console.log(stringA + " " + stringB);

let textA = "Please";
let textB = new String("stop!");
let combined = textA + " make it " + textB;

console.log(combined);

let foo = "I really";
let blah = "why anybody would";
let blarg = "do this";

let result = foo.concat(" don't know", " ", blah, " ", blarg);

console.log(result);

let theBigString = "Pulp Fiction is an awesome movie!";

let theBigString = "Pulp Fiction is an awesome movie!";
console.log(theBigString.slice(5, 12));

let theBigString = "Pulp Fiction is an awesome movie!";
console.log(theBigString.slice(0, -6));

let theBigString = "Pulp Fiction is an awesome movie!";
console.log(theBigString.slice(-14, -7));

let newString = substr(start, length);

let theBigString = "Pulp Fiction is an awesome movie!";
console.log(theBigString.substr(0, 4)); // Pulp

let theBigString = "Pulp Fiction is an awesome movie!";
console.log(theBigString.substr(5, 7)); // Fiction

let theBigString = "Pulp Fiction is an awesome movie!";
console.log(theBigString.substr(5)); // Fiction is an awesome
movie!

let inspirationalQuote = "That which you can concatenate, you can
also split apart.";
let splitWords = inspirationalQuote.split(" ");

console.log(splitWords.length); // 10

let days = "Monday,Tuesday,Wednesday,Thursday,Friday,
Saturday,Sunday";
let splitWords = days.split(",");

console.log(splitWords[6]); // Sunday

let question = "I wonder what the pigs did to make these birds so
angry?";
console.log(question.indexOf("pigs")); // 18

let question = "I wonder what the pigs did to make these birds so
angry?";
console.log(question.indexOf("z")); // -1

let question = "How much wood could a woodchuck chuck if a
woodchuck could chuck wood?";
console.log(question.lastIndexOf("wood")); // 65

let question = "How much wood could a woodchuck chuck if a
woodchuck could chuck wood?";
console.log(question.indexOf("wood", 30)); // 43

let phrase = "There are 3 little pigs.";
let regexp = /[0-9]/;

let numbers = phrase.match(regexp);

console.log(numbers[0]); // 3

let phrase = "My name is Bond. James Bond.";

console.log(phrase.toUpperCase()); // MY NAME IS BOND. JAMES BOND.
console.log(phrase.toLowerCase()); // my name is bond. james bond.

Strings Aren’t the Only Problem

Because of how fun and playful they are (kind of like a Golden Retriever!), it’s easy to pick on strings as the main perpetrator of this primitive/Object confusion. As it turns out, many of the built-in primitive types are involved in this racket as well. Table 15.1 displays some popular built-in Object types with most of the guilty parties (Symbol and BigInt will be sitting this one out) that also exist as primitives highlighted:

Whenever we are working with boolean, number, or string primitives, we have access to properties their Object equivalent exposes. In the following sections, you’ll see what exactly is going on.

Let’s Pick on Strings Anyway

Just as you were taught by your parents growing up, we typically use a string in the literal form:

Click here to view code image

let primitiveText = "Homer Simpson";

As we saw in the table earlier, strings also have the ability to be used as objects. There are several ways to create a new object, but the most common way to create an object for a built-in type like our string is to use the new keyword followed by the word String:

Click here to view code image

let name = new String("Batman");

The String in this case isn’t just any normal word. It represents what is known as a constructor function whose sole purpose is to be used for creating objects. Just like there are several ways to create objects, there are several ways to create String objects as well. The way I see it, knowing about one way that you really shouldn’t be creating them with is enough.

Anyway, the main difference between the primitive and object forms of a string is the sheer amount of additional baggage the object form carries with it. If we had to visualize our String object called name, Figure 15.1 shows what that would look like.

We have your name variable containing a pointer to the text, Homer Simpson. You also have all of the various properties and methods that go with the String object—things you may have used like indexOf, toUpperCase, and so on. You’ll get a massive overview of what exactly this diagram represents when we look at Objects in greater detail, so don’t worry too much about what you see here. Just know that the object form of any of the primitives carries with it a lot of functionality.

Why This Matters

Let’s return to our earlier point of confusion. Our string is a primitive. How can a primitive type allow you to access properties on it? The answer has to do with JavaScript being really weird. Let’s say we have the following string:

Click here to view code image

let game = "Dragon Age: Origins";

The game variable is very clearly a string primitive that is assigned to some literal text. If I want to access the length of this text, we would do something as follows:

Click here to view code image

let game = "Dragon Age: Origins";
console.log(game.length);

As part of evaluating game.length, JavaScript will convert your primitive string into an object. For a brief moment, your lowly primitive will become a beautiful object in order to figure out what the length actually is. The thing to keep in mind is that all of this is temporary. Because this temporary object isn’t grounded or tied to anything after it serves its purpose, it goes away and you are left with the result of the length evaluation (a number) and the game variable still being a string primitive.

This transformation only happens for primitives. If we ever explicitly create a String object, then what we create is permanently kept as an object. Let’s say we have the following:

Click here to view code image

let gameObject = new String("Dragon Age:Origins");

In this case, our gameObject variable very clearly points to something whose type is Object. This variable will continue to point to an Object type unless you modify the string or do something else that causes the reference to be changed. The primitive morphing into an object and then morphing back into a primitive is something unique to primitives. Your objects don’t partake in such tomfoolery.

You can easily verify everything I’ve said by examining the type of your data. That is done by using the typeof keyword. Here is an example of me using it to confirm everything I’ve just told you about:

Click here to view code image

let game = "Dragon Age: Origins";
console.log("Length is: " + game.length);
let gameObject = new String("Dragon Age:Origins");

console.log(typeof game); // string
console.log(typeof game.length); // number
console.log(typeof gameObject); // object

Now, aren’t you glad you learned all this?

Using a Number

In order to use a number, all you have to do is...well, use it. Below is a simple example of me declaring a variable called stooges that is initialized to the number 3:

let stooges = 3;

That is it. There are no hoops to jump through. If you wanted to use more complex numbers, just use them as if nothing is different:

Click here to view code image

let pi = 3.14159;
let color = 0xFF;
let massOfEarth = 5.9742e+24;

In the above example, I am using a decimal value, a hexadecimal value, and a really large value using exponents. In the end, your browser will automatically do the right thing. Note that the “right thing” doesn’t just exist in the positive space. You can use negative numbers easily as well. To use negative numbers, just place a minus (-) character before the number you want to turn into a negative value:

let temperature = -42;

What you’ve seen in this section makes up the bulk of how you will actually use numbers. In the next couple of sections, let’s go a little bit deeper and look at some of the other interesting things you can do with numbers.

Operators

No introduction to numbers would be complete (...or started) without showing you how you can use mathematical operators in code to implement things you learned in first-grade Math class.

Let’s look at the common operators in this section.

let total = 4 + 26;
let average = total / 2;
let doublePi = 2*3.14159;
let subtractItem = 50 - 25;
let remainder = total % 7;
let more = (1 + average * 10) / 5;

Incrementing and Decrementing

A common thing you will do with numbers will involve incrementing or decrementing a variable by a certain amount. Below is an example of me incrementing the variable i by 1:

Click here to view code image

let i = 4;
i = i + 1;

You don’t have to increment or decrement by just 1. You can use any arbitrary number:

Click here to view code image

let i = 100;
i = i - 2;

All of this doesn’t just have to just be addition or subtraction. You can perform other operations as well:

Click here to view code image

let i = 100;
i = i / 2;

You should start to see a pattern here. Regardless of what operator you are using, you’ll notice that you are cumulatively modifying your i variable. Because of how frequently you will use this pattern, you have some operators that simplify this a bit (Table 16.1).

If I use these operators on the three examples you saw earlier, the code will look as follows:

Click here to view code image

i++;
i -= 2;
i /= 2;

Before we wrap this up, there is one quirk you should be aware of. It has to do with the -- and ++ operators for incrementing or decrementing a value by 1. Whether the ++ and -- operators appear before or after the variable they are incrementing matters.

Let’s look at this example:

Click here to view code image

let i = 4;
let j = i++;

After executing these two lines, the value of i will be 5...just like you would expect. The value of j will be 4. Notice that in this example, the operator appears after the variable.

If we place the operator in front of the variable, the results are a bit different:

Click here to view code image

let i = 4;
let j = ++i;

The value of i will still be 5. Here is the kicker...the value of j will be 5 also.

What changed between these two examples is the position of the operator. The position of the operator determines whether the incremented value will be returned or the pre-incremented value will be returned. Now, aren’t you glad you learned that?

Hexadecimal and Octal Values

Beyond using normal decimal values, you can use hexadecimal (base 16) and octal (base 8) values as well. When working with octal values, make sure to start your number with a 0:

let leet = 0o2471;

For hexadecimal values, you need start your number with 0x:

let leet = 0x539;

In many situations, you’ll find yourself dealing with octal and hexadecimal values in the form of strings. If they are strings, you cannot manipulate them as you would normal numbers. You need to convert the string to a number first.

The way you do that is by using the parseInt function:

Click here to view code image

let hexValue = parseInt('FFFFFF', 16);
let octalValue = parseInt('011', 8);

The parseInt function takes your hexadecimal or octal value followed by the base you are converting from.

Special Values—Infinity and NaN

The last thing we will look at are two global properties that you will encounter that aren’t numerical values. These values are Infinity and NaN.

let myLoveForYou = Infinity * 2;

let nope = 1920 / "blah";

The Math Object

Numbers are used in a variety of mathematical expressions, and they often go beyond simple additions, subtractions, multiplications, and divisions. Your math classes back in the day would have been a whole lot easier if that’s all there was to it. To help you more easily do complicated numerical things, you have the Math object. This object provides you with a lot of functions and constants that will come in handy, and we are going to very briefly look at some of the things this object does.

The Constants

To avoid you having to explicitly define mathematical constants like pi, Euler’s constant, natural log, and so on, the Math object defines many common constants for you (Table 16.2).

Usage	What it stands for
Math.E	Euler’s constant
Math.LN2	Natural logarithm of 2
Math.LN10	Natural logarithm of 10
Math.LOG2E	Base 2 logarithm of E
Math.LOG10E	Base 10 logarithm of E
Math.PI	3.14159 (that’s all I remember, and I’m too lazy to look up the rest!)
Math.SQRT1_2	Square root of 1/2
Math.SQRT2	Square root of 2

Of all of these constants, the one I’ve used the most is Math.PI:

You will use this in everything from drawing circles on your screen to specifying trigonometric expressions. In fact, I can’t ever remember having used any of these other constants outside of Math.PI. Here is an example of a function that returns the circumference given the radius:

Click here to view code image

function getCircumference(radius) {
  return 2 * Math.PI * radius;
}

console.log(getCircumference(2));

You would use Math.PI or any other constant just as you would any named variable.

let position = getPositionFromCursor(); // 159.3634493939

Math.floor(.5); // 0
Math.ceil(.5); // 1
Math.round(.5); // 1

Math.floor(3.14); // 3
Math.round(3.14); // 3
Math.ceil(3.14); // 4

Math.floor(5.9); // 5
Math.round(5.9); // 6
Math.ceil(5.9); // 6

Math.cos(0); // 1
Math.sin(0); // 0
Math.tan(Math.PI / 4); // 1
Math.cos(Math.PI); // 1
Math.cos(4 * Math.PI); // 1

Math.pow(2, 4); //equivalent of 2^4 (or 2 * 2 * 2 * 2)
Math.exp(3); //equivalent of Math.E^3
Math.sqrt(16); //4

Math.abs(37); //37
Math.abs(-6); //6

Random Numbers

To generate a somewhat random number between 0 and a smidgen less than 1, you have the Math.random() function. This function doesn’t take any arguments, but you can simply use it as part of a mathematical expression:

Click here to view code image

let randomNumber = Math.random() * 100;

Each time your Math.random function is called, you will see a different number returned for Math.random(). To learn all about how to work with this function to generate random numbers, read the Random Numbers in JS tutorial.

A Tale of Two Properties

On the surface, accessor properties and data properties look very similar. With a data property, you can read and write to a property:

Click here to view code image

theObj.storedValue = "Unique snowflake!"; // setting
console.log(theObj.storedValue); // reading

With an accessor property, you can pretty much do the exact same thing:

Click here to view code image

myObj.storedValue = "Also a unique snowflake!"; // setting
console.log(myObj.storedValue); // reading

We can’t tell by looking at how a property is used to see if it is a data property or an accessor property. To tell the difference, we have to go where the property is actually defined. Take a look at the following code where we have a few properties defined inside our zorb object:

Click here to view code image

let zorb = {
  message: "Blah",

  get greeting() {
    return this.message;
  },

  set greeting(value) {
    this.message = value;
  }
};

First up is message, a regular old data property:

Click here to view code image

let zorb = {
  message: "Blah",                                         

  get greeting() {
    return this.message;
  },

  set greeting(value) {
    this.message = value;
  }
};

We know this is a data property because it is just a property name and a value. There isn’t anything else going on here. Now, here is where things get a little exciting. The next property we have is greeting, and it doesn’t look like any property we’ve seen in the past:

Click here to view code image

let zorb = {
  message: "Blah",

  get greeting() {                                          
    return this.message;                                    
  },                                                        

  set greeting(value) {                                     
    this.message = value;                                   
  }                                                         
};

Instead of a simple name and value arrangement like we saw with message, the greeting property is broken up into two functions preceded by either a get or set keyword:

Click here to view code image

let zorb = {
  message: "Blah",

  get greeting() {                                          
    return this.message;
  },

  set greeting(value) {
    this.message = value;
  }
};

These keyword and function pairs are commonly known as getters and setters respectively. What makes them special is that we don’t access greeting as a function. We access it just like we would any old property:

Click here to view code image

zorb.greeting = "Hola!";
console.log(zorb.greeting);

The real interesting stuff happens at the getter and setter level, so we will dive deeper into them next.

Meet Getters and Setters

Based on what we know so far, getter and setter are just fancy names for functions that behave like properties. When we try to read an accessor property (zorb.greeting), the getter function gets called:

Click here to view code image

let zorb = {
  message: "Blah",

  get greeting() {                                              
    return this.message;                                        
  },                                                            

 set greeting(value) {
    this.message = value;
  }
};

Similarly, when we set a new value to our accessor property (zorb.greeting = "Hola!"), the setter function gets called:

Click here to view code image

let zorb = {
  message: "Blah",
  get greeting() {

    return this.message;
  },

  set greeting(value) {                                     
    this.message = value;                                   
  }                                                         
};