Forem: Robert Hieger

A Quick Look at the JavaScript apply() Method

Robert Hieger — Sun, 12 Nov 2023 02:32:27 +0000

This article was originally published on JavaScript in Plain English.

Photo by Kelly Sikkema on Unsplash

Introductory Remarks

A Brief Recap

Let's Get Started

What Needs to Change?

Now Let's Refactor the Code

Step 1: Make the Needed Changes to index.html

Step 2: Rename the CSS Style Sheet

Step 3: Refactor the dog Objects to Use the apply() Method

How Does Function.prototype.apply() Differ from Function.prototype.bind()?

Step 4: Refactor the Event Listeners for button1 through button3

What's Next?

Works Cited

In the third of three tutorials, we will examine the use of the apply() method.

Our main focus is refactoring the finished product from the previous tutorial so that it takes advantage of the apply() method, rather than the bind() method.

If you have not read the second tutorial in this series, you would do best to read through A Quick Look at the JavaScript bind() Method. Certainly, if you have not worked through the first tutorial in the series, you would do best to review A Quick Look at the JavaScript call() Method.

Our starting point will be the finished code from the second tutorial in this series.

A Brief Recap

Whereas the previous tutorial resulted in a simple demo application that demonstrated the use of the bind() method, in this tutorial we will refactor the same application to take advantage of the apply() method.

Figure 1 below shows the starting point for this tutorial—the opening screen of the application:

Fig. 1 My Favorite Dogs Opening Screen

When finished, the refactored application should produce exactly the same output as its two predecessors.

Let's Get Started

To get started, please download the tutorial starter code. Simply click the download icon found in the Github link as shown below in Figure 2:

Fig. 2 Github Starter Code Download Page

You can unzip the archive onto your local drive and you will see the following project files as shown in Figure 3 below:

Fig. 3 Starter Code Project Files

What Needs to Change?

Two main parts of the application will require refactoring. The first is the index.html file, itself, changed mainly for semantic reasons and consistency with the refactored application's purpose. The second is the app.js file, and here the change is more extensive and substantive.

Code Listing 1 below shows the first block of code that will need to be refactored:

// Bound functions:
const dog1 = getDogInfo.info.bind(breed1);
const dog2 = getDogInfo.info.bind(breed2);
const dog3 = getDogInfo.info.bind(breed3);

// Dog Data Arrays
const dogBreed1 = dog1();
const dogBreed2 = dog2();
const dogBreed3 = dog3();

Code Listing 1 Dog Objects and the dogBreed Arrays Resulting from their Invocation

In Code Listing 1, we see three dog objects. The values stored in these objects are derived from the getDogInfo object, on which the info() method is called and bound to the breed object, which, in turn, contains the properties of each favorite dog breed.

In the code that follows, dog1 through dog3 are called and return three arrays assigned to dogBreed1 through dogBreed3. This was the method employed in the last tutorial to assemble the data that populates the three rows of data on favorite dog breeds.

Code Listing 2 below shows the last block of JavaScript code with which we are concerned in this tutorial:

// Button Event Listners:
button1.addEventListener( 'click', () => {
  setRowCotent(
    breedOne,
    breedOrigin1,
    breedAvgLife1,
    dogBreed1
  );
});

button2.addEventListener( 'click', () => {
  setRowCotent(
    breedTwo,
    breedOrigin2,
    breedAvgLife2,
    dogBreed2
  );
});

button3.addEventListener( 'click', () => {
  setRowCotent(
    breedThree,
    breedOrigin3,
    breedAvgLife3,
    dogBreed3
  );
});

As in the second tutorial of this series, we will need to refactor the event listeners for button1 through button3. button4 remains uniform in all three tutorials in this series.

Now Let's Refactor the Code

We can now refactor the code to take advantage of the apply() method. Once you have unzipped the starter code archive, follow the steps below:

Step 1: Make the Needed Changes to index.html

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bind() Method Demo</title>
  <script src="./js/app.js" defer></script>
  <link rel="stylesheet" href="./css/bind-demo.css">
</head>

Code Listing 3 Section of index.html

As in the previous tutorial, we are concerned only with two lines in Code Listing 3 above.

Make the following changes to index.html:

1) Change the line with the <title> tag so it reads as follows:

<title>apply() Method Demo</title>

2) Change the line with the <link> tag so it reads as follows:

<link rel="stylesheet" href="./css/apply-demo.css">

Step 2: Rename the CSS Style Sheet

If you refer to Figure 3 above, you will see that the CSS style sheet is named bind-demo.css. This name does not match the name of the style sheet referenced in our revised <link> tag.

Rename bind-demo.css to apply-demo.css.

If you open index.html in your browser, everything will display correctly. In fact, if you click the buttons of the app, they will function exactly as they did in the previous tutorial. This is due to the original code in our starter files for the project.

Now we can explore in depth how to refactor the application logic found in app.js so that it takes advantage of the apply method instead of the bind() method.

Refactor the dog Objects to Use the `apply()` Method

// Get info for each breed object:
const getDogInfo = {
  info: function() {
    return [
      this.breed,
      this.origin,
      this.lifeSpan
    ];
  }
};

// Bound functions:
const dog1 = getDogInfo.info.bind(breed1);
const dog2 = getDogInfo.info.bind(breed2);
const dog3 = getDogInfo.info.bind(breed3);

// Dog Data Arrays:
const dogBreed1 = dog1();
const dogBreed2 = dog2();
const dogBreed3 = dog3();

Code Listing 4 The getDogInfo Object and the Derived dog Objects

Let's review the code above in Code Listing 4 to better understand what we will be changing in the refactored code.

In our starter code, the info() method is called on the getDogInfo object, and the bind() method is chained to the info() method.

Three sequentially numbered breed objects are passed to the bind() method and the results are store to three sequentially numbered dog objects.

Finally, as shown in the finished code from the last tutorial, each dog object is called and its results stored in the sequentially numbered dogBreed objects, the contents of which are arrays containing the dog breed information to be injected dynamically in the table rows shown above in Figure 1 at the beginning of this article.

Our objective in refactoring the code seen in Code Listing 4 is to replace the bind() method called on the dog objects with the apply() method.

How Does `Function.prototype.apply()` Differ from `Function.prototype.bind()`?

The bind() method returns a new function that, upon being called, has its reference to which the keyword this is set. It may also have a set of optional arguments that must precede any that are passed at the time the new returned function is called.

The apply() method, in contrast, calls a function whose reference for the this keyword has been set, and then an array (or array-like object) containing any arguments required in the function.

Now let's see how to refactor this code in Code Listing 4 above to take advantage of the apply() method.

Make the following changes to the code:

In place of the dog object declarations above in Code Listing 4, type in the code listed below in Code Listing 5:

// Bound functions:
const dog1 = getDogInfo.info.apply(
  breed1, [
    breed1[0],
    breed1[1],
    breed1[2]
  ]
);

const dog2 = getDogInfo.info.apply(
  breed2, [
    breed2[0],
    breed2[1],
    breed2[2]
  ]
);

const dog3 = getDogInfo.info.apply(
  breed3, [
    breed3[0],
    breed3[1],
    breed3[2]
  ]
);

Code Listing 5 Refactoring of 3 dog Objects

There are two notable differences in the code for the three dog objects above. The first is that the bind() method is replaced by the apply() method. The remaining difference in our refactored code has bigger implications, as we will soon see.

The first argument to the apply() method in the objects defined above is a reference object to which the this keyword refers. Then there is an array of arguments, as discussed above. In this case, the arguments are the elements of the array that contains the content to go into the three table cells of each row containing dog breed information.

The second rather notable difference is that when using the apply() method, because no new object is returned, as is the case when using bind(), there is no longer any need to create dogBreed objects to model the data for the table rows, as shown earlier in Code Listing 4.

This definitely makes for more compact code, cutting out a full three lines of code. As we directly access the values stored in the dog objects created with the getDogInfo.info() method call, also shown above in Code Listing 5, we are able to access the indices in the dog arrays directly, eliminating an interim step.

Does this mean that the bind() method is inefficient or undesirable? In this case, the answer is bigger than the question. The concepts involved are fairly advanced, but several articles have been published that explore the question of optimum use cases for the three methods—call(), bind() and apply()—explored in this tutorial series.

Step 4: Refactor the Event Listeners for button1 through button3

As one final step in our refactoring, one subtle change must be made to the event listeners for button1 through button3, as shown earlier in Code Listing 2.

Referring back to Code Listing 2, you will note that the last argument in the setRowContent() callback function reads dogBreed1, dogBreed2 and dogBreed3. These arguments hearken back to our previous iteration of the application, which used the bind() method.

The bind() method, as you will recall, set the value of the this keyword to the specified object—in our case breed1, breed2 and breed3. However, in the process, a new object is returned. In order to access the properties in that object the info() method was called and the apply() method was chained to it. The result was stored in brand new arrays stored to the constants dogBreed1-dogBreed3.

Using the apply() method, we can cut out this "middleman" step, by allowing access directly to the properties within the object reference set for the this keyword. We may therefore access properties from dog1, dog2 and dog3.

For convenience, Code Listing 6 below shows the relevant code to be refactored:

// Button Event Listeners:
button1.addEventListener('click', () => {
  showRowContent(
    breedOne,
    breedOrigin1,
    breedAvgLife1,
    dogBreed1
  );
});

button2.addEventListener('click', () => {
  showRowContent(
    breedTwo,
    breedOrigin2,
    breedAvgLife2,
    dogBreed2
  );
});

button3.addEventListener('click', () => {
  showRowContent(
    breedThree,
    breedOrigin3,
    breedAvgLife3,
    dogBreed3
 );
});

Code Listing 6 Event Listeners to be Refactored

Refactoring the above code is fairly trivial—merely a change of the last argument in each of the setRowContent() methods. But as discussed earlier, the implications of this change are significant because the extra step of saving the values to be placed in each row to constants is eliminated.

Now we do the refactoring of the code above, making the minor changes described above. Make sure that your code matches that shown in Code Listing 7:

// Button Event Listeners:
button1.addEventListener('click', () => {
  showRowContent(
    breedOne,
    breedOrigin1,
    breedAvgLife1,
    dog1
  );
});

button2.addEventListener('click', () => {
  showRowContent(
    breedTwo,
    breedOrigin2,
    breedAvgLife2,
    dog2
  );
});

button3.addEventListener('click', () => {
  showRowContent(
    breedThree,
    breedOrigin3,
    breedAvgLife3,
    dog3
  );
});

Code Listing 7 Refactored Event Listeners for button1 through button3

Now that these changes have been implemented, you can see the results by pointing your browser at the index.html file in your application folder, or by going to the page live on codepen.io.

What's Next?

At the end of the first tutorial, I mentioned that the little application we created is simplistic and does not take into account user input. As a result, there is the rather artless paradigm of a button bar with four buttons, three of which fill in details about three pre-determined dog breeds and one that resets the table to its initial state. I indicated that I would be refactoring the current application to be a far more robust, dynamic and user interactive Single Page Application (SPA).

The current application barely qualifies as an application with dynamic generation of data. I intend to build a new version soon, which will include a modal dialogue in which a user can input the dog breed information of choice. The breeds will therefore not be pre-determined as in this version of the application.

The implications of these changes are profound from a user interface perspective and also a data validation perspective, as it cannot be predicted ahead of time what a user will enter, and whether the data entered is valid.

Please stay tuned for my next tutorial—My Favorite Dogs—A Simple Single Page Application (SPA).

Works Citied

Hieger, Robert. "A Quick Look at the bind() Method:
Understand the bind() Method in JavaScript." dev.to,
DEV Community, 22 Aug 2021, https://dev.to/rhieger/a-quick-look-at-the-javascript-bind-method-understand-the-bind-method-in-javascript-7hh

---. "A Quick Look at the JavaScript call() Method." dev.to,
DEV Community, 5 May 2021, https://dev.to/rhieger/a-quick-look-at-the-javascript-call-method-5ghc.

"How and When to Use bind, call, and apply in JavaScript."
Eigenx, Eigen X, 2 Aug. 2018 https://www.eigenx.com/blog/https/mediumcom/eigen-x/how-and-when-to-use-bind-call-and-apply-in-javascript-77b6f42898fb.

A Quick Look at the JavaScript bind() Method: Understand the bind() Method in JavaScript

Robert Hieger — Mon, 06 Nov 2023 17:19:29 +0000

Photo by Negative Space from Pexels

This article was first published on Javascript in Plain English

Introduction

Let's Get Started

What Needs to Change?

Now Let's Refactor the Code

Step 1: Make the Needed Changes to index.html

Step 2: Rename the CSS Style Sheet

Step 3: Refactor the breed Objects

Step 4. Refactor the dog Objects to use the bind() Method

How Does Function.prototype.bind() Differ from Function.prototype.call()?

What's Next?

Works Cited

Introduction

It has been a while, and I am happy top get back to my promised series of tutorials. This is the second in a series of three tutorials on a project to demonstrate the call(), bind() and apply() methods, which bear similarities, but also have distinct differences.

The first tutorial in this series covered the use of the call() method in a project that populated a table of favorite dog breeds on the click of buttons beneath the table.

The text editor used in this tutorial is Visual Studio Code (VSC), a very powerful, yet easy-to-use extensible programmer's editor by Microsoft. And it is absolutely free. However, you can use your favorite text editor instead, as long as it features code syntax highlighting for JavaScript, as this will ease in reading your code, and preferably "IntelliSense" to anticipate the code you intend, after a few keystrokes.

In this second of three tutorials, we will take a look at the bind() method, which bears similarity to the call() method.

The code in this project will produce output identical to that of the first tutorial, but using the bind() method instead. This will require several changes to the code from the previous tutorial.

PREREQUISITE: If you have not already gone through the first tutorial in this series, because a good deal of the code will not be reviewed here, you would do best to review A Quick Look at the JavaScript call() Method.

As we have already built a functioning model of the finished project (as shown below in Figure 1), our focus in this tutorial will not be a walkthrough of the entire process, but rather an exploration of the differences in code for this version of the project.

Fig. 1 Opening Screen of My Favorite Dogs

For a brief recap, in the first tutorial, we built a very simple single page application (SPA) with four buttons, the first three of which allowed a user to populate three rows of a table with data on favorite dog breeds. The fourth button reset the table to its original state as shown above.

Let's Get Started

To get started, please download the tutorial starter code. Simply click the download icon found in the Github Link as shown below in Figure 2:

Fig. 2 Download Starter Code

You can unzip the archive onto your local drive and you will see the project files as shown in Figure 3 below:

Fig. 3 Starter Code Project Files

Figure 3 shows a directory tree with a css folder containing the external stylesheet for the project, a js folder to contain the application logic, and finally the index.html file with the application content.

What Needs to Change?

Several things must change to refactor this application to use the bind() method, some trivial and some a bit more involved.

We will need to make changes in all three files that make up the application. In index.html the file reference to the external stylesheet will change for semantic reasons, as will the content in the <title> tag.

Then, refactoring will occur in the code shown below in Code Listing 1:

const dog1 = getDogInfo.info.call(breed1);
const dog2 = getDogInfo.info.call(breed2);
const dog3 = getDogInfo.info.call(breed3);

Code Listing 1 Calls to getDogInfo

The code in Code Listing 1 above will be refactored to use the bind() method. This will require an additional segment of code due to the difference between the call() and bind() methods.

Now Let's Refactor the Code

Armed with knowledge of the outlined changes above, we can refactor the code to demonstrate use of the bind() method.

Step 1: Make the Needed Changes to index.html

Code Listing 2 below shows the <head> section of the index.html file included in your starter code:

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-UA Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>call() Method Demo</title>
  <script src="./js/app.js"></script>
  <link rel="stylesheet" href="./css/call-demo.css">
</head>

Code Listing 2 Section of index.html

We are concerned only with two lines in Code Listing 2.

Make the changes below to your starter code:

1) Change the line with the <title> tag so that it reads as follows:

<title>bind() Method Demo</title>

2) Change the line with the <link> tag to read as follows:

<link rel="stylesheet" href="./css/bind-demo.css">

Step 2: Rename the CSS Stylesheet

Referring back to Figure 3, you will see that CSS style sheet is named call-demo.css. This name does not match the name of the style sheet referenced in our revised <link> tag.

Rename call-demo.css to bind-demo.css.

If you open **index.html in your browser, everything will display correctly. In fact, if you click the buttons of the app, they will function exactly as they did in the previous tutorial. This is due to the original code in our starter files for the project.

Now we have set the stage. Take a deep breath and let's dig into refactoring the application logic found in app.js so that it takes advantage of the bind() method instead of the call() method.

Step 3: Refactor the breed Objects

Code Listing 3 below shows the relevant code for this step:

const breed1 = {
  breed: 'PUG',
  origin: 'CHINA',
  lifeSpan: '12-15 YEARS'
};

const breed2 = {
  breed: 'LABRADOR',
  origin: 'NEWFOUNDLAND',
  lifeSpan: '10-12 YEARS'
};

const breed3 = {
  breed: 'BEAGLE',
  origin: 'ENGLAND',
  lifeSpan: '12-15 YEARS'
};

Code Listing 3 The breed Objects

As Code Listing 3 shows, there are three sequentially numbered breed objects that contain the properties that will be dynamically injected into the columns of the table in our app.

There is absolutely nothing wrong with the code above and it would work just fine for the purposes of this demo. But I am going to ask you to change the above three objects so that they look like the code in Code Listing 4 below:

const breed1 = {
  breed: 'pug',
  origin: 'china',
  lifeSpan: '12-15 years'
};

const breed2 = {
  breed: 'labrador',
  origin: 'newfoundland',
  lifeSpan: '10-12 years'
};

const breed3 = {
  breed: 'beagle',
  origin: 'england',
  lifeSpan: '12-15 years'
};

Code Listing 4 Breed Objects Refactored

You might be asking yourself, "Why is this necessary?" And from a certain point of view, you would be correct. I chose to refactor this code for the following reasons:

As will be seen in the code that follows, refactoring this code as shown above cedes control of the typography to the application logic, rather than hard-coding the uppercase letters.
Later on, especially if this application were to be developed into a more functional model that accepted user input, all manner of characters a user might enter could then be cleaned up view transformation of the raw data entered by the user.

In essence, this kind of behavior is more far-reaching and geared toward further development of this simplistic demo.

Step 4. Refactor the dog Objects to the use the `bind()` Method

Code Listing 5 below shows the code relevant to our task:

const getDogInfo = {
  info: function() {
    // Array containing properties of each dog object
    return [
      this.breed,
      this.orgin,
      this.lifeSpan
    ];
  }
};

const dog1 = getDogInfo.info.call(breed1);
const dog2 = getDogInfo.info.call(breed2);
const dog3 = getDogInfo.info.call(breed3);

Code Listing 5 The getDogInfo Object and the Derived dog Objects

To clarify how we will refactor the above, let's review the code in Code Listing 5 to clarify what is happening in this listing.

The getDogInfo Objet contains a single property, a method called info(), whose sole purpose is to return the values that it will get, albeit indirectly, from the breed objects. Note that the values returned correspond directly to the properties within the breed objects shown in Code Listing 4 (the refactored breed objects).

In Code Listing 5, three dog objects are created using the call() method. In this case, the object created is an array containing the values of the properties. But how does this differ from what we will do when we refactor this code?

How Does Function.prototype.bind() Differ from Function.prototype.call()?

A Brief Explanation. If you are looking for a thorough explanation of just how both these methods work, you'll find the most complete information at the Mozilla Developer Network page for Function.prototype.call() and Function.prototype.bind().

A simpler summary of the differences can be expressed like this:

The call() method invokes a function object and takes an argument that specifies to which object the this keyword refers. Additional arguments may also be added within the call() method signature.
The bind() method, unlike the call() method, returns a brand new function which may be called, and through which you may pass an array and as many arguments as needed.

To refactor some of the code in Code Listing 5, revise the last three lines for objects dog1 through dog3, so that they look like the code in Code Listing 6 below:

const dog1 = getDogInfo.info.bind(breed1);
const dog2 = getDogInfo.info.bind(breed2);
const dog3 = getDogInfo.info.bind(breed3);

Code Listing 6 Refactored dog Objects

So far, the only different is that we substituted bind() for call() in the three refactored declarations above.

But now comes the real difference. Now you should input the code below in Code Listing 7:

// Dog Data Arrays
const dogBreed1 = dog1();
const dogBreed2 = dog2();
const dogBreed3 = dog3();

Code Listing 7 dog Functions Invoked and Their Properties Stored

Why this extra step? Remember that what the bind() method does is to return a brand new function. An array and any number of arguments may be passed to this new function. For the purposes of our project, we will make use only of an array. But this array must be stored as a constant from which it may be accessed. The three lines of code in Code Listing 7 achieve this.

With the creation of the three constants shown in Code Listing 7, we have finished our refactoring of the application.

To see the newly-refactored app in action, simply load the index.html file into your browser. You will find that its functionality is identical to that of the application in the first tutorial of this series.

Or you can visit the finished refactored application on codepen.io.

What's Next?

The third tutorial in this series will refactor this application once again to take advantage of the apply() method. As you will see, this method also bears some similarity to the bind() method. We will explore those differences as we refactor the application using this last of the three methods mentioned in the first tutorial.

See you soon in the next tutorial, A Quick Look at the JavaScript apply() Method.

Works Cited

Hieger, Robert. “A Quick Look At The Javascript call() Method.” Dev,
DEV Community, 31 July 2021, https://dev.to/rhieger/a-quick-look-at-the-javascript-call-method-5ghc.

“Function.Prototype.call() -Javascript | MDN.” Mozilla Developer
Network, Mozilla Foundation, 26 Sept. 2023, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call.

“Function.Prototype.bind() - Javascript | MDN.” Mozilla Developer Network,
Mozilla Foundation, Aug. 2023, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind.

A Quick Look at the JavaScript call() Method

Robert Hieger — Sun, 29 Oct 2023 02:26:10 +0000

Photo by James Harrison on Unsplash

This article was originally published on JavaScript in Plain English

Introductory Remarks

What This Tutorial Assumes

What Does the call() Method Do?

Now Let's Build It

Step 1. Download the Starter Code

A Brief Tour of the Starter Code

Step 2. Declaring Objects to Reference the Desired HTML Elements

Step 3. Create the 3 Dog Objects

Step 4. Coding the getDogInfo Object

Step 5. Using the call() method to specify the object whose properties we want returned as an Array

Step 6. Implementing the resetTable() function

Step 7. Implement the setRowContent() function

Step 8. Implementing the event listeners

A Final Word

Works Citied

I found my way into full-stack web development from an atypical background. I am an actor, writer, director, and musician. Full-stack web development and design felt like a natural choice to me, as it provides the opportunity to exercise my imagination and express aesthetically in visual design for the web.

Like so many of us working in or studying software engineering and design, I am a firm believer in the idea that one of the best teachers is testing your skills by sharing that knowledge with others.

This is the first of three articles on three very useful methods exposed by the JavaScript function object—call(), bind(), and apply(). These methods are similar to one another, and thus can be a bit confusing.

The demo project in this article is not intended to be a treatise on the best and only way to employ the call() method. Rather, I intend to share my discovery in grappling with the difficulties one encounters when learning the call() method.

I have been a dog lover all my life. I thought it might be fun to create a web page that dynamically lists out some favorite dog breeds, their indigenous habitats, and their average lifespans in a table as seen below:

Fig. 1 Opening Screen of MY FAVORITE DOGS Demo

The object of this demo is to employ the call() method that function objects expose to extract properties from objects and assign them dynamically to text nodes in the Document Object Model (DOM).

I am a firm believer in the idea that one of the best teachers is testing your skills by sharing that knowledge with others.

In Figure 1, you see the opening screen of the finished product, which displays a table with space for three favorite dog breeds, the countries to which they are indigenous, and their average lifespans.

When the page is loaded, because no favorite dog has been selected, the three items of the BREED column contain the default text NO BREED SELECTED.

Below the table is a button bar with four buttons, the first three of which allow the user to add a first, second, and third favorite dog breed.

For the purposes of this demo, we will not seek the input of the user to enter favorite breeds. The three buttons dynamically fill in the three columns for each breed by assigning the properties of three dog breed objects to the table cell text nodes for each breed.

The fourth button resets the screen to its original state.

What This Tutorial Assumes

This tutorial assumes a basic understanding of HTML, a firm grasp of JavaScript basics, and some knowledge of Object Oriented Programming (OOP). Familiarity with Cascading Style Sheets (CSS) is desirable, but not required. The primary focus of this tutorial is JavaScript.

What Does the call() Method Do?

Aye, there's the rub. In order to benefit at all from the powerful call() method, you really have to have a clear understanding of what it does.

Let's start with the de facto resource for JavaScript study on the web—Mozilla Developer Network (MDN)—to get ourselves started:

The call() method calls a function with a given this value and any arguments provided to specify to which value this refers.

This is all very good, but what does it mean? The this keyword in JavaScript has been the cause for nightmares for many budding developers, myself included. It is subject to misinterpretation and especially in earlier JavaScript standards, can behave in very strange ways.

this, in theory, was supposed to refer to the calling function, but because the value of this cannot be set at the time of the function call, JavaScript will default to the value of the global context, which is window. This value will be returned, as shown in the example from the MDN article below:

Fig. 2 Excerpt from Mozilla Developer Network article on this keyword

As you can see in Figure 2, this rfefers to the global object, which is window. As the window does not yet refer to the context we need, which is document (the next level down) in the Document Object Model, there is no value for function f1() to return except undefined.

From the JavaScript code that is part of our project, this is specified, using the call() method, and referring to a specified object, as shown in Code Listing 1 below:

const getDogInfo = {
  info(): function {
    // Array containing properties of each dog object
    return [
      this.breed,
      this.origin,
      this.lifeSpan
    ];
  }
};

const dog1 = getDogInfo.info.call(breed1);
const dog2 = getDogInfo.info.call(breed2);
const dog3 = getDogInfo.info.call(breed3);

Code Listing 1: Demonstration of call() Method Using Project Code

Code Listing 1 above shows an object literal named getDogInfo. Within the object is a function called info() that returns an array of the three properties present in three objects designated breed1, breed2 and breed3.

In the three statements that follow, the values associated with this are determined by specifying the objects to which this refers in the call() method chained to info, which in turn refers back to the info() method exposed by the getDogInfo object.

Is your head spinning yet? Don't worry. Mine did, for a while, too. Let's just take things step by step.

Now Let's Build It

Step 1. Download the Starter Code

Start by downloading the starter code.

You can follow along in the steps to finish the project. As the focus here is JavaScript, and not CSS styling or HTML, the starter code will provide the bare bones structure on which the tutorial project will be built.

When you download the starter code, you will find a zip archive as shown below in Figure 3:

Fig. 3 Downloading the Starter Code

The screenshot above shows the zip archive in the Downloads folder on a Mac. If you are running Windows or another OS, the location of your download may differ.

Simply move the zip archive to the location you wish and unzip it.

Or if you prefer, you can clone the git repository, and begin by working with the starter code in the starter-code folder.

I urge you not to look at the finished-project folder until you have followed through the steps of this tutorial. This way, you can gain the best insights, as you piece the project together. That said, should you find yourself stuck, you can certainly check your code against that in the repository.

Once you unzip the starter code, you will find the following project files as shown below in Figure 4:

Fig. 4 Project Files as Displayed in Visual Studio Code

A Brief Tour of the Starter Code

The starter code includes a css* folder with a CSS file—call-demo.css**—a file that provides the styling for the project.

In the js folder is a starter app.js JavaScript file, which will eventually contain all the logic for the tutorial.

Now that all our starter files are in place, we can dive into the project.

Step 2. Declaring Objects to Reference the Desired HTML Elements

In order to add content to an HTML page dynamically, you must identify and capture the elements that you wish to change or augment in a JavaScript DOM object.

Figure 5 below shows the relevant HTML that is part of your starter code:

Fig. 5 HTML Listing—Elements to be Referenced

Figure 5 shows the elements that need to be referenced in the DOM. To do this, we must create JavaScript objects that point to the elements (or nodes, as they are known in the DOM).

Note that every <td> and <button> element above has an id attribute. Though there are many ways to access these nodes in the DOM using JavaScript, we will approach this using the simplest and most basic method of all—that is the getElementById() method.

Figure 6 below shows our starter app.js file, which will be the brain center of our project.

Fig. 6 Starter code for app.js

To provide access to the DOM nodes, each of the breed columns and the buttons in the button bar must be stored in DOM objects. To do this, replace /* YOUR CODE HERE */ with the code in Code Listing 2 below:

const breedOne = document.getElementById('favBreed1');
const breedOrigin1 = document.getElementById('origin1');
const breedAvgLife1 = document.getElementById('avgLife1');

const breedTwo = document.getElementById('favBreed2');
const breedOrigin2 = document.getElementById('origin2');
const breedAvgLife2 = document.getElementById('avgLife2');

const breedThree = document.getElementById('favBreed3');
const breedOrigin3 = document.getElementById('origin3');
const breedAvgLife3 = document.getElementById('avgLife3');

const button1 = document.getElementById('breed1');
const button2 = document.getElementById('breed2');
const button3 = document.getElementById('breed3');

const button4 = document.getElementById('reset');

Code Listing 2 Creating the DOM Objects

Now that we have created the necessary DOM objects, we can reference and manipulate them directly through JavaScript. To prove that we can gain access to any of the nodes thus captured by the DOM constants, you can use the JavaScript console of your browser to see what one of the DOM objects returns, as shown in Figure 7 below:

Fig. 7 JavaScript Console Showing the Output of button4

Step 3. Create the 3 Dog Objects

The next leg of our journey brings us to the heart of the problem. We have created objects that reference the three tables rows that will contain information about our favorite dogs. But how do we get that information into a form that JavaScript can use to populate the rows?

There are several ways to do this. For the purposes of this tutorial, we declare 3 dog objects using the object literal syntax as shown below in Code Listing 3 below:

const breed1 = {
  breed: 'PUG',
  origin: 'CHINA',
  lifeSpan: '12-15 YEARS'
};

const breed1 = {
  breed: 'LABRADOR',
  origin: 'NEWFOUNDLAND',
  lifeSpan: '10-12 YEARS'
};

const breed3 = {
  breed: 'BEAGLE',
  origin: 'ENGLAND',
  lifeSpan: '12-15 YEARS'
};

Code Listing 3 Declaring the Dog Objects

Code Listing 3 shows breed1, breed2 and breed3 objects with the properties breed, origin and lifeSpan defined. You might ask why I did not declare a Dog class and then instantiate three Dog objects from that.

While using classes is an efficient and elegant way to code the objects, the definition of individual object literals as shown above will demonstrate what the call() method does. In fact, the use of classes would obviate using the call() method, as properties and methods are incapsulated in one object.

In another tutorial, I will show the same project refactored to use class declaration and object instantiation.

You should now append the above code to the end of your app.js starter file.

We now have the raw materials we need. But how do we extract the properties from our breed _objects above and inject them, one-by-one, into the table cells defined above?

For this, we will need a function that gets this information and transforms it into a form we can use to inject the desired content.

Step 4. Coding the getDogInfo Object

Now we implement the getDogInfo object, whose sole property is a method called info. This method extracts the properties from our breed objects defined above, and returns an Array with the desired values from those properties. We already saw this object in Code Listing 1, but it is reproduced here for ease in reading. Code Listing 4 below is the implementation of the getDogInfo object:

const getDogInfo = {
  info: function() {
    // Array containing properties of each dog object
    return [
      this.breed,
      this.origin,
      this.lifeSpan
    ];
  }
};

Code Listing 4 The getDogInfo Object

In Code Listing 4, we declare the getDogInfo object. the info() method returns an Array containing the dog object properties.

You should now append the code above to the end of your app.js starter file.

In order to make use of the returned Array, we will need to store the returned value of getDogInfo in a variable. This is what we will do next.

Step 5. Using the `call()` method to specify the object whose properties we want returned as an Array

Though the getDogInfo object and its info() method provide the logic to extract the object properties we need in order to inject the content on the web page, on its own, getDogInfo does not have the functionality to specify from which object we wish the property values returned.

Enter the call method, which is a prototype method exposed by all function objects. The basic syntax employed in the variable declarations needed at this point will take the following form:

const obj = getDogInfo.info.call(desiredObject);

Let's pick this statement apart to clarify what it is doing. On the left side we declare a constant called obj and store to it the returned values from the getDogInfo object. Using object dot notation, we chain the info() method on getDogInfo, followed by the built-in call() method, which takes a single argument of the name of the object you wish referenced to this.

Code Listing 5 below shows the resulting code needed to return the desired Arrays of values:

const dog1 = getDogInfo.info.call(breed1);
const dog2 = getDogInfo.info.call(breed2);
const dog3 = getDogInfo.info.call(breed3);

Code Listing 5 Using the call() Method

You should now append the code in Code Listing 5 to the end of your app.js starter file.

Now almost everything is in place, but there are still a few critical missing pieces. The first of these is a function that will be called by the RESET button that appears in Figure 1 at the beginning of this article. Its purpose is to return the table of dog breeds back to its original state after the other three buttons to its left have been clicked.

For this, we will build a function called resetTable().

Step 6. Implementing the resetTable() function

Code Listing 6 below shows the implementation of the resetTable() function, which performs a lot of behind-the-scenes work to reset our table to its beginning state:

const resetTable = () => {

  const noSelection = 'NO BREED SELECTED';

  breedOne.textContent = noSelection;
  breedOrigin1.textContent = null;
  breedAvgLife1.textContent = null;

  breedTwo.textContent = noSelection;
  breedOrigin2.textContent = null;
  breedAvgLife2.textContent = null;

  breedThree.textContent = noSelection;
  breedOrigin3.textContent = null;
  breedAvgLife3.textContent = null;

};

Code Listing 6 The resetTable() Function

resetTable() is implemented as an arrow function, but it could just as easily have used the function myFunction() {} syntax that existed prior to ECMAScript 6. Either will work fine. I happen to prefer the elegant syntax of the arrow function.

A lot is going on here, but let's briefly pick this apart. You'll recall that in Figure 1, the leftmost column of the table is filled on each row with the content NO BREED SELECTED.

When the ADD FIRST FAVORITE, ADD SECOND FAVORITE and ADD THIRD FAVORITE buttons are clicked these entries are replaced with the name of the dog breed. Rather than individually specifying this value for each table row, it makes sense to declare a constant with the value, hence the constant noSelection that appears in the above listing.

As a reminder of what all the DOM objects in the above listing reference, you can refer both to Code Listing 2, and also the matching code in your index.html starter code.

In Code Listing 6, the textContent property of each of the defined DOM objects for each table row is set to its original value. In the case of the BREED column, the column is set to the value stored in the noSelection constant. The remaining two columns are simply set to null, removing the content injected when the first three buttons were clicked.

You should now append the code in Code Listing 6 to the end of your app.js starter file.

There is still one other critical function needed to set the content of each table row when the ADD FIRST FAVORITE through ADD THIRD FAVORITE buttons are clicked. This will be accomplished by the setRowContent() function that will act as a callback function to the buttons' associated event listeners, as will become evident in Step 8. But now, on to Step 7.

Step 7. Implement the setRowContent() function

Code Listing 7 below shows the implementation of the setRowContent() function:

const setRowContent = (
  column1,
  column2,
  column3,
  breed
) => {
  column1.textContent = breed[0];
  column2.textContent = breed[1];
  column3.textContent = breed[2];
};

Code Listing 7 The setRowContent() function

As you can see, the setRowContent() function takes four arguments, one for each of the three columns in a table row, and a fourth to specify the object from which we will extract our needed properties. We pass these arguments to the function at runtime to populate each row of the table.

We are almost done now, but there is still one critical component missing. If you click on any of the buttons, absolutely nothing will happen. We need to wire the buttons to the functionality we have thus far defined. This is done, of course, by virtue of event listeners. We will define an event listener for the click of each button on the screen.

Step 8. Implementing the event listeners

And now we arrive at the last step to enable the dynamic content on our web page.

There are four buttons on the page, and thus we need four event listeners. The type of event for which we are listening is a click event when the user clicks on any of the four buttons.

Code Listing 8 below shows the implementation:

//  Button box event listeners populate
//  table with dog breed information.

button1.addEventListener('click', () => {
  setRowContent(
    breedOne,
    breedOrigin1,
    breedAvgLife1,
    dog1
  );
});

button1.addEventListener('click', () => {
  setRowContent(
    breedTwo,
    breedOrigin2,
    breedAvgLife2,
    dog2
  );
});

button1.addEventListener('click', () => {
  setRowContent(
    breedThree,
    breedOrigin3,
    breedAvgLife3,
    dog3
  );
});

button4.addEventListener('click', resetTable);

Code Listing 8 The event listeners

As shown in Code Listing 8, an event listener is declared for each of the four buttons shown in Figure 1 at the beginning of this tutorial. In the first three event listeners, we use an anonymous function, which in turn calls the setRowContent(https://www.javascripttutorial.net/javascript-anonymous-functions/) function implemented in Step 7.

Because these are click events, when the user clicks on the button, the dynamic content attached to that button will be injected into the table rows and cells specified in the function call.

Finally, in the event listener for button4, we use a callback function—namely the resetTable() function defined earlier in Step 6.

Our project is now complete. If you want to see the project in action, you can find it on Codepen.

A Final Word

The end product is, of course, a bit artless, in that the user is only able to add the hard-coded properties of the three dogs included in the JavaScript code. In a real-world example, you would probably want a modal dialogue box to pop up asking a user to input the data for the favorite dog breed of choice.

You would almost certainly not want a pre-determined number of rows in the table, but only add the rows to the table dynamically as a user enters choices. I plan to build this more elaborate application and post a tutorial for it in the near future.

The purpose of this tutorial, however, is to provide a working, and at least somewhat meaningful example of how the call() function, exposed by the built-in JavaScript function object, works. I am open to any suggestions for future articles or projects.

I hope you have found this tutorial enjoyable.

Works Cited

"this - JavaScript | MDN", _Mozilla Developer Network, Mozilla Foundation,
25 Sept. 2023, https://developer.mozilla.org/en-US/docs/Web/
JavaScript/Reference/Operators/this.

"Property Accessors - JavaScript | MDN." Mozilla Developer Network,
Mozilla Foundation, 6 Sept. 2023, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#dot_notation.

"JavaScript Anonymous Functions." JavaScript Tutorial,
https://www.javascripttutorial.net/javascript-anonymous-functions/.
Accessed 22 Oct. 2023.

Regular Expressions—a Rite of Passage: Completing the Application

Robert Hieger — Tue, 28 Feb 2023 01:04:19 +0000

This article was first published on JavaScript in Plain English.

Part 3: Building from Infrastructure to Completed Application

Photo by ThisisEngineering RAEng on Unsplash

WELCOME BACK!

Completing the Application

Step 7. Coding the Callback Functions

The populateResultBox() Function

The depopulateResultBox() Function

Step 8. Coding the Event Listeners

Add an Event Listener to the Validate Zip Codes Button

Add an Event Listener to the Reset Button

Conclusion

Next Steps

References

WELCOME BACK!

Our moment has arrived. We are now ready to finish our application started in Regular Expressions—a Rite of Passage: From Theory to Practice.

Completing the Application

We left off at Step 6 in Part 2 of this tutorial, in which we built out the infrastructure of our application, providing all necessary data structures and helper functions.

Two steps remain to complete the application:

1. We need to code the callback functions that will be used by the two
event listeners mentioned in Part 2.

2. We need to write the event listeners that will call the callback functions
in order to carry out their work.

Step 7. Coding the Callback Functions

Let’s think for a moment about what these callback functions need to accomplish. We know that they are attached as arguments to two event listeners, one listening for a click event on the Validate Zip Codes button and the other listening for a click event on the Reset button.

We will be picking up exactly where you left off in your code at the end of
Part 2.

For the Validate Zip Codes button, we need a callback function that will swap contents with the default message of NO MATCH and populate its parent instead with a scrolling window of valid zip code matches.

The `populateResultBox()` Function

Search in the starter code for the line that reads:

// TO BE DONE: Code populateResultBox() callback function.

and replace it with the following lines of code:

const populateResultBox = () => {

  resultBox.classList.remove(‘default-result’);
  resultBox.removeChild(‘placeHolder’);
  resultBox.classList.add(‘custom-scrollbar’);

  createParagraphText();

  // Create paragraphs and set textContent only
  // if not already created. Prevents doubling
  // of result data if old paragraphs have not
  // yet been garbage collected.

  if (paragraphs.length === 0) {
    createParagraphs();
  }
  // Append all result paragraphs to resultBox.

  appendParagraphs(resultBox, paragraphs);

};

Code Listing 1. The populateResultBox() Callback Function

A lot is happening in this function, though much of it has been broken down in our discussion of the helper functions. Nonetheless, there are still a few remaining new concepts here.

The first three lines of code are manipulation of the DOM as we have not seen before in this tutorial. To fully understand these three lines, we will need to look at some code snippets from our HTML and CSS.

Code Listing 2 below shows the HTML element to which resultBox refers:

<div id="results"
class="results-data-dimensions default-result">
<p class="default-message" id="message">no match</p>

</div>

Code Listing 2. HTML Elements Captured by resultBox

You might recall from Part 2 a code listing that started with the element
<div id= “getResults”>, which contains the entire widget with the two buttons and the <p> element with the NO MATCH message shown in
Code Listing 2 above.

We need to take a brief dip into the CSS code to understand fully what is being changed by populateResultBox().

Take a look at Code Listing 3 below:

.default-result {
  background-color: #808080;
}

Code Listing 3. CSS Class Controlling resultBox Background Color

As you can see, the .default-result class specifies a gray background. As this background is part of a placeholder for the results about to populate resultBox, we want to clear it.

Now let’s look at the first line of code in the populateResultBox() callback function:

resultBox.classList.remove(‘default-result’);

As we know, the resultBox object captures <div id=“results”> shown in Code Listing 2.

In the Document Object Model (DOM), HTML elements have the classList property, which keeps track of all CSS classes associated with them.

The remove() method chained to the classList property does exactly what it says—it removes the class passed to it from the classList. This does not mean the class is deleted from the linked CSS file. What it does mean is that the web page displayed in your browser will no longer show a gray background in the scrolling window of results.

Now let’s review our second line of code:

resultBox.removeChild(placeHolder);

This line of code is concerned with nodes in the DOM tree. As you
might recall from earlier, placeHolder is the DOM node that captures
<p class=“default-message” id=“message”>no match</p>.

This paragraph is the NO MATCH message shown on the opening screen of our application. Obviously, we need to remove this from our display.

The removeChild() method removes a child node from a parent node. placeHolder is a child node of resultBox. As in the case of the remove() method above, removeChild() leaves the paragraph in the HTML untouched. It is merely removed from our live display.

Next let’s review our third line of code:

resultBox.classList.add(‘custom-scrollbar’);

Here, we are doing something quite different. Here, we add a CSS class
to reasultBox. Code Listing 4 below shows the code for CSS class .custom-scrollbar:

.custom-scrollbar {
  --scrollbar-foreground: #a239ca;
  --scrollbar-background: rgba(162, 57, 202, 0.25);
  /* Foreground and Background Colors */
  scrollbar-color: var(--scrollbar-foreground)
  var(--scrollbar-background);
}

Code Listing 4. CSS Class Controlling Scrollbar Styling for resultBox

Without diving deeply into the above code, all we need to know is that this class sets foreground and background styling for the scrollbar in resultBox once it has been populated. For those who are interested in delving deeper into the styling, the above style was informed by the work of CSS Tricks (Coyier, “Using Custom Properties for Styling Scrollbars in CSS”).

The add() method chained to the classList property, in contrast to the remove() method we saw moments ago, adds a CSS class to resultBox.

The remaining code in the populateResultBox() callback function has already been covered in Part 2, Step 6 of this tutorial.

The `depopulateResultBox()` Function

Now we can turn our attention to coding the depopulateResultBox() callback function. As you might guess, the purpose of this function is to remove the paragraphs that populated resultBox and restore the default message and styling associated therewith.

Search in the starter code for the line that reads:

// TO BE DONE: Code depopulateResultBox() callback function.

and replace it with the following lines of code:

const depopulateResultBox = () => {
  while (resultBox.firstChild) {
   resultBox.removeChild(resultBox.firstChild); 
  }
  resultBox.classList.remove(‘custom-scrollbar’);
  resultBox.classList.add(‘default-result’);
  resultBox.appendChild(placeholder);
};

Code Listing 5. The depopulateResultBox() Function

We've met every method seen in this function when we coded the depopulateResultBox() helper function above. So here is a quick breakdown of what is happening in this code:

     1. We start with a while loop that takes a single argument—
         resultBox.firstChild. We already know that resultBox is a
         DOM node. As such it exposes properties and methods. The          firstChild property captures the first child of resultBox,
         which would be the first paragraph in resultBox.

     2. The argument in this while loop is a Boolean that evaluates to
          true if there is a firstChild paragraph node in resultBox. Each
          time through the loop,

resultBox.removeChild(resultBox.firstChild);

         is executed, it removes one paragraph. On each iteration of the
         loop the next paragraph in line becomes the firstChild. Once
         there is no firstChild left, the loop terminates because no
         paragraphs remain.

     3. Once all paragraphs have been removed the three remaining
          lines of code outside of the while loop remove the
         .custom-scrollbar class, thus restoring the gray background,
         and finally uses the appendChild() method to restore the
         NO MATCH message.

We have now completed our callback functions and are ready to proceed
to the last step—coding the event listeners for the Validate Zip Codes
and Reset buttons.

Step 8. Coding the Event Listeners

Now we approach the ultimate step in completing our application—that of coding the event listeners
for our buttons.

To start, I would like to recall two declared node objects that we created at the beginning of Part 2, Regular Expressions—a Rite of Passage: From Theory to Practice:

const resultButton = document.getElementById(‘validate’);
const resetButton = document.getElementById(‘reset’);

Code Listing 6. Nodes in Need of Event Listeners

These two lines of code are our starting point as we will need them to build our event listeners.

resultButton is the DOM node that captures the
<button class=“controlButton” id=“validate”> element in our index.html file.

resetButton is the DOM node that captures the
<button class=“controlButton” id=“reset”> element.

With this new information we can begin.

Add an Event Listener to the Validate Zip Codes Button

Search in the starter code for the line that reads:

// TO BE DONE: Code resultButton event listener.

and replace it with the following line of code:

resultButton.addEventListener(‘click’, populateResultBox);

Using the resultButton DOM node, we chain the addEventListener() method to it. This method takes two arguments, as you see.

The first specifies what type of event to be listened for (there are a number of different kinds). Ours is a click event, which means that JavaScript will listen for any mouse clicks on resultButton.

The second is the callback function to be executed when the click event is detected. The callback function can be an anonymous function included as the second argument. In our case, the callback function is populateResultBox().

With this event listener in place, we should now be able to populate the resultBox with valid zip code matches when we click the Validate Zip Codes button. Let’s test this.

If you have not already done so, open the index.html file in your favorite browser. If you have the file open already, make sure to refresh your browser.

Click on the Validate Zip Codes button.

Your screen should look much like that shown below in Figure 1:

Fig. 1. resultBox with Scrollbar and Populated with Valid Zip Codes

Add an Event Listener to the Reset Button

Now let’s code the event listener for the Reset button.

Search in the starter code for the line that reads:

// TO BE DONE: CODE resetButton event listener.

and replace it with the following line of code:

resetButton.addEventListener(‘click’, depopulateResultBox);

This event listener also listens for a click event, this time on our Reset button, and calls the depopulateResultBox() callback function to reset our page to its beginning state.

To test this out, refresh your browser. Now click the Validate Zip Codes button. Once you see that the resultBox has been populated with the zip code matches, click on the Reset button.

If all goes according to plan, your screen should reset to its initial state with the message NO MATCH displayed where the scrolling list of zip code matches were.

Conclusion

CONGRATULATIONS! You have completed the demo zip code validation Single Page Application (SPA).

If your code is not working and you are not sure why, you can download my completed code and compare yours with it to find any errors.

You can also view the live application here on codepen.io.

Next Steps

Now that you have a functional demo web app that returns valid zip codes from a test string, where might you go from here?

Play around with the finished code you have. Here are a couple suggestions:

Experiment with further de-coupling of helper functions from the data upon which they operate, as in my example of the createParagraphs() function.
Think about how you might make this a truly interactive application in which a user would simply input a test string and click on the Validate Zip Codes button to get the result(s).

Finally, feel free to fork [my repository(https://github.com/RHieger/regex-zip-code-tutorial) and create your own version.

Happy coding!

References

Coyier, Chris. “The Current State of Styling Scrollbars in CSS (2022
Update): CSS-Tricks.” CSS Tricks, 21 Feb. 2022,
https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/#aa-using-custom-properties-for-styling-scrollbars-in-css.

Regular Expressions—a Rite of Passage: From Theory to Practice

Robert Hieger — Sun, 05 Feb 2023 00:34:39 +0000

This article was first published on JavaScript in Plain English.

Part 2: Applying the theory to build a demo single-page app that validates zip codes.

Photo by Kelly Sikkema on Unsplash

WELCOME BACK!

Getting Started

Let's Build It!

Step 1. Unzip the Starter Code Archive

Step 2. Putting the Project Pieces Together

Step 3. Capture Necessary DOM Nodes

Verify that Nodes Are Visible to the DOM

Step 4. Declare the Test String and Regular Expression

Step 5. Use Regex to Return the Valid Zip Code Matches

Step 6. Creating the Helper Functions

The createParagraphText() Helper Function

The createParagraphs() Helper Function

The appendParagraphs() Helper Function

What's Next?

WELCOME BACK!

For those of you who have read the first part in this tutorial series, thanks for hanging in through a theoretical article. It will pay off as we proceed from theory to practice.

In Part 2 we apply what we learned in Part 1, Regular Expressions—a Rite of Passage for Web Developers, which gave a quick introduction to some key concepts of regular expressions.

We will transform theory into practice by building a demo Single Page Application (SPA) for the web.

Getting Started

For those who have not already seen what our SPA will look like, Figure 1 below shows the landing page:

Fig. 1 Application Landing Page

The opening screen above presents the following components:

1. The main heading, which states what the application does—namely,
matching valid zip codes.

2. Immediately below this, a callout box explains the aims of the
application in more detail.

3. Next is a scrolling list of the multiline test string that will be passed to
the regular expression shown below it.

     4. Beneath this we have a widget that, on the left side, has a group of 2
          vertically-stacked buttons. The top one, Validate Zip Codes, triggers
          an event that matches and extracts valid zip codes from the test
          string. When clicked, the window to its right is populated with valid zip
          codes returned by the regular expression.

5. The second button—Reset—resets the text box to its default state as
seen in Figure 1.

How are we going to do all of this? Let’s think about this for a second.

We provide some pre-fabricated test data to our application (though the principle would remain the same if a user were to upload a file with test data). In either case, the regex engine is presented with the test data and asked to return matches only for valid zip codes.

This is more complicated than it sounds. The regular expression specified to the regex engine must be able to do all of the following:

Make certain that user input consists only of numbers and optionally a hyphen for +4 zip codes. (Obviously in the case of this demo application, there is no user input. But further development of this project could make the application fully interactive.)
No alphabetical, punctuation, or other special symbols—save the hyphen needed in a +4 zip code—may be part of the returned match.
Make certain that no other characters precede or follow either variety of zip codes (5-digit or +4).
In every case, the zip code must start with a sequence of 5 digits.
Optionally, the regex engine must be able to match a 5-character sequence followed by a hyphen and ending with a sequence of 4 numbers.
Finally, no characters must occur after the last 4 digits.

All this seems a tall order. But as we saw in the previous tutorial, regular expressions are more than capable of fulfilling all these requirements.

The moment has finally arrived!

Let’s Build It!

After all this theory, let’s put it into practice and build this application.

To start, please download the starter code.

Step 1. Unzip the Starter Code Archive

The archive is named regex-starter-code.zip You can rename it anything more to your liking, such as regex-demo-web-app.zip. Be sure to keep the .zip extension in the name as some zip archive programs might not recognize the file if the extension is missing.

For purposes of this tutorial, I use Microsoft Visual Studio Code, but you can also use your favorite text editor.

Once you have unzipped the renamed regex-demo-web-app.zip (or whatever name you choose), you will have a file structure similar to what is shown below in Figure 2.

Fig. 2 Project File Structure

Step 2. Putting the Project Pieces Together

Our project is comprised of HTML content, CSS styling, and a single JavaScript file—app.js.

Though I have provided styling for you so that we can focus primarily on JavaScript, we will start at the bare-bones structure provided by the index.html file.

Let’s start by opening the application’s index.html file in your favorite
web browser. For purposes of this tutorial, I use Google Chrome for
its superb developer tools. Figure 3 below shows our barebones
application framework.

Fig. 3. Bare Bones HTML

Figure 3 reveals the barebones structure of the document in which our application resides. Not all that comprehensible. Let’s fix that.

Code Listing 1 below shows a fragment of our index.html file.

<!-- INSERT link to zipcodes.css stylesheet. -->

<title>Regex Demo-Zip Code</title>

<!-- INSERT app.js JavaScript -->

</head>

Code Listing 1. index.html Showing Relevant <head> Content

We will replace the comment lines now with the code that will knit together the three components of our application.

As you know, in order for your browser to render the application landing page as we wish, we have to link our cascading stylesheet to the HTML file.

We also must link our JavaScript code to the HTML file. Follow these steps:

     1. Open index.html if you have not already done so.

     2. Search for the first comment in Listing 1 above and replace it with the
          following code:

<link rel=“stylesheet” href=“./css/zipcodes.css”>

     3. Now we integrate the last component of our project. Search for the
          second comment in Code Listing 1 above and replace it with the
          following code:

<script src=“./js/app.js” defer></script>

The keyword defer in the <script> tag assures that the browser loads the DOM for the index.html document before script execution begins. This prevents JavaScript from throwing errors because a DOM object references a node that has not yet been defined.

Remember to save both these changes in your index.html file.

4. Refresh your browser.

Great! If all goes according to plan, your web page should appear exactly as in Figure 1.

However, if you click on either of the buttons, absolutely nothing happens at this point. Obviously, this is because we have yet to write any of the code that provides functionality to these buttons.

Step 3. Capture Necessary DOM Nodes

Start by opening the app.js file included in the starter code archive.

At this point, the entire file consists of nothing more than comments. We start by capturing the necessary DOM nodes. We will use the Document Object Model (DOM) to pinpoint the parts of our screen that will need to change when the user interacts with our application.

Which of the HTML elements need to be captured in DOM Objects? First, we can reason that because nothing happens when we click on either button in our application, we need to gain access to those nodes. Thus, we need 2 DOM objects to capture the Validate Zip Codes and Reset buttons.
Next we need two things to happen. We need the default message to the right of the buttons that now reads NO MATCH to disappear and be replaced with a scrolling list of matches returned by the regex engine.

In order to do this, we need to be able to capture the default message so that it may be removed. We also need access to its parent element, which will contain the scrolling list once the default message is removed. Thus we need 2 DOM objects to capture these elements.

In total, we must declare 4 DOM objects to capture the nodes that reference the HTML elements to which we need access.

Figure 4 below shows the relevant lines of HTML containing the elements we will capture in DOM objects:

Fig. 4 Elements to Be Captured in the DOM

The critical pieces of markup in Figure 4 are the buttons, the paragraph reading “no match,” and its parent element—the <div> with an id attribute of “results.”

Each element has an id property set on it so that it may be captured using the document.getElementById() method. There are other means that could be employed, such as the querySelector() and querySelectorAll() methods.

For this tutorial, I have chosen to use getElementById() for its directness and simplicity.

To create the necessary DOM objects, search in your starter code for the line that reads // TO BE DONE: Declare necessary DOM nodes and replace it with the following 4 lines of code:

const resultButton = document.getElementById(‘validate’);
const resetButton = document.getElementById(‘reset’);
const resultBox = document.getElementById(‘results’);
const placeHolder = document.getElementById(‘message’);

Code Listing 2: Code to Capture Required DOM Nodes

Still, nothing will happen if you refresh your browser and click on the Validate Zip Codes button. We have not yet provided this functionality. What we will do now is to test that the elements we captured are really captured, using the Google Chrome Developer Tools.

Verify that the Nodes Are Visible to the DOM

To do this, refresh your browser and open the JavaScript Console by pressing Ctrl+Shift+J for Windows/Linux/Unix and Command+Option+J for Mac. You should see something like Figure 5 below:

Fig. 5 Google Chrome Showing JavaScript Console on Right

To verify our node objects, click an insertion point in the JavaScript Console and type the following commands followed by the Enter/Return key:

resultButton <Enter>
resetButton <Enter>
resultBox <Enter>
placeHolder <Enter>

Be sure to expand the output for resultBox by clicking on the right-pointing arrow next to the collapsed information.

You should see a result like that shown in Figure 6 below:

Fig. 6 Browser with JavaScript Console Confirming Access to the Desired Nodes

As of now, we have our entry point into the application because we can access the portions of the page we need to manipulate. Next, we need to declare our test string and our regular expression.

Step 4. Declare the Test String and Regular Expression

We need to declare two constants—one that will store the test string we pass to our regular expression and one that stores the regular expression object to which the test string will be passed.

Search in your starter code for the line that reads // TBD: Declare testString and replace it with the following code:

const testString =
`10003
asdf10003
10003asdf
jklm10003^$@%
10003-8924
one zero zero zero three
9101-94015
94015-9101
20012
08735
KbdsD$%^&*
sSd070031jkl;m
70122
\sKu2034
98108
75381
asdfjkl;
60661
!9004!@#$5^&*
97218
#,.$$&&%@
10022-3337
eNuhfF!.` ;

Code Listing 3. The Test String

Search in your starter code for the line that reads

// TO BE DONE: Declare regular expression.

and replace it with the following code:

const regex = /^[0-9]{5}(-[0-9]{4})?$/gm;

The stage is set for our demo application. We have captured the DOM nodes that will be necessary to inject dynamic data to the page when the user clicks on the Validate Zip Codes button. We have also provided our testString constant and our regex constant.

Next, we have to move on to building the functionality that will provide the matches of valid zip codes that we want injected on our page.

Step 5. Use Regex to Return the Valid Zip Code Matches

Before we actually add the necessary code to app.js, let’s take a step back to get a clear understanding of how the matching process will work.

We already have our regex object that was declared above using the object literal notation. This object exposes methods that perform different kinds of searches.

There are several methods exposed by the regex object. You can find them on the Mozilla Developer Network regular expressions page (Using Regular Expressions in JavaScript").

What will be relevant to us, however, is the match() method. The syntax for this method is:

<string object>.match(<regular expression object>);

Our string object is the constant testString. The match() method, in turn, takes one argument, and that is the regular expression object.

The return value for match() is an array comprised of every match returned by the regular expression.

The return value must be returned to something in order for it to be accessible. In the syntax shown above, the object returned by the match() method is not addressable, though memory has been reserved for it.

Once the method is executed JavaScript will garbage collect the values stored therein as soon as it determines that they have not been used or are no longer in use. If you are interested in learning more about this, you might want to consult this brief, but informative article on garbage collection (“Garbage Collection”).
The actual syntax we will employ is as shown below:

const myConstant = <string.object>
     .match(<regular expression object>);

Search in your starter code for the line that reads

// TO BE DONE: Save regex match to matches variable.

and replace it with:

const match = testString.match(regex);

This one line of code accomplishes a lot. In one fell swoop, testString is passed to regex (our regular expression object), the pattern match is performed, valid zip codes are extracted, and the results are stored in an array with the identifier of matches. Very powerful stuff.

Now let’s test this out by taking the steps that follow:

1. Refresh your browser. If you have not already opened the JavaScript
Console, do so now.

     2. Click an insertion point in the JavaScript Console and type matches,
         then hit the Enter/Return Key. Once you expand the content
         returned in the console, your display should look like that shown in
         Figure 7 below:

Fig. 7 Browser with JavaScript Console confirming valid zip code matches

As Figure 7 confirms there are 11 valid zip code matches returned by the regular expression object.

Obviously, we cannot ask an end-user to enter the JavaScript Console to get the results of this validation process. For this to be a truly dynamic application, we have to build some infrastructure preparatory to creating two event listeners—one that listens for a click on the Validate Zip Codes button, the other for a click on the Reset button.

Step 6. Creating the Helper Functions

Of what is this infrastructure comprised? If we start with the most obvious assumption, we need something to happen when an end-user clicks either of the buttons.

Our application is event-driven. Thus we need to code two event listeners for the buttons. As we will see, these event listeners are powered by several helper functions.

Before we code the first helper, we need to declare an empty array, which its code will populate.

Search in your starter code for the line that reads

// TO BE DONE: Declare empty array for text nodes.

and replace it with:

const paragraphText = [];

The above empty array will be populated by our first helper function:

The createParagraphText() Helper Function

Search in your starter code for the line that reads

// TO BE DONE: Code createParagraphText() helper function.

and replace it with:

const createParagraphText = () => {
  matches.forEach( match => {
    let matchNumber = matches.IndexOf(match) + 1;
    paragraphText.push(
      ` Match #${matchNumber}: ${match}`
    );
  };
};

Code Listing 4. The createParagraphText() Helper Function

What is happening in this helper function? Let’s break it down line by line.

The code in createParagraphText() is comprised of a forEach() loop. forEach() is exposed by the Array object. In the code above, our array is the matches constant.

We call the forEach() method on matches. match, which is found in the argument portion of the method, is a reference to each element found in the matches array, over which it loops.

There is also an anonymous callback function as the second parameter, which extracts data from the matches[] array created by the match() method above. In the first line of the callback function, we declare the variable matchNumber, which stores the value of the index + 1 within the matches[] array.

We call the indexOf() method on match to get the array index of match in each iteration of the loop. 1 is added to the index value because, as we know, arrays are 0-indexed, and for humans, it makes more sense to refer to matches 1 through 11, rather than 0 through 10.

In the final line of our function, we populate the paragraphText[] array, using the push() method exposed by the Array object.

The data that we specify to be pushed to the array for each item makes use of both template literal notation and string interpolation to create an array element that looks like this:

Match #1: 10003

You might be wondering why I didn’t create the full paragraph in one fell swoop. Building the full paragraph comes as a result of our next helper function.

Before we build that, we need to declare another empty array to contain the completed paragraphs.

Search in your starter code for the line that reads

// TO BE DONE: Declare paragraphs array to hold complete paragraphs.

and replace it with:

const paragraphs = [];

The paragraphs[] array will be populated by complete paragraphs with child text nodes extracted from the paragraphText[] array.

The `createParagraphs()` Helper Function

Search in your starter code for the line that reads

// TO BE DONE: Code createParagrahs() helper function.

and replace it with:

const createParagraphs = () => {
  paragraphText.forEach( text => {
    const paragraph = document.createElement(‘p’);
    paragraph.textContent = text;
    paragraphs.push(paragraph);
  };
};

Code Listing 5. the CreateParagraphs() Helper Function

So what exactly is this code doing? The entire logic of the createParagraphs() function is found in a single call to the forEach() method.

The first line in the loop is:

const paragraph = document.createElement(‘p’);

Let’s think about what’s happening here for a moment.

Each time through the loop, JavaScript finds a text node that is a member of the paragraphText[] array. This line of code declares a <p> element to which the text node will be appended as a child.

The next line in the loop is:

paragraph.textContent = text;

This line appends the text node at the current index to the <p> element created in the previous line.

The final line of code in the loop is:

paragraphs.push(paragraph);

This line of code pushes a complete paragraph to the paragraphs[] array. This sequence is repeated until the last element within the paragraphText[] array has been read into the loop.

An array of completed paragraphs now wait to be appended to the resultBox object. One final helper function will accomplish this task.

The `appendParagraphs()` Helper Function

Let’s review Figure 1 for a moment. The two buttons shown have to their right a box with a message that reads NO MATCH.

We want to swap the contents of this box now, removing the NO MATCH placeholder message with a scrolling window that will contain as its children all of the paragraphs in the paragraphs[] array.

Search in your starter code for the line that reads

// TO BE DONE: Code createParagrahs() helper function.

and replace it with:

const appendParagraphs = (parent, children) => {
  children.forEach(  (child) => {
    parent.appendChild(child);
  });
};

Code Listing 6. The appendParagraphs() Helper Function

In only 5 lines of code, appendParagraphs() accomplishes quite a lot. The function takes two arguments, parent and children.

When calling this function, parent refers to resultBox, the node object that captures <div id=“results”> in our index.html file. children refers to the paragraphs[] array.

Our final helper function also uses the forEach() method. Here all elements of the paragraphs[] array are appended to the resultBox node, repeating this process until all 11 matches have been appended to resultBox.

IMPORTANT: If you try to log these nodes to the JavaScript Console in your browser, you will receive an error message. This is because each of the helper functions we have created up to this point is called by the callback functions of the event listeners we have yet to code.

We have now completed our infrastructure comprised of arrays and our 3 helper functions.

AN IMPORTANT ASIDE: You will note that in the appendParagraphs() function, we have a fully abstracted function that is de-coupled from the data sets in our application.

Though this could have been done for all the helper functions, in the interest of brevity, I have given this one example instead. This technique of de-coupling functions from the data on which they operate makes the code more reusable and should be practice as a rule in public application releases.

What’s Next?

When you have completed all the steps above successfully, you can continue on with the third and concluding part of our tutorial—Regular Expressions—a Rite of Passage: Completing the Application.

References

“Regular Expressions - JavaScript: MDN, Using Regular Expressions in
in JavaScript” JavaScript | MDN, Mozilla Developer Network,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#using_regular_expressions_in_javascript.

“Garbage Collection.” The Modern JavaScript Tutorial, JavaScript.info,
23 May 2022, https://javascript.info/garbage-collection.

Regular Expressions—A Rite of Passage for Web Developers

Robert Hieger — Thu, 12 Jan 2023 06:13:36 +0000

This article was originally published on JavaScript in Plain English.

Part 1: Regular Expressions Crash Course—Explaining the Theory Behind Regular Expressions

Photo by ThisIsEngineering (pexels.com)

Intended Audience: Intermediate Developers—a strong grasp of HTML, some understanding of CSS, and a strong intermediate grasp of the JavaScript language are required.

Introduction

What Are We Going to Do in This Tutorial?

Grappling with Theory

Just Enough Regex

What Are Regular Expressions?

A Thumbnail Historical Sketch of Regex

Table 1. Some Well-Known Flavors of Regex

Nuts & Bolts of Regular Expressions in JavaScript

The Anatomy of a Regular Expression

Delimiters

Anchors

Character Sets

Ranges

Quantifiers

Capturing Groups

Flags

The Regex Tear-Down

Taking it Apart

The First Half of the Pattern

The Second Half of the Pattern

Sometimes a Hyphen is Just a Hyphen

Putting It Back Together

The Test String

What Next?

References

Introduction

The entire software edngineering profession, regardless of discipline, eventually faces a challenge along the learning pathway. When a
budding or even experienced developer encounters this challenge, it presents as somewhat of a monolithic barrier. It is almost as if that
moment is the discovery of a new and threatening four-letter word
(though it’s really five letters)—regex.

When I first encountered regex (or regular expressions), my experience was a disheartening struggle to learn what seemed a mysterious language, which despite its obvious power, did not make obvious its utility.

Yet its utility is quite obvious any time we use a web browser to search out an item, whether we search on Google or within the content of a website. Its utility is also quite evident when we fill in online forms and click the Submit button.

Before the data in your form is submitted, it is validated to make certain that it is correctly formed and/or sanitized (stripped of erroneous content).

What Are We Going to Do in This Tutorial?

We will be building a simple demo Single Page Application (SPA), but with fairly complex underpinnings.

This tutorial is the first of a three-part series in which we will proceed from theory to practice to the realization of a complete demo SPA.

Grappling with Theory

If you are completely new to regular expressions, then this first part of the tutorial will be for you. If you are fairly experienced with them, then you can skip ahead to the second article in this series—Regular Expressions—a Rite of Passage: From Theory to Practice.

However, because this part of the tutorial uses the data in our web application to give a quick crash course in regular expressions, you might still find it useful.

By the end of the third tutorial in this series, we will build a small web application the purpose of which will be to extract from a string of text valid zip codes and display them in a result box that populates upon clicking the Validate Zip Codes button.

Figure 1 below shows the opening screen of our finished application:

Fig. 1 Application Landing Page

In short, the test data frame scrolls to reveal a multiline string of characters within which are found valid zip codes. When the user clicks the Validate Zip Codes button, using the regular expression shown just below the test data, the application will replace the NO MATCH message displayed in the frame to its right with a scrolling list of validated zip code matches.

The Reset button restores the screen to its original state.

To realize this project, we will need to take a dive into the theory of regular expressions.

But this app seems simple enough. Why devote a whole article to theoretical underpinnings? Shouldn’t we learn by doing?

Well, yes…but not really. We will learn by doing, but doing without some minimal basis of understanding would be a painful pursuit. In writing this application, we will slam head-on into the barrier of Regex, which at least initially, might feel like bumping into a Tyrannosaurus Regex.

All kidding aside, without this rite of passage, any attempts to come up with a similar application to the one we are going to create would require writing code that likely would not work as well as that made possible by the inclusion of regular expressions.

A thorough exploration of Regex and its implementation in JavaScript is beyond the scope of this article. Such exploration could easily require a course of its own.

However, to facilitate some understanding of how it will come into play for our demo web application, I will give a quick crash course in just the concepts of regular expressions necessary for the realization of this project.

Just Enough Regex

To begin, we need to define our terms. Thus far, we have only named our concept—regular expressions. But what are they?

What Are Regular Expressions?

As defined by the Mozilla Developer Network—

“Regular expressions are patterns used to match character combinations in strings” (“Regular expressions—JavaScript”).

What does this mean? This is a very abstract statement. Let’s take yet a further step back to set the theoretical context for regular expressions.

A Thumbnail Historical Sketch of Regular Expressions

Mathematician Stephen Cole Kleene

The roots of regular expressions are in a 1951 paper entitled Representation of Events in Nerve Nets and Finite Automata, by mathematician Stephen Cole Kleene. The theories defined in this paper are far beyond the scope of this tutorial, but should you be interested in exploring what he has to say, you can download the paper here (Kleene, “Representation of Events”).

Practical application of Kleene’s theories came into their own around 1968 when they were used to facilitate pattern matching in text editors, and by compilers in their lexical analysis of source code. For more on this, you might want to consult this article (Wikipedia, “Regular Expressions”).

Suffice it to say that in the years to come, many different implementations of regular expressions were developed, all of them owing their heritage to the advent of these concepts in the UNIX operating system. Table 1 below is a sampling of some of the different flavors of regular expressions found on Wikipedia (“Comparison of Regular Expression Engines”):

Regex Engine (Library)	Where It is Used
PCRE (Perl Compatible Regular Expressions)	This implementation of regular expressions derives from the Perl language often used for server-side scripts in web applications. Perl is compatible to the POSIX (Portable Operating System Interface) standard established by the IEEE. UNIX was used as the model for this standard. The PCRE implementation found its way into PHP, the Apache HTTP Server, and C and C++ languages, to name but a few.
FREJ (Fuzzy Regular Expressions for Java)	This implementation is a library specific to the Java programming language.
EXMAScript (JavaScript Regular Expressions)	This is the reference library standard used by most JavaScript engines across many web browsers.
XRegExp (Extended JavaScript Regular Expressions)	This library, which may be used with JavaScript, is a superset of the standard implementation of regular expressions in the JavaScript engine. Coded and maintained by Steven Levithan, the releases of this library may be found on this repository: https://github.com/slevithan/xregexp/releases

Table 1: Some Well Known Flavors of Regex

Nuts and Bolts of Regular Expressions in JavaScript

In JavaScript, regular expressions are represented in one of two ways:

An object literal.
An object declared with a constructor.

The object literal notation is what we see above in Figure 1 minus its declaration. The code that you will be writing soon uses the notation shown here:

const regex = /[a-z]/g;

This expression will search for and match any instances of lowercase letters a through z in a specified test string. More on this later.

This same regular expression, declared using its object constructor, has the following syntax:

const regex = new RegExp(
  ‘[a-z]’, ‘g’;
);

Both of these syntaxes work identically. Is there a time one or the other should be used? Yes, there is. According to the Mozilla Developer Network:

“The literal notation results in compilation of the regular expression when the expression is evaluated. Use literal notation when the regular expression will remain constant. For example, if you use literal notation to construct a regular expression used in a loop, the regular expression won’t be recompiled on each iteration” (“RegExp –JavaScript | MDN”).

You will find more complete information on this in the full Mozilla Developer Network article.

The Anatomy of a Regular Expression

/^[0-9]{5}(-[0-9]{4})?$/gm

Looking at this cryptic line of code, you might be asking yourself, “What is this Gobbledygook?” I assure you that in a few minutes, this will look less intimidating than
it does now.

If we think of Regex as a symbolic representation of character patterns we wish to match, we can begin to classify different kinds of symbolic characters.

We will take a quick look at the regular expression above, pick it apart piece by piece and then put it back together to understand what is being asked of the regex engine.
The component parts of our regular expression can be broken down as follows:

     1. Delimiters
     2. Anchors
     3. Character Sets and Ranges
     4. Quantifiers
     5. Capturing Groups
     6. Flags

All six of these components come into play for our regular expression. Let’s take them one at a time.

Delimiters

In JavaScript object literal notation, regular expressions are delimited on either side by forward slashes. Everything that appears between these slashes is a representation of the pattern for which we wish to find matches in our test string.

Anchors

An anchor does not match any specific character in a test string. Rather it defines the beginning or endpoint of the match we wish to see returned by the regex engine.

The caret symbol (^) represents the beginning of the match for which we are searching. For example, if we want to match for any instance of the letter J at the beginning of our pattern, the syntax would be ^J.

On the other hand, the dollar sign ($) represents the end of the match for which we are searching. This symbol is used at the end of the string pattern and affects the character or character set immediately preceding it.

Character Sets

A character set is a specified collection of characters, which may be character literals or a specified progression of characters against which
we want to test a specific test string. Character Sets are enclosed by
square brackets.

Ranges

When a series of characters defines a range of characters, we have a range. Ranges are comprised of a set of sequential digits or alphabetical characters. For example, 0 through 9 is what we would consider (in the decimal system, anyway) the complete range of digits possible in a number. This would also be notated in square brackets, like so:

[0-9]

For alphabetical characters we also have the ranges [a-z] and [A-Z]. But we could just as easily specify a range of digits such as [1-5] or alphabetical ranges such as [a-g] or [A-G].

Quantifiers

A quantifier specifies the minimum instances of a given character (or character within a character set) desired in a match. It may also specify
the exact number of characters desired in a pattern match.

Table 2 below shows some of the uses for these quantifiers:

Quantifier	Description
*	Represents 0 or more instances of the character or character set that immediately precedes it.
+	Represents 1 or more instances of the character or character set that immediately precedes it.
?	Represents 0 or 1 instance of the character or character set that immediately precedes it.
{ }	This quantifier represents exactly the number of character matches as the number within it. For example, {5} means exactly 5 instances of the character that immediately precedes it. {2,} means 2 or more instances. {1, 5} means between 1 and 5 instances.

Table 2: Regex Quantifiers

Capturing Groups

Notated by the use of parentheses, capturing groups set a pattern sequence to be taken as a whole, rather than its constituent parts. In
other words, if we have a capturing group such as this…

([A-G]-0[0-9][3})

…what we are saying is to match any complete pattern that starts with any capital letter between A and G, followed by a hyphen and 0, then finally exactly 3 digits between 0 and 9.

How does this differ from a plain character set? In a character set, unless a quantifier follows it immediately such as in the sequence [0-9]{3} above, the regex engine will match only 1 character that falls within the range specified.

With a capturing group, on the other hand, a sequence is analyzed as a whole and must be matched as a whole. This proves very useful in our mini-application, as you will see.

Flags

With flags, we reach perhaps the easiest to understand of all the syntax thus far described. Flags have an impact on the way the regex engine parses the test string passed to it.
The JavaScript flavor of regular expressions has six flags, but we will confine our examination to the three you will probably most often encounter. These flags occur at the end of a regular expression after the closing forward slash. They are:

     1. i—the case-insensitive flag specifies that alphabetical characters will
         be matched whether they are upper or lower case.

     2. g—the global flag specifies that all matches from beginning to end of
         the test string will be returned. By default, the regex engine reads the
         test string from left to right, and once it returns the first match, exits,
         ignoring any matches beyond the first.

     3. m—Stefan Judis clarifies that “the multiline flag changes the
          meaning…” of the ^ and $ anchors mentioned above (Judis, Multiline
         mode in JavaScript regular expressions). By default, the regex engine
         treats a test string as one long uninterrupted string of characters to
         be searched.

         The boundaries of this string are defined by the ^ anchor, which denotes
         the start of a string, and the $ anchor, which denotes the end of a string.
         With the m (multiline) flag appended to the end of an expression, these
         two anchors define the beginning and end of a line rather than the string
         as a whole.

OKAY. I know that was an awful lot of stuff and some of it might have even been a bit confusing. That’s about to change.

The Regex Tear-Down

We are now ready to analyze the regular expression used in the web application we are going to build. Let’s look at it again in all its glory:

/^[0-9]{5}(-[0-9]{4})?$/gm

Taking it Apart

Let’s start by examining the outermost parts of this expression. The shell of our regular expression looks like this:

//gm

What does this little fragment say on its own? Not much, as no pattern has been specified as yet. Nonetheless, this fragment sets the stage for how any pattern appearing between the forward slash delimiters will be treated.

Using the definitions of regex flags above, this fragment says to the regex engine “Match all instances of the pattern specified between the delimiters (global matching) and consider each line of the test string separately (multiline matching).” Not much yet, but the engine now knows how to treat whatever pattern is defined for it between the delimiters.

The First Half of the Pattern

The first piece of this pattern makes use of the ^ anchor about which we learned earlier, differently. Let’s take a look at the first half of the pattern with this in mind:

^[0-9]{5}

First we have the ^ beginning of string anchor, which declares the start of our pattern. Next we have a character set enclosed in square brackets. This character set is comprised entirely of a range of digits 0 through 9.

This range is followed immediately by a quantifier of {5}. Taken together, the range and the quantifier specify that any set of exactly 5 digits in the range of 0 through 9 will be returned as a match.

Now we have the complete first half of our regular expression:

/^[0-9]{5}/gm

What this says all together to the regex engine is

“Search for and return all matches across all lines of the test string, that start with any combination of exactly 5 digits.”

Taken on its own, the first half of our regular expression is complete in and of itself and will return any valid 5-digit zip code that it finds in our test string.

But there’s still a problem. What we have so far will bypass any valid +4 zip codes embedded in the text. The second half of our regular expression will address this problem.

The Second Half of the Pattern

Now let’s approach the second half of the regular expression:

(-[0-9]{4})?$

Here we encounter a capturing group, which was explained earlier. The presence of the parentheses around the hyphen, range and quantifier indicates that the group is to be analyzed only as a whole. No constituent part of the capturing group will be considered on its own.

First let’s take on the contents of the capturing group.

Sometimes a Hyphen is Just a Hyphen

We start with the hyphen. When a hyphen occurs within square brackets that delimit a character set, it denotes a range, e.g. [0-9]. When it occurs as the first character in a capturing group and outside of square brackets, it is a character literal. Thus the hyphen is a required character at the beginning of the pattern to be matched in the capturing group.

Next is the range [0-9]. So far our group will only return a match if it starts with a hyphen and is followed by 4 digits between 0 and 9.

Outside the parentheses of the capturing group is the ? quantifier, which specifies that there can be 0 or 1 instance of what immediately preceded it. It’s important to note that this ? quantifier applies to the entire capturing group, not just the single character to its left.

This is the power of capturing groups. They make it possible to require of a match a specified group of characters or character sets. Because the ? quantifier accepts either 0 or 1 match of what precedes it, it is sometimes called an optional. In other words, a match of 0 or 1 instance of the character or pattern specified will be returned.

This behavior is what makes it possible for the regex engine to return matches of either a 5-digit zip code or a +4 zip code.

Finally, we have the $ anchor, which defines the end of the string to be returned as a match. This very unambiguously specifies that a valid zip code match will begin with a sequence of 5 digits and have an optional hyphen followed by exactly 4 digits, but absolutely nothing following this sequence.

Putting it Back Together

Let’s put everything back together now. Figure 2 below shows the entire sequence of our regular expression.

/^[0-9]{5}(-[0-9]{4})?$/gm

Fig. 2 The Reassembled Regular Expression

This sequence should now be clearer to us. Read from left to right, here is the meaning of the complete regular expression:

“Search for and return all matches across all lines of the test string that start with any combination of exactly 5 digits, and conclude optionally with a hyphen and exactly 4 digits in the range of 0 through 9.”

There we have it.

How about a Real-World Example?

Here is a very stripped down example of what we will implement for our application:

The Test String

10003
asdf10003
10003-8924

How many matches do you think will be returned from this search string? 1, 2, 3 or 4?

Using the very useful online tool called Regex Pal, we obtain the results found in Figure 3 below:

Fig. 3 Test Results from RegexPal.com

On the first line, 10003 is highlighted as a match. This is because it meets the criteria for a 5 digit zip code.

On the second line, asdf10003 has not been highlighted. This is because even though there are 5 digits on this line, they are preceded by asdf. It therefore does not meet the criteria, as the beginning of the matched string is not a sequence of 5 digits as required.

On the third line, 10003asdf has also not been highlighted. This is because, even though there are 5 digits at the beginning of the line, asdf follows this sequence. It therefore does not meet the criteria, as the end of the matched string must either be the last digit of the 5-digit sequence at the beginning, or the optional hyphen followed by exactly 4 digits. Nothing else may follow.

Finally, on the fourth line, 10003-8924 is highlighted. This is because it meets the criteria of a string that begins with exactly 5 digits, and ends with the optional sequence of a hyphen followed by exactly 4 digits.

There are therefore 2 matches.

Though this example is admittedly a bit simpler than the one we will be using in our finished application, the principles remain the same.

What Next?

Once you have come up for air, please continue to the second part of this tutorial series in which we will begin building our application—Regular Expressions—a Rite of Passage: From Theory to Practice.

References

“Regular Expressions - JavaScript: MDN.” JavaScript | MDN,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions.

Kleene, Stephen Cole. Representation of Events in Nerve Nets and Finite…
- Rand Corporation. https://www.rand.org/content/dam/rand/pubs/research_memoranda/2008/RM704.pdf.

“Regular Expression.” Wikipedia, Wikimedia Foundation, 30 May 2022,
https://en.wikipedia.org/wiki/Regular_expression.

“Comparison of Regular Expression Engines.” Wikipedia, Wikimedia
Foundation, 29 Apr. 2022,
https://en.wikipedia.org/wiki/Comparison_of_regular_expression_engines.

“RegExp - JavaScript: MDN.” JavaScript | MDN,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor.

Judis, Stefan. “Multiline Mode in JavaScript Regular Expressions.” Stefan
Judis Web Development, 23 Jan. 2022,
https://www.stefanjudis.com/today-i-learned/multiline-mode-in-javascript-regular-expressions/.

Numbers According to Computers

Robert Hieger — Fri, 06 Jan 2023 05:12:49 +0000

This article was first published on medium.com.

Intended Audience: Beginner to Intermediate Developers

Introduction

Many might consider the topic of this article superfluous and not worthy of lengthy examination if one is looking to become a skilled web developer/designer.

I find that in academic circles and, to a great extent, among budding developers, the importance of understanding numbers as they appear to computers, among other mathematical concepts germane to software development, encounters a kind of flippant dismissal—an assessment that they are not truly necessary in order to become a good software engineer.

I would argue that these rudimentary concepts not only warrant review, but are of increasing importance in the arena of full stack web development/design.

So why spend time on such a boring aspect of computer science? What relevance does it have to a web developer/designer or student of programming? It sounds more like what a computer engineer needs to understand.

Well, yes, a computer engineer definitely must understand binary numbers as microprocessors make us of this at the machine language level to represent data and instructions they receive.

The subject of number representation in computers is of great importance to developers as well, and can have significant ramifications in any programming language. Consider for a moment the shorthand employed to represent numbers in both high level programing languages such as Java, JavaScript or Python and lower level languages such as assembler code or machine language.

Of course, computers don't really know the difference between 10, 100, 35 or 70, for that matter. They don't even know what numbers are. At the level of machine language—the only language of which computers are capable—all the microprocessor understands is electrical current or lack thereof when circuit is closed or open.

At the machine language level, which communicates directly with the microprocessor, 0 represents an open circuit, or one through which the flow of current is interrupted. 1, on the other hand, represents a circuit through which the flow of electricity is not impeded.

A Micro-Exploration of the Microprocessor

In the typical microprocessor there are billions of microcircuits employing silicon semiconductor components.

What is a semiconductor?

At its root, a semiconductor is a

"... material [that] has an electrical conductivity value falling between that of a conductor, such as metallic copper, and an insulator, such as glass. Its resistivity falls as its temperature rises; metals behave the opposite way. Its conducting properties may be altered in useful ways by introducing impurities ('doping') into the crystal structure. When two differently doped regions exist in the same crystal, a semiconductor junction is created"_Semiconductor -Wikipedia).

As further clarified by the Encyclopaedia Britannica, the introduction of impurities through the process of doping starts with

“pure crystalline silicon…which is abundant in ordinary beach sand…[and] has a very high resistance to electrical current…[With the introduction of] certain impurities, known as dopants, the silicon can be made to conduct usable currents… [most notably]…as a switch, turning current off and on as desired” (“Microprocessor Circuits”).

I took this detour because the duality of circuits that can close or open leads logically into how numbers are processed by the microprocessor. The utility of a switch circuit in a computer should be self-evident.

The Binary System (Base 2)

First, we have the binary system, the basis for the ASCII Code (American Standard Code for Information Interchange), which codifies the Latin alphabet, the digits 0-9, punctuation marks, some other special characters and unprintable control characters.

For the purposes of this article, we will concern ourselves solely with the representation of numbers. The ASCII code employs 8 bits to represent a single character. These 8 bits are our starting point to understand the representation of numbers.

How do Computers Count?

I am by no means a mathematician, but the math concepts needed in order to understand binary representation of numbers are present in basic math.

For humans, counting seems most natural in the decimal (Base 10) system, perhaps because we have 10 fingers and 10 toes. The number 10 is an easy concept for us to grasp. Base 10, on the other hand, is completely alien to computers. At the primitive level, there are 2 states for a circuit—closed, where the flow of electricity is uninterrupted, or open, where the flow of current is interrupted, as we discovered in “A Micro-Exploration of the Microprocessor.”

The smallest unit of storage a computer can recognize is called a bit (short for binary digit). A binary digit can be one of two numbers—0 or 1. Because the first widely-used personal computers had microprocessors such as the Intel 8088, whose word length was 8 bits, standard representation for a single character or number now uses the convention of 8 bits.

8 bits are known as a byte. One smaller unit, that of 4 bits is known as a nibble, used only on very early processors that had a 4-bit word length.

What if you need to represent larger numbers or floating point numbers? It is possible to represent larger numbers or floating point numbers. This requires more bytes. On early 8-bit processors, this also requires more than one processing cycle. In this case, the processor’s “[add] instruction set[s] the ‘carry’ flag” and the microprocessor sees the next cycle as part of the same number or calculation (“How Did Old Games and Computers Display Large Numbers?”).

Different programming languages handle representation of numbers differently. We can examine the representation of numeric data types in the C language, which arguably provides the seminal reference types upon which many other languages have built static typing.

As Ritchie and Kernighan state in The C Programming Language,

("2.2 Data Types and Sizes").

What Numbers Can be Expressed by a Single Byte?

To put this in basic mathematical terms, a single byte is capable of representing 2⁸-1 or (2 ×2 ×2 ×2 ×2 ×2 ×2 ×2)-1.

2⁸=256. Why, then, is the largest possible number 256-1? We need one digit to express 0. Therefore, the representable range of numbers expressed by a single byte is 0-255.

Representing Signed Numbers

We cut the possible range of numbers in half if we want to represent negative numbers, with “[the] lowest [negative] number that can be stored [being]
-(2^(k-1)-1) and [the] largest [positive] number that can be stored being
(2^(k-1)-1) (“Representation of Negative Binary Numbers”).

With this formula, we then have -128 through 127 as the range of numbers one can represent in a single byte (8 bits).

We use the first bit to determine whether a number is negative or positive. We render this notation “with the help of an extra bit or flag called sign bit or sign flag in the Binary number representation system for signed numbers…[and it] has a value of…0 for positive numbers and 1 for negative binary numbers” (“Negative Binary Numbers”).

Using the first bit to represent the sign of the integer has a couple of consequences that bear examination. We now have only 7 bits of the byte to represent the integer. There is also an unsettling ambiguity in this encoding of numbers.

Remember, we have one less binary digit with which to work because we need it to represent 0. If we set the MSB (most significant bit), or the leftmost digit to 0, it represents positive 0. If, on the other hand, the MSB is 1, we now have the theoretical construct of negative 0.

Though the computer will not care one way or the other, this is an unsettling idea for humans, as we conceive of 0 as neither negative, nor positive, but occurring at the center of a number line continuum between the stream of positive integers on the right and the stream of negative integers on the left.

For this reason, the most prevalent representation of signed binary numbers uses the 2s Complement Method, as it produces the least ambiguity of value. In short, 2s Complement represents negative numbers by “invert[ing] the bits (0 goes to 1, and 1 to 0) and add[ing] one to the resulting number” (Finley, “Twos Complement”).

What Does this Look Like in Practice?

Let’s say we want to represent the decimal number -34 using 8 bits. We would start with the unsigned binary representation of 34, which is

0010 0010 OR 0(2⁷) + 0(2⁶) + 1(2⁵) + 0(2⁴) + 0(2³) + 0(2²) + 0(2¹) + 1(2⁰) = 010 + 010 + 3210 + 010 + 010 + 210 + 010 = 3410

To change the sign of this integer to negative, first we invert each binary digit arriving at

1101 1101

Finally, we add 1 to the rightmost 7 digits (remembering that the leftmost digit is the MSB representing the sign of the integer). The resulting binary number is

1101 1110

which now equals -3410.

Two Other Number Bases Relevant to Computers

There are two other number bases that come into play with computers. By far, the more prevalent of the two is hexadecimal notation, which is Base 16. The other less frequently used number base is octal notation, or Base 8.

Hexadecimal Notation

Hexadecimal notation must represent the numbers 0-15 (16 digits) and does so using the Arabic numerals 0-9 and the Latin alphabetical characters of A-F. As we will see, hexadecimal notation has an intimate relationship to web development and design.

Relevance to Web Development/Design

How is hexadecimal notation relevant to web development and design? From a certain perspective, this question could be likened unto the question of how oxygen is relevant to our pulmonary system. Hexadecimal notation is related fundamentally to both back-end web development and front-end development/design.

In addition to being quite useful to data structures employed on the back-end of web applications, hexadecimal notation is linked intimately to CSS (Cascading Style Sheets) where developers use it to specify colors.

How a monitor displays colors on a web page depends first and foremost upon the color depth afforded by standards of color encoding, and additionally upon what color spaces are supported by the hardware and the browser on which one views the page. Most typical in present day applications is 32-bit color, which supports up to 16,777,216 colors plus “…an alpha channel [that] can create…convincing gradients, shadows and transparencies” (“What's the Difference between 16-Bit, 24-Bit, and 32-Bit Color?”).

24-bit color already provides 16,777,216 colors, but lacks the nuance of the alpha channel provided in 32-bit color encoding.

CSS Color Encoding

Color encoding in CSS is accomplished in several different ways, the most prevalent of which are RGB (red-green-blue), RGBA (red-green-blue-alpha), and HSL (hue-saturation-lightness). There are other means of encoding color. The Mozilla Developer Network published a fascinating article that elucidates the CSS data type, and enumerates keywords that define color using different color spaces, such as sRGB (standard RGB) and HSL, as we’ve already seen. Added to the list, to name but a few, are HSLA (hue-saturation-lightness-alpha) and HWB/HWBA (hue-whiteness-blackness/hue-whiteness-blackness-alpha) (“<color> - CSS: Cascading Style Sheets: MDN”).

All these methods of encoding share one thing in common. They may be expressed in decimal or hexadecimal notation.
For example, the rgb()CSS property uses 8 bits per color channel (red, green and blue).

The syntax to encode the color yellow is rgb(255, 255, 0);

The equivalent syntax to express yellow with hexadecimal notation in CSS is color: #ffff00;

Note that the rgb() property has 3 decimal numbers with a range of 0-255. Each of these decimal numbers is represented as 8 bits, for a total of 24 bits, corresponding to the 24-bit color encoding mentioned above.

Since we are dealing with unsigned integers, we can dispense with 2s complement encoding for the moment.

This would give us the following binary representation of the color yellow:

11111111 11111111 00000000

The hexadecimal equivalent is three groupings of 2 hexadecimal digits:

FF FF 00

Note that two hexadecimal digits are equivalent to 8 bits. Consequently, a total of 6 hexadecimal digits do the same job that 24 binary digits do. Quite a reduction in time spent on encoding color.

Three Different Ways of Counting

To show the means of counting provided by number bases historically used in computing, let’s take a look at their efficiency (from the human perspective, anyway) of notation from least to most:

Counting in Binary

0, 1, 10, 11, 100, 101, 110, 111, 1000, 1001, 1010

And what does the large binary number of 1010 equal in Base 10? Here is the astonishing equivalency between the two:

10102 = 1(2³) + 0(2²) + 1(2¹) + 0(2⁰) = 1010

Counting in Octal

Octal notation or Base 8 is perhaps a bit less daunting. Here is how we count in Base 8:

0, 1, 2, 3, 4, 5, 6, 7, 10, 11, 12, 13, 14, 14, 15, 16, 17, 20…77, 100

Here, we have a total of 8 digits representing the values from 0-7. So what is the equivalent of 1008? Here is the equation:

1008 = 1(8²) + 0(8¹) + 0(8⁰) =
6410 + 010 + 010 = 6410

As mentioned earlier, octal notation does not come into a lot of use in present computer platforms. Its chief usage was with old minicomputers and mainframes such as the IBM System/360, “announced by IBM on April 7, 1965…[and]…designed to cover both commercial and scientific applications and to cover a complete range of applications from small to large” (“IBM System/360 - Wikipedia”).

Counting in Hexadecimal

At first glance, counting in hexadecimal (Base 16) is daunting because one must represent the numbers 0-15 with single digits. Thus we count like this:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F,
10, 11, 12, 13, 14, 15, 1A, 1B, 1C, 1D, 1E, 1F, 20…

This schema challenges our perception. After all, we do not have 16 fingers with which we can count 16 digits. To our way of thinking, 16 is 1 unit of ten plus 6 ones. But now let’s see the equivalent of 1A in decimal:

1A16 = 1(16¹) + A(16⁰) =
1610 + 1010 = 2610

This representation is nice and compact. But its real advantage becomes more obvious in the representation of larger numbers, such as those uses to represent color in CSS.

As we know, each hexadecimal digit is equivalent to 4 bits (1 nibble). Because a byte is comprised of 8 bits, what is represented in 8 digits in binary can be represented in only 2 digits in hexadecimal. This proves quite advantageous for coding in CSS.

Each channel—red, green and blue—have a decimal value of 192, which when notated using the rgb() property of CSS is rgb(192, 192, 192); Though not as cumbersome as the binary notation specified above, I think we can agree that it is yet more compact to use the hexadecimal CSS rule for the color silver—color: #c0c0c0;

Conclusion

We have covered in some depth the seemingly arcane, yet vital concept of number encoding on computers and distilled this knowledge through the looking glass of web design/development. Though not linked pronouncedly to the technologies of web development and design, the importance of number encoding to web technologies is irrefutable and overarching.

In today’s world wide web, what we used to call web sites are undeniably trending toward web applications with far more user interaction than ever before, and beginning to look more like their desktop counterparts.

As a result, web applications can involve manipulation of numbers, often at a more sophisticated level than previously encountered.

Finally, if we are truly honest with ourselves, sometimes when we do need to bother with the complexities of binary or hexadecimal calculations, it can become tedious and frustrating because our skills have become a bit rusty.
The intention of this article is to give some underpinning, and perhaps a new appreciation for these concepts by those who have long been away from rudimentary theory.

References

“Semiconductor.” Wikipedia, Wikimedia Foundation, 30 May 2022,
https://en.wikipedia.org/wiki/Semiconductor.

“Microprocessor Circuits.” Encyclopædia Britannica, Encyclopædia
Britannica, Inc.,
https://www.britannica.com/technology/integrated-circuit/Microprocessor-circuits.

“R/Explain Like I’m Five - ELI5: How Did Old Games and Computers Display
Large Numbers?” Reddit, Reddit.com,
https://www.reddit.com/r/explainlikeimfive/comm ents/5vqye0/eli5_how_did_old_games_and_computers_display/

Kernighan, Brian W., and Dennis M. Ritchie. “2.2 Data Types and Sizes.” The
C Programming Language, Prentice Hall, Englewood Cliffs, NJ, 2016.

“Representation of Negative Binary Numbers.” GeeksforGeeks, 22 Apr. 2020,https://www.geeksforgeeks.org/representation-of-negative-binary-numbers.

Finley, Thomas. “Two's Complement.” Duke CPS 104 Codex,
     Cornell University,
     Apr. 2000,
     https://www.cs.cornell.edu/~tomf/notes/cps104/twoscomp.html.

“What's the Difference between 16-Bit, 24-Bit, and 32-Bit Color?”
Computer Hope'sFree Computer Help, Computer Hope, 13 Nov. 2018,
https://www.computerhope.com/issues/ch001557.htm#:~:text=Like%2024%Dbit%20olor%2C%2032,colors%2C%20more%20memory%20is%20required.

“<color> - CSS: Cascading Style Sheets: MDN.”
CSS: Cascading Style Sheets | MDN, Mozilla Developer Network,
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.

“IBM System/360.” Wikipedia, Wikimedia Foundation, 22 Feb. 2021,
https://en.wikipedia.org/wiki/IBM_System/360.

Forem: Robert Hieger

A Quick Look at the JavaScript apply() Method

Photo by Kelly Sikkema on Unsplash

Table of Contents

Introductory Remarks

A Brief Recap

Let's Get Started

What Needs to Change?

Now Let's Refactor the Code

Step 1: Make the Needed Changes to index.html

Step 2: Rename the CSS Style Sheet

Step 3: Refactor the dog Objects to Use the apply() Method

How Does Function.prototype.apply() Differ from Function.prototype.bind()?

Recommended Reading for Study of call(), bind() and apply()

Step 4: Refactor the Event Listeners for button1 through button3

What's Next?

Works Cited

A Brief Recap

Fig. 1 My Favorite Dogs Opening Screen

Let's Get Started

Fig. 2 Github Starter Code Download Page

Fig. 3 Starter Code Project Files

What Needs to Change?

Code Listing 1 Dog Objects and the dogBreed Arrays Resulting from their Invocation

Now Let's Refactor the Code

Step 1: Make the Needed Changes to index.html

Code Listing 3 Section of index.html

Step 2: Rename the CSS Style Sheet

Refactor the dog Objects to Use the apply() Method

Code Listing 4 The getDogInfo Object and the Derived dog Objects

How Does Function.prototype.apply() Differ from Function.prototype.bind()?

Code Listing 5 Refactoring of 3 dog Objects

Recommended Reading for Study of call(), bind() and apply()

Step 4: Refactor the Event Listeners for button1 through button3

Code Listing 6 Event Listeners to be Refactored

Code Listing 7 Refactored Event Listeners for button1 through button3

What's Next?

Works Citied

A Quick Look at the JavaScript bind() Method: Understand the bind() Method in JavaScript

Table of Contents

Introduction

Let's Get Started

What Needs to Change?

Now Let's Refactor the Code

Step 1: Make the Needed Changes to index.html

Step 2: Rename the CSS Style Sheet

Step 3: Refactor the breed Objects

Step 4. Refactor the dog Objects to use the bind() Method

How Does Function.prototype.bind() Differ from Function.prototype.call()?

What's Next?

Works Cited

Introduction

Fig. 1 Opening Screen of My Favorite Dogs

Let's Get Started

Fig. 2 Download Starter Code

Fig. 3 Starter Code Project Files

What Needs to Change?

Code Listing 1 Calls to getDogInfo

Now Let's Refactor the Code

Step 1: Make the Needed Changes to index.html

Code Listing 2 Section of index.html

Step 3: Refactor the breed Objects

Code Listing 3 The breed Objects

Code Listing 4 Breed Objects Refactored

Step 4. Refactor the dog Objects to the use the bind() Method

Code Listing 5 The getDogInfo Object and the Derived dog Objects

How Does Function.prototype.bind() Differ from Function.prototype.call()?

Code Listing 6 Refactored dog Objects

Code Listing 7 dog Functions Invoked and Their Properties Stored

What's Next?

Works Cited

A Quick Look at the JavaScript call() Method

Table of Contents

Introductory Remarks

What This Tutorial Assumes

What Does the call() Method Do?

Now Let's Build It

Step 1. Download the Starter Code

A Brief Tour of the Starter Code

Step 2. Declaring Objects to Reference the Desired HTML Elements

Refactor the dog Objects to Use the `apply()` Method

How Does `Function.prototype.apply()` Differ from `Function.prototype.bind()`?

Recommended Reading for Study of `call()`, `bind()` and `apply()`

Step 4. Refactor the dog Objects to the use the `bind()` Method

Step 5. Using the `call()` method to specify the object whose properties we want returned as an Array

The `populateResultBox()` Function

The `depopulateResultBox()` Function