But if you still rely heavily on the console object alone to debug your JavaScript, then you're missing out on some amazing browser developer tools features.

Let's take a look at how you can debug JavaScript with the Chrome developer tools.

The Buggy Code We're Working With

To get started, I’ve prepared some buggy code that should add four numbers and also get their average.

Here's the HTML of the code:

<label for="num1">Number 1:</label>
<input type="text" id="num1" placeholder="Enter a number" />

<label for="num2">Number 2:</label>
<input type="text" id="num2" placeholder="Enter a number" />

<label for="num3">Number 3:</label>
<input type="text" id="num3" placeholder="Enter a number" />

<label for="num4">Number 4:</label>
<input type="text" id="num4" placeholder="Enter a number" />

<button id="calculateBtn">Calculate Sum and Average</button>

<p id="sum"></p>
<p id="average"></p>

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

Here's the very minimal CSS to push the labels to their respective lines and enlarge the input elements and button a bit:

body {
  background: #d2d2d2;
}

label {
  display: block;
  margin-top: 0.5rem;
}

button {
  display: block;
  margin-top: 1rem;
}

input,
button {
  padding: 0.2rem;
}

Here's what the HTML and CSS displays in the browser:

And here's the JavaScript in which the bug occurs:

const calculateBtn = document.getElementById('calculateBtn');
const sumText = document.getElementById('sum');
const avgText = document.getElementById('average');

function calculateTotal(a, b, c, d) {
 return a + b + c + d;
}

function calculateAverage(total, count) {
 return total / count;
}

function handleButtonClick() {
 let num1 = document.getElementById('num1').value;
 let num2 = document.getElementById('num2').value;
 let num3 = document.getElementById('num3').value;
 let num4 = document.getElementById('num4').value;

 let total = calculateTotal(num1, num2, num3, num4);
 let average = calculateAverage(total, 4);

 sumText.textContent = `The sum is ${total}`;
 avgText.textContent = `The average is: ${average}`;
}

calculateBtn.addEventListener('click', handleButtonClick);

Here's what happens if you enter the 4 numbers, say 3, 4, 2, 1, and click the Calculate Sum and Average button:

Unfortunately, the numbers just got merged and the average is calculated based on that, which means concatenation is going on instead of addition. The buggy addition leads to a buggy average calculation too.

Let's investigate what's happening with the browser developer tools.

How to Debug JavaScript Code Using Chrome Developer Tools

When such a bug occurs, you might be tempted to add a bunch of console logs.

Many times, console logs get the job done – but you have to spend a lot of time figuring things out.

The browser developer tools give you more options such as adding breakpoints, watching particular expressions, and even stepping through the code line by line to see where the bug occurs.

How to Open the Developer Tools and the Sources Tab

To start, right-click in the browser and select "inspect" to open the Chrome DevTools.

While in DevTools, head over to the "Sources" tab to see the files in the program. You can also press F12 on your keyboard and select the Sources tab.

Here's a brief anatomy of the Chrome DevTools Sources tab:

On top of the debugger tab are some greyed-out icons. When active, they let you step through your code and add or remove breakpoints.

Also in the debugger tab are:

• Watch: where you can add and see the watch expressions

• Breakpoints: where you can see the code of the line you add a breakpoint to

• Scope: contains the local and global variables

• Callstack: shows the function calls that lead to the current point of code execution

To see the contents of any file, you can click on it. After doing that, some of the icons in the debugger tab won’t be greyed out anymore.

How to Debug the Code by Adding Breakpoints

To start debugging the code, you can add a breakpoint to a line by clicking the line number.

A breakpoint is like a line marker you can set in the developer tools to pause the execution of your code before that line executes. This lets you check variable values, see if functions are called as expected, or observe the general flow of the code.

When you add a breakpoint and execute the code, a bluish icon appears on that line, indicating that execution will pause before that line.

Alternatively, you can add the debugger statement to the line where you want the execution to be paused. But let’s stick to using breakpoints.

For example, let's add a breakpoint to line 14, then enter the four numbers and click the Calculate Sum and Average button so the code will run:

At this point, you can see that the execution did not continue – that's why you see "value unavailable" for all the variables under “Local”.

From here, you can start stepping through the code line by line by pressing the step icon in the top right corner:

Once you click the step icon, the line you step out of executes.

You can see that "3" is the value for line 14. That value is surrounded by a pair of double quotes. That means it‘s a string. You need to be sure about that, though, and that’s what the watch feature lets you do. You’ll learn about that feature soon.

If you’re working with several lines of code, it might be time-consuming to step through the code line by line. So, you might have to add another breakpoint.

I will go ahead and set a breakpoint at line 23 and run the code again:

Now you can see that all the variable results apart from average appear to be strings. This takes us to the next Chrome developer tools debugger feature – watcher.

How to Use the Developer Tools Watch Feature

The developer tools watch feature lets you monitor specific variables or expressions as your code runs.

To confirm the data type of the variables, you can add a watch expression that shows their values, or more appropriately, their types.

To add a watch expression, click the plus (+) icon right beside “Watch” and hit ENTER on your keyboard.

Here are the watch expressions that confirm that num1 through num4 and total are strings – but they should be integers:

You can also verify this in the console tab by checking the types of the variables there:

This means that the numbers you enter are interpreted as strings. That’s because, in JavaScript, values from HTML elements like input fields are always retrieved as strings.

This happens because the value property of an input element returns a string, regardless of whether you enter numbers – and that’s how the bug was introduced.

Remember that JavaScript only concatenates strings even if they’re numbers. That means "3" is a string type and not an integer type.

To fix the bug, you should change the types of num1 through num4 to integers so JavaScript can correctly sum up their values.

You can then go ahead and fix this in the DevTools and press CTRL + S on Windows or CMD + S on Mac to save the code. You can also fix it inside your code editor by wrapping the variables of the numbers in parseInt().

Once you do that and run the code again, the correct data types should show in the watcher, and the correct variable values should show under Local:

You can also go ahead and implement the changes in your code editor so that everything works. Here’s the correct code:

const calculateBtn = document.getElementById('calculateBtn');
const sumText = document.getElementById('sum');
const avgText = document.getElementById('average');

function calculateTotal(a, b, c, d) {
  return a + b + c + d;
}

function calculateAverage(total, count) {
  return total / count;
}

function handleButtonClick() {
  let num1 = parseInt(document.getElementById('num1').value);
  let num2 = parseInt(document.getElementById('num2').value);
  let num3 = parseInt(document.getElementById('num3').value);
  let num4 = parseInt(document.getElementById('num4').value);

  let total = calculateTotal(num1, num2, num3, num4);
  let average = calculateAverage(total, 4);

  sumText.textContent = `The sum is ${total}`;
  avgText.textContent = `The average is: ${average}`;
}

calculateBtn.addEventListener('click', handleButtonClick);

And here’s the result in the browser:

Conclusion

That’s how you can debug JavaScript using Chrome’s developer tools. The breakpoint and watcher features, alongside the step-through buttons, are upgrades over a basic console log.

Note that every modern browser has this JavaScript debugging tool built into it, so you can use the same approach to debug JavaScript with Firefox or Edge.

Astro is incredible for content-driven websites – so much so that since then, I've been cracking a joke: it should be a crime to build a blog and documentation site with any frontend framework other than Astro.

Another notable thing I was able to do on my blog was build a callout component. This is the little tangential boxes you see on documentation sites and some advanced developer blogs.

This is an example of one in the freeCodeCamp docs:

And here’s one in the Astro docs:

A bit unique, this is one on Josh Comeau's blog:

Keep reading, so I can show you how to build a callout component for your Astro blog.

You can also use the same technique to create one for a blog built with any other frontend framework.

Prerequisites

To get the most out of this article, you need the following:

• basic knowledge of Astro

• a knowledge of Astro slots and fragments

• familiarity with JSX and prop-drilling

• understanding of component-based architecture

Astro slots and fragments might sound a bit strange. If that's the case, don't worry, I’l do my best to make things as clear as possible for you.

How to Build a Callout Component for your Blog

The approach we are going to use is to have a parent component that will handle all the rendering for the callout box: the type, icon, text, and the styling.

What will follow are respective components that indicate a note, tip, caution, error callout boxes, and more.

Here's a diagram that simplifies the approach:

Each of the child components is what you'll bring in any time you want to display a callout related to them.

To get started, create a folder, name it what you want (I call it astro-callout on my end), and install Astro.

What follows is a series of prompts. Here are the choices I made during the prompts:

Here's what the project folder structure looks like after installing Astro and choosing the blog template:

How to Build the Parent Callout Component.

Head over to the src/component directory and create a folder named callout. Then inside the folder, create a Callout.astro file.

The callout component is an aside element that will take in the following props:

• type: the callout type (note, caution, error, tip, and others)

• icon: the icon that will signify the callout type. This could be an emoji or an icon from an icon library.

• backgroundColor: the different background color of each callout type

• borderLeftColor: the border-left color of each callout type

Destructure those props from Astro.props in the code fence of the Callout.astro component:

const { icon, type, backgroundColor, borderLeftColor } = Astro.props

Don't forget the aside element has to have some text content, too. Astro has a way to handle this using the <slot /> element.

<slot /> lets you insert child content written between opening and closing tags into any component.

Here's how I filled everything into the aside element:

<aside
 class="callout-box"
 style={{backgroundColor, borderLeftColor}}
 >
 <div class="callout-icon-and-type">
   {icon}
   {type}
 </div>
 <div class="callout-content">
  <slot />
 </div>
</aside>

The icon prop fills in for any icon you would like to use, be it an emoji or an icon library like Ionicons or Font Awesome.

The problem is that not all emojis will be rendered in a presentable way, as different operating systems render emojis their own ways. So, you must find a way to accept both emojis and an icon library.

The icon library I chose for this project is ionicons. Go into the layout file (in this case layouts/BlogPost.astro) and insert the following scripts just before the closing body tag:

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Here's the function that will let you render an icon, whether it’s an emoji or an ionicons icon:

function renderIcon(icon:any) {
 if (typeof icon === 'string') {
   return icon;
 } else if (typeof icon === 'object' && icon.name) {
   return `<ion-icon name="${icon.name}"></ion-icon>`;
 }
 return '';
}

This function checks if the icon you pass in is an emoji or an icon from the Ionicons library.

An emoji corresponds to a string. So if you pass in an emoji, the icon is returned. If you pass in an icon from the Ionicons library, the function will look out for the icon name and display that icon.

You need to modify the content of the aside element a bit so the icon will be rendered the correct way:

<aside
 class="callout-box"
 style={{backgroundColor, borderLeftColor}}
 >
 <div class="callout-icon-and-type">
   <!-- New icon renderer -->
   <Fragment set:html={renderIcon(icon)} />
   {type}
 </div>
 <div class="callout-content">
  <slot />
 </div>
</aside>

If you're wondering what set:html is, it's an Astro template directory similar to the JavaScript element.innerHTML.

The Fragment component itself is a component you can use with the set:* directives to render HTML content.

Here's the CSS for the Callout component:

<style>
 .callout-box {
   color: #fff;
   flex-direction: column;
   padding: 1rem;
   border-left-width: 4px;
   border-left-style: solid;
   margin: 1.5rem 0;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }

 .callout-icon-and-type {
   font-size: 1.5rem;
   display: flex;
   gap: 0.4rem;
 }

 .icon {
   margin-right: 4rem;
 }

 .callout-content {
   font-size: 1.2rem;
 }
</style>

This will make more sense when we start using the parent Callout component in the child callout components.

How to Build the Child Callout Components

Let's demonstrate how to do this with a sample note callout box.

Create a NoteCallout.astro file inside the components/callout directory.

Import the parent Callout component inside the code fence of the NoteCallout.astro file:

import CallOutBox from "./Callout.astro";

To make things less confusing, you can rename CalloutBox to NoteCalloutBox:

import NoteCallOutBox from "./Callout.astro";

After that, use the NoteCalloutBox as a tag and pass ion all the props the parent Callout component accepts:

<NoteCallOutBox
 icon='<ion-icon style="color: #3347ff;" size="large" name="information-circle"></ion-icon>'
 type="Note"
 backgroundColor="#171d4f"
 borderLeftColor="#3347ff"
>

</NoteCallOutBox>

To account for the content of the NoteCalloutBox to be passed in when it's finally used, pass in <slot /> as the content of the NoteCallOutBox:

<NoteCallOutBox
 icon='<ion-icon style="color: #3347ff;" size="large" name="information-circle"></ion-icon>'
 type="Note"
 backgroundColor="#171d4f"
 borderLeftColor="#3347ff"
>
 <slot />
</NoteCallOutBox>

You can follow this process to create an error, caution, warning, and tip callout child components. All you need to do is to fill in the appropriate prop values.

How to Use the Callout Child Components

To use the child callout components in an MDX file for example, import the NoteCallout:

import NoteCallout from '../../components/callout/NoteCallout.astro';

Then use it as a tag and pass in the note you want to communicate to the user:

<NoteCallout>
 You can only use this component in an MDX file, not a regular Markddown file
 with a .md extension.
</NoteCallout>

Here's the result in the browser:

Here are other child components I created using the same approach:

Conclusion

I hope this article showed you everything you need to build a callout component for your blog.

Don’t forget that you can use the same technique to build a callout for a blog built with any other frontend framework.

If you find the article helpful, you can read more articles like it on my blog. I also have articles on PHP, JavaScript, React, Python, and more.

Keep coding…

In the first part, you learned about arrays, how to create arrays, array functions, and how to loop through arrays.

This second part will teach you how to use PHP and MongoDB to rebuild the football team cards project of freeCodeCamp's updated JavaScript curriculum.

The football team data will live in a MongDB Atlas database. We will fetch it as an array, and display it based on the players selected (goalkeepers, defenders, midfielders, and forwards).

This will help you build on top of what you learned about looping through arrays. After all, on many occassions, you'll be looping through what you get from a database or an API, not necessarily some hard-coded arrays.

In order not to shock you by jumping straight into databases from arrays, we'll start with what data and databases are, and then go on to learn about:

• Relational vs non-relational databases

• How to use MongoDB Atlas

• How to Install MongoDB for PHP on a Mac

• How to set up MongoDB Atlas

• How to build a CRUD app with PHP and MongoDB Atlas

• And finally, how to rebuild the football team cards project with PHP and MongoDB Atlas

Pre-requisites

To get the best put of this guide, I suggest you have a basic knowledge of the following:

• PHP fundamentals (variables, arrays, functions, loops)

• HTML and CSS

• JavaScript events

• Command line

• Composer

• How to set up a PHP development environment with VS Code

• Databases

• MongoDB Atlas

• Git and GitHub

Table of Contents

• What are Data and Databases?

• Relational vs Non-relational Databases

  • MongoDB Atlas – An Example of a Non-relational Database

• How to Install MongoDB for PHP

  • Step 1: Install the MongoDB Extension with PECL (PHP Extension Community Library)

  • Step 2: Modify the php.ini File to Include the MongoDB Extension

  • Step 3: Verify the Installation of the MongoDB Extension

  • Step 4: Set Up a MongoDB Atlas Cluster

  • Step 5: Install the MongoDB PHP Library

• CRUD Operations Using PHP and MongoDB

  • Step 1: Install MongoDB Library and Dotenv Package

  • Step 2: Create a .env File for your MongoDB Atlas URI Credential

  • Step 3: Create a Database Connection File

  • Step 4: The READ Part of the CRUD

  • Step 5: The CREATE Part of the CRUD

  • Step 6: The UPDATE Part of the CRUD

  • Step 7: The DELETE Part of the CRUD

• Project: How to Use PHP to Rebuild the Football Team Cards Project of the Updated JavaScript Curriculum

  • Step 1: Set up MongoDB Atlas

  • Step 2: Install the Project Dependencies with Composer

  • Step 3: Create Project Files

  • Step 4: Wrap the select tag in a form Element

  • Step 5: Create the Logic for Fetching the Footballers from the footballers Collection

  • Step 6: Create the Logic for Filtering the Footballers Based on Position

  • Step 7: Display the Players on the Page Based on the Selected Position

• Wrapping Up

What are Data and Databases?

Data is central to pretty much everything in the modern world. The people you see on social media and other websites, the content they post, the comments they add to posts, and many other online activities all produce a lot of data. Even patient files in a hospital or a company's payroll hosted on a local server are data. Data does not have to be on the Internet.

To effectively manage and utilize data for growth, you need a database. A Database is a structured collection of data that helps you efficiently store, retrieve, and manipulate that data.

Databases come in two primary types – relational and non-relational databases. We'll discuss the differences between them next.

Both relational and non-relational databases are managed with what is called database management systems (DBMS). A DBMS is an interface between the user and the database that allows you to create, read, update, and delete data in the database.

Relational vs Non-relational Databases

What are Relational Databases?

Relational databases organize data into tables consisting of rows and columns. Each table represents a specific entity, such as customers or products. The columns define the attributes of these entities, like the customer name or product name.

The relational model uses structured query language (SQL) for querying and managing data. Relationships between tables are established through primary and foreign keys to ensure data integrity and reduce redundancy.

Relational databases are known for their robustness, consistency, and support for complex queries. They are well-suited for applications that require multi-row transactions, such as financial systems, enterprise resource planning (ERP) software, and customer relationship management (CRM) systems.

Examples of relational databases are MySQL, PostgreSQL, and Microsoft SQL Server.

What are Non-Relational Databases?

Non-relational databases store and manage data in flexible, schema-less formats like key-value pairs, documents, wide-columns, or graphs. They are also known as NoSQL databases because they don't use SQL like relational databases.

Non-relational databases are designed to scale horizontally, making them ideal for large-scale data processing and real-time web applications.

Non-relational databases are easy to use, scalable, and high-performing at the same time. Due to that, they often sacrifice some degree of consistency in favor of availability and partition tolerance.

Common use cases include real-time analytics, real-time web apps, and applications requiring high-speed data ingestion.

MongoDB Atlas – An Example of a Non-relational Database

MongoDB Atlas is a non-relational database that stores data in a document-oriented JSON-like format called BSON (Binary JSON). BSON extends the JSON model to provide additional data types and to be efficient for encoding and decoding within various programming languages.

MongoDB Atlas offers the flexibility and scalability of MongoDB, with the benefits of automated deployment, backups, and monitoring. It allows developers to focus on building applications without bothering about database management

MongoDB Atlas also supports advanced features such as data partitioning, replication, and global distribution. This makes it a powerful choice for modern applications requiring flexibility and performance.

How to Install MongoDB for PHP

Before you can install MongoDB for PHP, make sure you have PHP itself installed correctly.

On a Mac, you can install PHP with homebrew by running brew install PHP. In addition to that, make sure you have Apache installed by running brew install httpd and starting it by running brew services start httpd.

You can follow the steps below to install MongoDB for PHP on a Mac.

Step 1: Install the MongoDB Extension with PECL (PHP Extension Community Library)

Install the MongoDB extension for PHP by running pecl install mongodb.

Step 2: Modify the php.ini File to Include the MongoDB Extension

Installing the MongoDB extension should automatically add the necessary configurations to the php.ini file. But of it doesnt do that, locate the php.ini file by running the command below:

$ php --ini
Configuration File (php.ini) Path: /usr/local/etc/php/8.3

After that, paste the following at the end of the php.ini file and save it:

extension=mongodb.so

After doing that, restart Apache by running brew services restart httpd.

Step 3: Verify the Installation of the MongoDB Extension

Run the command below to see whether the PHP extension has been successflly installed:

php -i | grep mongo

You should see something like this in the terminal:

Check out the MongoDB PHP docs for more information on how to use MongoDB with PHP and frameworks like Laravel and Symfony.

Step 4: Set Up a MongoDB Atlas Cluster

To test out the PHP extension you just installed, you need a MongoDB database. Atlas makes this easy for you because the heavy lifting is handled on the cloud.

1. Login to your MongoDB Account

Head over to https://cloud.mongodb.com/ and log in to your account. If you don't have an account, you can create one for free.

2. Create a Project

If you have existing projects, create a new project by clicking on the arrow right beside the currently opened project and selecting "New Project".

Give your project a name and click the "Next" button.

Click "Create Project" to finally create the project.

3. Create a Cluster

After creating a project, you should be prompted to create a cluster. If you're not, make sure you're in the Overview tab. From there, click the big "Create" button:

Select the "MO" free tier, give your cluster a name, and click the "Create Deployment" button.

I have given the cluster the name movie-list.

Just keep in mind that as your database grows, you might need to upgrade to one of the paid tiers.

4. Create a Database User

Immediately after you create your cluster, you'll be prompted to create a database user. Fill in your database user username and password and click the "Create Database User" button. Then click "Choose a connection method".

Make sure you enter a password you can remember or save it in a password manager.

5. Choose a Connection Method

You'll see several methods you can use to connect to the cluster once you click the "Choose a connection method" button.

Select Drivers from the list.

Choose PHP from the list and select PHP Lib 1.9 + MongoDB 1.10 or later as the version to use. Then copy the connection string and click the "Done" button.

6. Choose Network Access

Head over to the "Network Access" tab and select "Add IP ADDRESS", click "ALLOW ACCESS FROM ANYWHERE", and then click the "Confirm" button. You can change this later depending on where your app is deployed.

Go back to the "Database" tab and click the "Browse Collections" button.

Select "Load a Sample Dataset" so you don't have to add your own data – at least for now.

Now you should see the following databases:

To test that your MongoDB extension for PHP is running, you can query any of the data in those databases. But first, you need to install the MongoDB PHP library with composer. composer lets you manage dependencies for your PHP project.

Step 5: Install the MongoDB PHP Library

If you don't have composer installed, install it with homebrew by running brew install composer.

After that, create a folder and open it with your Text Editor. If your Text Editor has an integrated terminal, open it and run the command below:

composer require mongodb/mongodb

If the installation is successful, you'll see a vendor folder, along with composer.json and composer.lock files in the root of your project. You'll also see the following in the terminal:

Now you need to query any data in your atlas database and display them.

Create an index.php file and paste the following inside it:

<?php

require_once __DIR__ . '/vendor/autoload.php';

// Your connection string
$client = new MongoDB\Client(
 'mongodb+srv://username:<password>@movie-list.s6r7qkr.mongodb.net/?retryWrites=true&w=majority&appName=movie-list'
);

$movies = $client->selectCollection('sample_mflix', 'movies');
$document = $movies->findOne(['title' => 'Wild and Woolly']);

echo '<pre>';
print_r($document);

The code above lets you connect to the movies database in the sample_mflix collection with the selectCollection() function and query a movie titled "Wild and Bolly" in it.

Note: Make sure you replace the existing connection string with your own. You copied this in item 5 of step 4. Also, make sure you replace <password> with your database user password.

After that, run your PHP app (with php -S localhost:8000 on Mac in the terminal). If you have everything set up correctly, you should see the following in the browser:

Note: I have the data formatted nicely because I installed the PHP View Chrome extension. It prints everything you have inside the print_r() function like that.

CRUD Operations Using PHP and MongoDB

With MongoDB Atlas for database management and UI persistence, and PHP for server-side logic, you can build an application that implements full CRUD operations – create, read, update, and delete.

The particular CRUD app we are building is a movie list. So make sure you set up an Atlas database for it, as we already covered in this guide.

Now let's look at how you can build a movie list CRUD app.

Step 1: Install MongoDB Library and Dotenv Package

Make sure you have a MongoDB extension and a Dotenv package to help manage your .env variables by running the following commands:

composer require mongodb/mongodb
composer require vlucas/phpdotenv

Step 2: Create a .env File for your MongoDB Atlas URI Credential

Create a .env file and add the following in it:

MDB_URI="Your MongoDB Atlas connection string"

Step 3: Create a Database Connection File

Create a mongo_atlas_setup.php file for the database connection in the root and paste the following in it:

<?php
require_once __DIR__ . '/vendor/autoload.php';

$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();

$client = new MongoDB\Client($_ENV['MDB_URI']);

function getMongoClient()
{
 global $client;
 return $client;
}

function getMongoCollection($database, $collection)
{
 $client = getMongoClient();
 return $client->selectCollection($database, $collection);
}

With the code above, we are:

• loading the dependencies required for the project

• loading the environment variable

• using a function to get the database and the collection we want within it

Importing the file and calling the getMongoCollection in it with the database and the collection in it will let you connect to the database and the collection.

Step 4: The READ Part of the CRUD

In the root again, create an index.php file that will take care of the READ part of the CRUD. Paste the following in the file:

<?php

require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/mongo_atlas_setup.php';

$movies_list = getMongoCollection('movie_list', 'movies');
$movies = $movies_list->find([], ['sort' => ['_id' => -1]]);
?>

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Movie List CRUD App</title>
 <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-10">

 <div class="max-w-4xl mx-auto bg-white p-6 rounded shadow">
   <h1 class="text-3xl font-bold mb-4 text-center">Movie List CRUD App</h1>

   <?php include 'create.php' ?>

   <div class="space-y-4">
     <?php foreach ($movies as $movie) : ?>
       <div class="p-4 border rounded shadow-sm bg-gray-50">
         <h2 class="text-2xl font-semibold"><?= $movie['movie_title'] ?></h2>
         <p class="text-gray-700">Year: <?= $movie['movie_year'] ?></p>
         <div class="mt-2">
           <a href="update.php?id=<?= $movie['_id'] ?>" class="bg-yellow-500 text-white py-1 px-3 rounded">Update</a>
           <a href="delete.php?id=<?= $movie['_id'] ?>" onclick="return confirm('Are you sure you want to delete this movie?')" class="bg-red-500 text-white py-1 px-3 rounded">Delete</a>
         </div>
       </div>
     <?php endforeach ?>
   </div>
 </div>

</body>

</html>

Notice that there are the Update and Delete linking to an update.php and a delete.php files with the id of the movie clicked. That way, we will know which movie is clicked in order to update or delete it. There's also an include statement for a create.php file.

For now, you can go ahead and create the create.php, update.php, and delete.php files in the root.

At this point, you won't see anything in the UI yet because you need to handle the creation functionality.

Step 5: The CREATE Part of the CRUD

Create a create.php file in the root (if you haven't already) and paste in the following:

<?php
require_once __DIR__ . '/mongo_atlas_setup.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 $movies = getMongoCollection('movie_list', 'movies');
 $newMovie = [
   'movie_title' => $_POST['movie-title'],
   'movie_year' => (int)$_POST['movie-year'],
 ];
 $result = $movies->insertOne($newMovie);
 if ($result->getInsertedCount() === 1) {
   // echo "Movie created successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to create movie";
 }
}
?>

<form method="POST" action="create.php" class="space-y-4 mb-6">
 <div>
   <label class="block text-gray-700">Movie Title</label>
   <input type="text" name="movie-title" required class="w-full p-2 border rounded max-w-md">
 </div>
 <div>
   <label class="block text-gray-700">Movie Year</label>
   <input type="text" name="movie-year" required class="w-full p-2 border rounded max-w-md">
 </div>
 <button type="submit" class="bg-green-500 text-white py-2 px-4 rounded">Create</button>
</form>

The code above contains the form and input elements for creating a movie. We are then using the name attributes in those input elements to create the POST request that will let us create a movie and save it in the movies collection of a movie_list database.

Step 6: The UPDATE Part of the CRUD

To handle the updating, we need to create a separate file and do something similar to how the movie creation worked. The exeception is that we are going to use the id (_id) field to determine whether the movie exists and then update it instead of creating a fresh one.

To do that, create an update.php file (if you haven't already) in the root and paste in the following:

<?php
require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/mongo_atlas_setup.php';

use MongoDB\BSON\ObjectId;

$movies_list = getMongoCollection('movie_list', 'movies');
$title = '';
$year = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 $filter = ['_id' => new ObjectId($_POST['id'])];

 $update = ['$set' => [
   'movie_title' => $_POST['movie-title'],
   'movie_year' => (int)$_POST['movie-year'],
 ]];

 $result = $movies_list->updateOne($filter, $update);

 if ($result->getModifiedCount() === 1) {
   // echo "Movie updated successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to update movie.";
 }
} else {
 if (isset($_GET['id'])) {
   $id = $_GET['id'];
   $movie = $movies_list->findOne(['_id' => new ObjectId($id)]);
   if ($movie) {
     $title = $movie['movie_title'];
     $year = $movie['movie_year'];
   } else {
     echo "Movie not found.";
     exit;
   }
 } else {
   echo "No movie ID provided.";
   exit;
 }
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://cdn.tailwindcss.com"></script>
 <title>Update Movie </title>
</head>

<body class="bg-gray-100 p-10">

 <div class="max-w-4xl mx-auto bg-white p-6 rounded shadow">
   <h1 class="text-3xl font-bold mb-4">Update <?= $title ?> </h1>

   <form method="POST" action="update.php" class="space-y-4">
     <input type="hidden" name="id" value="<?php echo $id; ?>">

     <div>
       <label class="block text-gray-700">Title</label>
       <input type="text" name="movie-title" value="<?= htmlspecialchars($title); ?>" required class="w-full p-2 border rounded" />
     </div>

     <div>
       <label class="block text-gray-700">Release Year</label>
       <input type="number" name="movie-year" value="<?= htmlspecialchars($year); ?>" required class="w-full p-2 border rounded" />
     </div>

     <button class=" bg-green-500 text-white py-2 px-4 rounded" type="submit">Update</button>
   </form>

   <div class="mt-4">
     <a href="index.php" class="bg-gray-500 text-white py-2 px-4 rounded">Back to List</a>
   </div>
 </div>

</body>

</html>

Step 7: The DELETE Part of the CRUD

To handle the delete functionality, we can get the movie and use the deleteOne function provided by MongoDB to delete it. Once the deleting is done, we will then use the header() function again to redirect to the home page.

Paste the following code in your delete.php file:

<?php
require_once __DIR__ . '/mongo_atlas_setup.php';

use MongoDB\BSON\ObjectId;

if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id'])) {
 $movies = getMongoCollection('movie_list', 'movies');
 $filter = ['_id' => new ObjectId($_GET['id'])];
 $result = $movies->deleteOne($filter);
 if ($result->getDeletedCount() === 1) {
   // echo "Movie deleted successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to delete movie.";
 }
} else {
 echo "No movie provided.";
}
?>

This is what the CRUD app should look like now:

All the code is in this GitHub repo

Project: How to Use PHP to Rebuild the Football Team Cards Project of the Updated JavaScript Curriculum

Before you start going through the steps to build the project, grab the starter code for the project in the starter branch of this GitHub repo.

You can also take a look at the football team cards project to know what we are trying to achieve.

Step 1: Set up MongoDB Atlas

Log in to your MongoDB Atlas account and create a football-team-cards database. Feel free to create it in an existing project or a new one if you want. In the football-team-cards database, create a footballers collection.

In the footballers collection, click the "INSERT DOCUMENT" button.

Then paste in the content of the footballers.json file in the starter branch of the project GitHub repo and click "Done".

After that, your footballers collection should look like this:

Step 2: Install the Project Dependencies with Composer

Create a football-team-cards-php folder on your computer and open it with your favorite text editor. Open the same folder in your terminal and run the following commands:

composer require vlucas/phpdotenv 
composer require mongodb/mongodb

Step 3: Create Project Files

Inside the football-team-cards-php folder, create the following files:

• .env

• mongo_atlas_php_setup.php

• index.php

• styles.css

In the .env file, you should have the MongoDB Atlas URI:

MDB_URI="Your MongoDB Atlas connection string"

In the mongo_atlas_php_setup.php file, you should connect to the database with this code:

<?php
require_once __DIR__ . '/vendor/autoload.php';
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();


function getMongoClient()
{
 return new MongoDB\Client($_ENV['MDB_URI']);
}


function getMongoCollection($database, $collection)
{
 $client = getMongoClient();
 return $client->selectCollection($database, $collection);
}

In the code above, we are loading the environment variables and using a getMongCollection function to connect the database. Make sure you replace the connection string with your own.

Now, anytime you want to connect to a database, require the file, then pass the database and the collection names to the getMongoCollection function.

Copy the content of the index.html and styles.css files in the starter branch of the project GitHub repo and paste them into your index.php and styles.css files.

Step 4: Wrap the select tag in a form Element

Replace the existing select tag with the following:

<form method="POST" action="">
     <label class="options-label" for="players">Filter Teammates:</label>
     <select name="position" id="players" onchange="this.form.submit()">
       <option value="all">All Players</option>
       <option value="nickname">Nicknames</option>
       <option value="forward">Position Forward</option>
       <option value="midfielder">Position Midfielder</option>
       <option value="defender">Position Defender</option>
       <option value="goalkeeper">Position Goalkeeper</option>
     </select>
</form>

This will let you make a POST request with the name attribute set to position. And with the onchange attribute of this.form.submit(), you'll be able to fetch footballers based on any of the options selected. More on this later.

Step 5: Create the Logic for Fetching the Footballers from the footballers Collection

require_once __DIR__ . '/mongo_atlas_php_setup.php';

$position = isset($_POST['position']) ? $_POST['position'] : 'all';

$collection = getMongoCollection('football-team-cards', 'footballers');
$team = $collection->findOne(['team' => 'Argentina']);
$players = $team['players']->getArrayCopy();

With the code above, we are:

• importing the database connection file

• checking for POST data with the name on the select tag and setting a default value of all (the first option in the select element)

• getting the database and collection in it

• using the findOne method from MongoDB to get the team

• and fetching the data as an array with getArraCopy() so we can loop through it

At this point, you can print the $players variable with print_r() or var_dump() to see what it looks like. On my end, it looks like this when I ran the app with php -S localhost:4000:

Step 6: Create the Logic for Filtering the Footballers Based on Position

Remember we have to display the players based on whether they are goakeepers, defenders, midfielders, or forwards. To do that, we can utilize the code below:

$filteredPlayers = $players;


if ($position !== 'all') {
 if ($position === 'nickname') {
   $filteredPlayers = array_filter($players, function ($player) {
     return !empty($player['nickname']);
   });
 } else {
   $filteredPlayers = array_filter($players, function ($player) use ($position) {
     return $player['position'] === $position;
   });
 }
}

At first, we are initializing $filteredPlayers to all the players. If the selected position is not all, we filter the players based on nickname. And if the selected position is not nickname, we filter the players to include only those whose position matches the selected position.

Step 7: Display the Players on the Page Based on the Selected Position

Now, all we need to do is set each option's value (all players, goalkeepers, defenders, midfielders, forwards) to selected if that option is matched. After that, we need to use foreach loop to do the proper display.

Here's one way you can set the value of each option to selected:

<option value="all" <?= $position === 'all' ? 'selected' : '' ?>>All Players</option>
       <option value="nickname" <?= $position === 'nickname' ? 'selected' : '' ?>>Nicknames</option>
       <option value="forward" <?= $position === 'forward' ? 'selected' : '' ?>>Forwards</option>
       <option value="midfielder" <?= $position === 'midfielder' ? 'selected' : '' ?>>Midfielders</option>
       <option value="defender" <?= $position === 'defender' ? 'selected' : '' ?>>Defenders</option>
       <option value="goalkeeper" <?= $position === 'goalkeeper' ? 'selected' : '' ?>>Goalkeepers</option>

And here's how you can use the foreach loop to finally display the players selected:

<div class="cards" id="player-cards">
     <?php if (empty($filteredPlayers)) : ?>
       <p>No players found for the selected position.</p>
     <?php else : ?>
       <?php foreach ($filteredPlayers as $players) : ?>
         <div class="player-card">
           <h2><?= $players['name'] . ($players['isCaptain'] ? ' (Captain)' : '') ?></h2>
           <p>Position: <?= $players['position'] ?></p>
           <p>Number: <?= $players['number'] ?></p>
           <p>Nickname: <?= !empty($players['nickname']) ? $players['nickname'] : 'N/A' ?></p>
         </div>
       <?php endforeach ?>
     <?php endif ?>
   </div>

Now, everything works as expected:

You can grab the final code of the project in the main branch of this GitHub repo.

Wrapping Up

Rebuilding the football team cards project with PHP and MongoDB Atlas shows just how powerful and flexible it can be to combine server-side scripting with a cloud-based NoSQL database.

The project not only highlights how smoothly PHP and MongoDB Atlas work together, but it also shows the advantages of using a cloud-based database like Atlas. Atlas offers scalability, high availability, and easy management, making it a great choice for modern web applications.

Whichever data-driven application you're making, these techniques that we used here to build the project and the initial CRUD app can help you out.

Happy coding!

When you create an array in PHP, you'll want to be able to use it. To do so, you have to manipulate or loop through it. PHP provides several built-in functions for manipulating arrays and several ways to loop through arrays.

Understanding and utilizing those built-in functions and loops is essential for efficient array manipulation. With them, you'll save time, write cleaner code, and become a more efficient PHP developer.

Note that this is the first part of a two-article series. The second part will focus on how to use MongoDB in PHP by rebuilding the Football Team Cards project. The footballers will come from a MongoDB Atlas database. We will then fetch them as arrays and display them on the page.

What We'll Cover

• How to Create Arrays in PHP

  • How to Create Arrays with the Array Function

  • How to Create Arrays with the Square Bracket Syntax

• How to Print Arrays in PHP

  • How to Print an Array with the print_r() Function

  • How to Print an Array with the var_dump() Function

• PHP Array Functions

  • The count() Array Function

  • The array_push() Array Function

  • The array_pop() Function

  • The array_shift() Function

  • The array_unshift() Function

  • The array_splice() Function

  • The array_keys() Function

  • The array_values() Function

  • The array_reduce() Function

  • The sort() Function

  • The rsort() Function

  • The array_replace() Function

  • The array_reverse() Function

  • The array_slice() Function

  • The array_sum() Function

  • The array_merge() Function

  • The array_filter() Function

  • The array_map() Function

  • The array_search() Function

  • The array_column() Function

  • The in_array() Function

• How to Loop Through Arrays in PHP

  • How to Loop through an Indexed Array

  • How to Loop through an Associative Array

  • How to Loop through an Array Inside the HTML Template

• Conclusion

How to Create Arrays in PHP

In PHP, arrays exist in 3 forms:

• indexed – a regular array with predefined indexes

• multidimensional – an array with arrays within it

• associative – an array with string indexes

There are two ways you can create any of those 3 forms of arrays in PHP. You can either use the Array() function or the square brackets syntax ([ ]).

How to Create Arrays with the Array Function

To create a PHP array with the array() function, just pass the elements into the function.

Here's the catch:

• a regular array is created with the array() function by passing the elements directly into the function

• a multidimensional array is created with the array() function by nesting one or more array() functions inside one array() function

• an associative array is created with the array() function by separating the key and values with a fat arrow (=>) and separating each entry with a comma

Here's examples of all of them in code:

// regular array with the array function
$myFruitsArr1 = array("Apple", "Banana", "Cashew", "Mango");


// multidimensional array with the array function
$myFruitsArr2 = array(
 array("Apple", "Avocado", "Apricot"),
 array("Banana", "Blackeberry", "Babaco"),
 array("Cashew", "Cherry", "Canary melon"),
 array("Mango", "Melon", "Miracle fruit"),
);


// associative array with the array function
$myFruitsArr3 = array(
 "fruit 1" => "Apple",
 "fruit 2" => "Banana",
 "fruit 3" => "Cashew",
 "fruit 4" => "Mango",
);

How to Create Arrays with the Square Bracket Syntax

The square bracket syntax is the most common way to create an array in PHP (and JavaScript as well).

To create an array with the square bracket syntax, replace every occurrence of array() with opening and closing square brackets:

// regular array with the square bracket syntax
$myFruitsArr1 = ["Apple", "Banana", "Cashew", "Mango"];


// multidimensional array with the square bracket syntax
$myFruitsArr2 = [
 ["Apple", "Avocado", "Apricot"],
 ["Banana", "Blackeberry", "Babaco"],
 ["Cashew", "Cherry", "Canary melon"],
 ["Mango", "Melon", "Miracle fruit"],
];


// associative array with the square bracket syntax
$myFruitsArr3 = [
 "fruit 1" => "Apple",
 "fruit 2" => "Banana",
 "fruit 3" => "Cashew",
 "fruit 4" => "Mango",
];

How to Print Arrays in PHP

Most times, you might need to print an array for debugging or visual purposes. PHP provides the echo statement, print_r(), and var_dump() functions for printing data.

echo does not print an array as it should because it is meant for printing strings, integers, and floats. You should use print_r() and var_dump() to print arrays instead.

How to Print an Array with the print_r() Function

The print_r() function displays structured information about a variable in a human-readable format.

print_r() is particularly useful for displaying and inspecting the contents of complex data structures like arrays and objects. You use it by passing the array identifier into it:

print_r($myFruitsArr1);
print_r($myFruitsArr2);
print_r($myFruitsArr3);

Even if the array or object has nested elements, print_r() will traverse the entire array or object and display the content without missing any elements.

Here's what each of the 3 types of arrays looks like when you print them with the print_r() function:

Regular, multidimensional, and associative array examples.

How to Print an Array with the var_dump() Function

The var_dump() function lets you print an array or variable like the print_r() function. What it does differently is that it displays the data type of what you're printing, including each element of the array.

Here's how to use the var_dump() function:

var_dump($myFruitsArr1);
var_dump($myFruitsArr2);
var_dump($myFruitsArr3);

And here's what each of the 3 types of array looks like when you print them with the var_dump() function:

Regular, multidimensional, and associative arrays printed with var_dump()

PHP Array Functions

PHP provides a rich variety of array functions. They allow you to perform a wide range of operations on arrays, from basic manipulation to advanced data processing.

There are more than 70 array functions you can use in PHP, so we won't be able to cover all of them in this handbook.

Here are the ones we’ll cover:

• count()

• array_push()

• array_pop()

• array_shift()

• array_unshift()

• array_splice()

• array_keys()

• array_values()

• array_reduce()

• sort()

• rsort()

• array_replace()

• array_reverse()

• array_slice()

• array_sum()

• array_merge()

• array_filter()

• array_map()

• array_search()

• array_column()

• in_array()

The count() Array Function

The count() function does what its name implies — it goes through an array, counts the items, and returns an integer representing the array's length.

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
echo count($myFruitsArr); // 4

count() can be helpful if you want to do something based on the length of a particular array:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


if (count($myFruitsArr) === 4) {
 echo "The fruits are enough";
} else {
 echo "The fruits are not enough";
}


// The fruits are enough

Because count() gets the length of an array, its commonly used in loops:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


for ($i = 0; $i < count($myFruitsArr); $i++) {
 echo $myFruitsArr[$i] . "<br>";
}


/*
Output:


Apple
Banana
Cashew
Mango
*/

The array_push() Array Function

array_push() “pushes” an element to the end of the array. That is, it adds a specified item after the last item in the array. This means it modifies the original array.

array_push takes a compulsory array argument and the element you want to push into the existing array:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


array_push($myFruitsArr, "Avocado");
print_r($myFruitsArr); // Array ( [0] => Apple [1] => Banana [2] => Cashew [3] => Mango [4] => Avocado )

You can echo out the <pre> tag to format the resulting array better:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


array_push($myFruitsArr, "Avocado");
echo "<pre>";
var_dump($myFruitsArr);
echo "<pre>";


/*
Output:


array(5) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(6) "Banana"
 [2]=>
 string(6) "Cashew"
 [3]=>
 string(5) "Mango"
 [4]=>
 string(7) "Avocado"
}
*/

You can also push two or more items:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


array_push($myFruitsArr, "Avocado", "Pineapple");
echo "<pre>";
var_dump($myFruitsArr);
echo "<pre>";


/*
Output:


array(6) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(6) "Banana"
 [2]=>
 string(6) "Cashew"
 [3]=>
 string(5) "Mango"
 [4]=>
 string(7) "Avocado"
 [5]=>
 string(9) "Pineapple"
}
*/

The array_pop() Function

array_pop() does the opposite of what array_push() does – it removes an element from the end of the array. That means it can be useful in stack-based data structures.

To use the array_pop() function, you only need to pass in the array you want to remove from:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
array_pop($myFruitsArr);


echo "<pre>";
var_dump($myFruitsArr);
echo "<pre>";


/*
Mango is gone:


array(3) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(6) "Banana"
 [2]=>
 string(6) "Cashew"
}
*/

You can echo out the popped element because array_pop() modifies the original array:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$poppedElem = array_pop($myFruitsArr);


echo $poppedElem; // Mango

The array_shift() Function

array_shift() is like array_pop, but it removes the first element of an array and not the last. So, it's helpful in queue-based data structures.

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
array_shift($myFruitsArr);
var_dump($myFruitsArr);


/*
Apple is gone:


array(3) {
 [0]=>
 string(6) "Banana"
 [1]=>
 string(6) "Cashew"
 [2]=>
 string(5) "Mango"
}
*/

Because the array_shift() function modifies the original array, it reorders the indices:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];


echo "before shift: ";
var_dump($myFruitsArr);


echo "<br>";


echo "after shift: ";
array_shift($myFruitsArr);
var_dump($myFruitsArr);

Before and after using the shift() function

array_shift() also returns the removed array because it modifies the original array:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$shiftedElem = array_shift($myFruitsArr);

echo $shiftedElem; // Apple

The array_unshift() Function

The array_unshift() function adds one or more elements to the beginning of an array. It modifies the original array by inserting the new elements at the start and re-indexing the existing elements.

It takes the array you want to add to and the element you want to add as the arguments. You can use it without providing the element to add to the beginning of the array, but it is advised not to do so.

Here’s an example:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
array_unshift($myFruitsArr, "Avocado");

var_dump($myFruitsArr);

/*
array(5) {
 [0]=>
 string(7) "Avocado"
 [1]=>
 string(5) "Apple"
 [2]=>
 string(6) "Banana"
 [3]=>
 string(6) "Cashew"
 [4]=>
 string(5) "Mango"
}
*/

The array_splice() Function

The array_splice() method removes an item from an array and replaces it with the specified replacement. array_splice() modifies the original array, so it returns that removed item.

array_splice() takes up to 4 arguments, as you can see in its basic syntax below:

array_splice(array, startingIndex, length, replacement)

• array is the array you’re using the array_splice() function on

• startingIndex is the position where you want to start removing the item(s) in the array. That means if you specify 0, it will remove the first element in the array.

• length is how far you want the splicing to go. For instance, if you specify 2, two items will be removed starting from the specified startingIndex

• replacement is the item that will replace the item to be removed. This could be a single item or another array.

Here’s an example with an array and a string replacement:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$splicedItem = array_splice($myFruitsArr, 1, 1, "Avocado");

var_dump($myFruitsArr);

/*
Output:

array(4) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(7) "Avocado"
 [2]=>
 string(6) "Cashew"
 [3]=>
 string(5) "Mango"
}
*/
echo "<br>";

var_dump($splicedItem);

/*
Output:
array(1) {
 [0]=>
 string(6) "Banana"
}
*/

Here’s another example with an array as the replacement:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$splicedItem = array_splice($myFruitsArr, 1, 1, array("Avocado", "Apricot", "Abiu"));

var_dump($myFruitsArr);
/*
Output:

array(6) {
 [0]=>
 string(5) "Apple"
 [1]=>
 string(7) "Avocado"
 [2]=>
 string(7) "Apricot"
 [3]=>
 string(4) "Abiu"
 [4]=>
 string(6) "Cashew"
 [5]=>
 string(5) "Mango"
}
*/

var_dump($splicedItem);
/*
Output:

array(1) {
 [0]=>
 string(6) "Banana"
}
*/

The array_keys() Function

There are two components in every array – the keys and the values. For a regular array, the keys are the indexes. For an associative array, the keys are the indices specified for each array item.

The array_keys function extracts the keys of the items in an array.

If the array is a regular array, it lists the indices of the array as the keys:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$myFruitsArrKeys = array_keys($myFruitsArr);

print_r($myFruitsArrKeys);
/*
Output:

Array
(
   [0] => 0
   [1] => 1
   [2] => 2
   [3] => 3
)
*/

If the array is an associative array, it lists out the keys you specified for each item in the array:

$myFruitsWithColors = [
 "apple" => "red",
 "banana" => "yellow",
 "orange" => "orange",
 "grape" => "purple",
 "watermelon" => "green",
];

$myFruitsWithColorsKeys = array_keys($myFruitsWithColors);

print_r($myFruitsWithColorsKeys);
/*
Output:

Array
(
   [0] => apple
   [1] => banana
   [2] => orange
   [3] => grape
   [4] => watermelon
)
*/

array_keys() can accept a second argument. This is usually an item in the array.

If you specify an item as that second argument, array_keys() will return the key for that item only:

$myFruitsWithColors = [
 "apple" => "red",
 "banana" => "yellow",
 "orange" => "orange",
 "grape" => "purple",
 "watermelon" => "green",
];

$myFruitsWithColorsKeys = array_keys($myFruitsWithColors, "orange");

print_r($myFruitsWithColorsKeys);
/*
Output:

Array
(
   [0] => orange
)
*/

The array_values() Function

The array_values() function extracts the other part of an array – the values.

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$myFruitsArrValues = array_values($myFruitsArr);

print_r($myFruitsArrValues);

/*
Output:
Array
(
   [0] => Apple
   [1] => Banana
   [2] => Cashew
   [3] => Mango
)
*/

The output of array_values() looks like what happens when you print a regular array with the print_r() function, but it’s not. What happens is it also assigns indices to those printed values.

An example with an associative array would make that clearer:

$myFruitsWithColors = [
 "apple" => "red",
 "banana" => "yellow",
 "orange" => "orange",
 "grape" => "purple",
 "watermelon" => "green",
];

$myFruitsWithColorsValues = array_values($myFruitsWithColors);
print_r($myFruitsWithColorsValues);

/*
Output:

Array
(
   [0] => red
   [1] => yellow
   [2] => orange
   [3] => purple
   [4] => green
)
*/

The array_reduce() Function

The array_reduce() function is used to "reduce" an array to a single value by applying a callback function to each element of the array. It works like the reduce() array method of JavaScript.

array_reduce() iterates through the array and performs the callback function on each element, accumulating a single result.

That means you can use it for data aggregation and computation, like calculating the total value of items in a shopping cart.

array_reduce() takes 2 required arguments and 1 optional argument. Here’s the syntax:

array_reduce(arraytoReduce, callbackFunction, initialValue)

• arrayToReduce is the array you’re using reduce on

• callbackFunction is the function that will “reduce” the items of the array into a single value

• initialValue is optional. It specifies the initial value of the accumulator. If provided, it will be used as the initial value for the first call to the callback function. If not provided, the first element of the array will be used as the initial accumulator value.

array_reduce() is usually used with numbers:

$myNumbers = [5, 89, 19, 10, 49];

$total = array_reduce($myNumbers, function ($carry, $item) {
 return $carry + $item;
}, 0);

echo $total; // 172

You can extract that callback function into a separate function and pass it in as one of the arguments of the array_reduce() function:

$myNumbers = [5, 89, 19, 10, 49];


function addNums($carry, $item)
{
 return $carry + $item;
}

$total = array_reduce($myNumbers, 'addNums', 0);

echo $total; // 172

array_reduce() also works with strings:

$words = ["Hello", "camper!", "How", "are", "you", "today?"];

// Use array_reduce to concatenate all the strings
$result = array_reduce($words, function ($carry, $item) {
 return $carry . " " . $item;
}, "");

echo $result; //  Hello camper! How are you today?

The sort() Function

The sort() function takes an array and sorts it in ascending order based on the values of its items. It modifies the original array by rearranging its elements in ascending order.

If you have some data in an array that you want to organize in ascending order, the sort() function is perfect for that.

$myNums = [4, 2, 1, 3, 5];
sort($myNums);

print_r($myNums);

/*
Output:

Array
(
   [0] => 1
   [1] => 2
   [2] => 3
   [3] => 4
   [4] => 5
)
*/

The rsort() Function

The rsort() function is similar to sort(), but it sorts the array in descending order instead of ascending order.

$myNums = array(4, 2, 1, 3, 5);
rsort($myNums);

/*
Output:

Array
(
   [0] => 5
   [1] => 4
   [2] => 3
   [3] => 2
   [4] => 1
)
*/

print_r($myNums);

The array_replace() Function

The array_replace() function is used to replace the values of the first array with the values of a provided array. It's perfect for updating data.

array_replace() takes two arguments – the array you want to replace, and the new array.

$myNamesArr1 = ["Zen", "Kay", "Luger"];
$myNamesArr2 = ["Yuan", "Jay", "John"];

$replaceRes = array_replace($myNamesArr1, $myNamesArr2);

print_r($replaceRes);

/*
Output:
Array
(
   [0] => Yuan
   [1] => Jay
   [2] => John
)
*/

If you don’t provide a second value, it returns the only argument you provide:

$myNamesArr1 = ["Zen", "Kay", "Luger"];
$myNamesArr2 = ["Yuan", "Jay", "John"];

$replaceRes = array_replace($myNamesArr1);

print_r($replaceRes);

/*
Output:
Array
(
   [0] => Zen
   [1] => Kay
   [2] => Luger
)
*/

If you pass in three or more arrays as the arguments, the last argument will be the replacement for the first one, not the second:

$myNamesArr1 = ["Zen", "Kay", "Luger"];
$myNamesArr2 = ["Yuan", "Jay", "John"];
$myNamesArr3 = ["Eddy", "White", "Jane"];


$replaceRes = array_replace($myNamesArr1, $myNamesArr2, $myNamesArr3);

print_r($replaceRes);

/*
Output:
Array
(
   [0] => Eddy
   [1] => White
   [2] => Jane
)
*/

You can selectively replace an item in a particular index too:

$myFruitsArr1 = ["a" => "apple", "b" => "banana", "c" => "cherry"];
$myFruitsArr2 = array("b" => "blueberry", "c" => "cranberry");
$replaceRes = array_replace($myFruitsArr1, $myFruitsArr2);

print_r($replaceRes);

/*
Output:
Array
(
   [a] => apple
   [b] => blueberry
   [c] => cranberry
)
*/

The array_reverse() Function

The array_reverse() function is used to reverse the order of elements in an array. It creates a new array with the elements in reverse order.

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango"];
$reversedArr = array_reverse($myFruitsArr);

print_r($reversedArr);

/*
Output:

Array
(
   [0] => Mango
   [1] => Cashew
   [2] => Banana
   [3] => Apple
)
*/

If you remember how the rsort() function works, it’s very similar to how array_reverse() works. The only difference is that rsort() modifies the original array, but array_reverse() does not.

The array_slice() Function

If you want to extract a particular part of an array and return it as a separate array, array_slice() is the ideal function for you to use.

array_slice() allows you to specify the start index, the length of the slice, and whether to preserve the keys of the original array. Here’s the basic syntax:

array_slice(arrayToSlice, startIndex, length, preserve)

• arrayToSlice is the array you want to use array_slice() on

• startIndex is the index you want to start the slicing from

• length is how far you want the slicing to go in the arrayToSlice. It is optional.

• preserve specifies whether you want the index(es) of the array to change or not. It’s a boolean.

The example below starts the slicing from the second element in the array, which means it’ll leave the first element out and return the others:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango", "Avocado", "Pineapple"];
$slicedArr = array_slice($myFruitsArr, 1);

print_r($slicedArr);

/*
Output:

Array
(
   [0] => Banana
   [1] => Cashew
   [2] => Mango
   [3] => Avocado
   [4] => Pineapple
)
*/

Don’t forget you can specify the number of items you want from the slicing by specifying a third optional argument:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango", "Avocado", "Pineapple"];
$slicedArr = array_slice($myFruitsArr, 1, 3);

print_r($slicedArr);

/*
Output:

Array
(
   [0] => Banana
   [1] => Cashew
   [2] => Mango
)
*/

If you want to preserve the indexes, you can specify a fourth optional boolean argument of true:

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango", "Avocado", "Pineapple"];
$slicedArr = array_slice($myFruitsArr, 1, 3, true);

print_r($slicedArr);

/*
Output:

Array
(
   [1] => Banana
   [2] => Cashew
   [3] => Mango
)
*/

The array_sum() Function

array_sum() adds all the numeric values in an array together and returns the result. The only parameter it takes is the array containing the numeric values.

$myNums = [5, 6, 9, 20, 1];

$total = array_sum($myNums);
echo $total; // 41

If used on an array containing strings, array_sum() throws the error Warning: array_sum(): Addition is not supported on type string in /location/index.php on line # :

$myFruitsArr = ["Apple", "Banana", "Cashew", "Mango", "Avocado", "Pineapple"];
$total = array_sum($myFruitsArr);

sum() function error

The array_merge() Function

array_merge() merges two or more arrays. That means it's ideal for combining multiple arrays into one giant array.

$array1 = [1, 2, 3];
$array2 = [4, 5, 6, 7, 8];

$result = array_merge($array1, $array2);

print_r($result);
/*
Output:


Array
(
   [0] => 1
   [1] => 2
   [2] => 3
   [3] => 4
   [4] => 5
   [5] => 6
   [6] => 7
   [7] => 8
)
*/

You can also use array_merge() on associative arrays:

$array1 = [
 'fname' => 'John',
 'sex' => 'male',
];


$array2 = [
 'lname' => 'Doe',
 'favColor' => 'red',
];

$result = array_merge($array1, $array2);
print_r($result);

/*
Output:

Array
(
   [fname] => John
   [sex] => male
   [lname] => Doe
   [favColor] => red
)
*/

If the arrays contain similar keys, the last one overrides the previous one(s) in the result:

$array1 = [
 'fname' => 'John',
 'sex' => 'male',
];


$array2 = [
 'fname' => 'Jane',
 'favColor' => 'red',
];

$result = array_merge($array1, $array2);
print_r($result);

/*
Output:

Array
(
   [fname] => Jane
   [sex] => male
   [favColor] => red
)
*/

If a single array is passed into array_merge() and the keys are not sequential integers starting from 0, but rather a sequence like 3, 7, 8, the resulting array will have its keys reindexed starting from 0:

$myArray = [3 => 'Barn', 7 => 'Silo', 8 => 'Tank'];
$res = array_merge($myArray);

print_r($res);

/*
Array
(
   [0] => Barn
   [1] => Silo
   [2] => Tank
)
*/

The array_filter() Function

The array_filter() function “filters” the items of an array based on a callback function you pass into it. You can use it to remove unnecessary items from an array.

If the callback function returns true for an element in the array, that element is included in the resulting array, otherwise, it is excluded.

array_filter() takes up to 3 arguments. The basic syntax looks like this:

array_filter(arrayToFilter, callbackFunction, flag)

• arrayToFilter is the array you want to filter. It’s a compulsory argument.

• callbackFunction is the callback function you want to apply to each element of the array. If not provided, all elements evaluated to true will be included in the result.

• flag specifies whether the array keys will be preserved or reindexed. Possible values are ARRAY_FILTER_USE_KEY, ARRAY_FILTER_USE_BOTH, and ARRAY_FILTER_USE_BOTH.

Here’s an example that gets the even numbers from an array of numbers:

$array = [76, 11, 12, 22, 13, 43, 54];
$getEvenNums = array_filter($array, function ($value) {
 return $value % 2 == 0;
});


print_r($getEvenNums);


/*
Array
(
   [0] => 76
   [2] => 12
   [3] => 22
   [6] => 54
)
*/

Here’s a more complex example of getting everyone with the first name “John” in a multidimensional associative array:

$persons = [
 ['first' => 'John', 'last' => 'Doe'],
 ['first' => 'Janet', 'last' => 'Jackson'],
 ['first' => 'John', 'last' => 'Smith'],
 ['first' => 'Jane', 'last' => 'Doe'],
 ['first' => 'David', 'last' => 'Lee'],
 ['first' => 'John', 'last' => 'Olga']
];


$personsWithJohnFirstnames = array_filter($persons, function ($person) {
 return $person['first'] === "John";
});

print_r($personsWithJohnFirstnames);

/*
Output:

Array
(
   [0] => Array
       (
           [first] => John
           [last] => Doe
       )

   [2] => Array
       (
           [first] => John
           [last] => Smith
       )

   [5] => Array
       (
           [first] => John
           [last] => Olga
       )

)
*/

Remember that if you pass in the array as the only argument, the resulting array will contain every item that evaluates to true:

$array = [9, 4, 10, 0, 3];
$result = array_filter($array);


print_r($result);


/*
Output:


Array
(
   [0] => 9
   [1] => 4
   [2] => 10
   [4] => 3
)
*/

The array_map() Function

The array_map() function transforms all the elements of an array based on a callback function passed into it. It then returns a new array containing the transformed elements.

You can think about array_map() as a more convenient way to "loop" through an array, even though it's technically not a loop.

array_map() takes two compulsory parameters – the callback function and the array you want to transform.

Here's an example in which all the numbers of an array are squared:

$numbers = [5, 8, 3, 4];

$squaredNumbers = array_map(function ($num) {
 return $num * $num;
}, $numbers);

print_r($squaredNumbers);

/*
Output:

Array
(
   [0] => 25
   [1] => 64
   [2] => 9
   [3] => 16
)
*/

You can also extract the callback function into a separate function and pass it in:

function squareNums($num)
{
 return $num * $num;
}

$numbers = [5, 8, 3, 4];
$squaredNumbers = array_map('squareNums', $numbers);

print_r($squaredNumbers);

/*
Output:

Array
(
   [0] => 25
   [1] => 64
   [2] => 9
   [3] => 16
)
*/

You can also use the array_map() function on an array of strings. The example below converts all the fruits in the $fruitsArr array to uppercase:

$fruitsArr = ['mango', 'apple', 'orange', 'strawberry'];

function toUpperCase($str)
{
 return strtoupper($str);
}

$uppercasedFruits = array_map('toUpperCase', $fruitsArr);

print_r($uppercasedFruits);

/*
Output:

Array
(
   [0] => MANGO
   [1] => APPLE
   [2] => ORANGE
   [3] => STRAWBERRY
)
*/

Here's an example using an associative array where all the values are prefixed with prefix_:

$fruitsArr = [
 'fruit1' => 'mango',
 'fruit2' => 'banana',
 'fruit3' => 'orange',
];


function addPrefixToFruits($fruit)
{
 return 'prefix_' . $fruit;
}

$prefixedFruits = array_map('addPrefixToFruits', $fruitsArr);

print_r($prefixedFruits);

/*
Output:

Array
(
   [fruit1] => prefix_mango
   [fruit2] => prefix_banana
   [fruit3] => prefix_orange
)
*/

Note: If you're wondering what the difference between array_map() and array_filter() is, the catch is that array_map() transforms all the elements of the array based on a callback function. In contrast, array_filter() returns any element of the array that matches the callback function passed into it.

The array_search() Function

The array_search() function is used to search for a given value within an array. If the value is found, it returns the key of the value, otherwise, it returns nothing.

array_search() takes up to 3 arguments. Here's the syntax:

array_search(valueToSearch, arrayToSearch, strict)

• valueToSearch is the value you're looking for

• arrayToSearch is the array in which you want to search for the value

• strict is an optional boolean argument that determines whether a strict comparison operator should be used in the search. It's false by default. But if set to true, it will search for identical elements in the array and return them. For example, "1" and 1.

Here's an example checking for the item Cashew in an array of fruits:

$myFruitsArr = [
 "fruit1" => "Apple",
 "fruit2" => "Banana",
 "fruit3" => "Cashew",
 "fruit4" => "Mango",
 "fruit5" => "Avocado",
 "fruit6" => "Pineapple"
];

$checkForCashew = array_search('Cashew', $myFruitsArr);

echo $checkForCashew; // fruit3

And if you use it on a regular array, it will still return the index of the array, which is the key under the hood:

$myFruitsArr = [
 "Apple",
 "Banana",
 "Cashew",
 "Mango",
 "Avocado",
 "Pineapple"
];


$CheckForCashew = array_search('Cashew', $myFruitsArr);


echo $CheckForCashew; // 2

The array_column() Function

The array_column() extracts a single column of values from a multi-dimensional array. It returns an array containing the values of a specified column from the input array.

That means array_column is useful when you want to make an array out of the column of an existing array.

array_column() takes up to 3 arguments. Here's the syntax:

array_column(parentArray, columKey, indexKey)

• parentArray: usually a multidimensional array, it's the array to extract the column of values from

• columnKey: the key or index of the column to extract values from. This can be an integer index or a string key representing the column name.

• indexKey (optional): the column to use as the index for the returned array. If omitted or set to null, numerical indexes are used.

The example below uses the name key of the array to create a new array:

$pupils = [
 ["id" => 1, "name" => "John", "score" => 90],
 ["id" => 2, "name" => "Jane", "score" => 79],
 ["id" => 3, "name" => "Will", "score" => 83],
 ["id" => 4, "name" => "Jill", "score" => 92],
 ["id" => 5, "name" => "steven", "score" => 100],
];

$arrayFromNameColumn = array_column($pupils, 'name');

print_r($arrayFromNameColumn);

/*
Output:

Array
(
   [0] => John
   [1] => Jane
   [2] => Will
   [3] => Jill
   [4] => steven
)
*/

Remember you can pass in another key in the array to make its values the indexes of the resulting array. I'll use the "id" for that:

$pupils = [
 ["id" => 1, "name" => "John", "score" => 90],
 ["id" => 2, "name" => "Jane", "score" => 79],
 ["id" => 3, "name" => "Will", "score" => 83],
 ["id" => 4, "name" => "Jill", "score" => 92],
 ["id" => 5, "name" => "steven", "score" => 100],
];

$arrayFromNameColumn = array_column($pupils, "name", "id");

print_r($arrayFromNameColumn);

/*
Output:



Array
(
   [1] => John
   [2] => Jane
   [3] => Will
   [4] => Jill
   [5] => steven
)
*/

The in_array() Function

in_array() is used to check if a particular element is in an array. It takes two compulsory parameters and one optional parameter.

Here's the syntax:

in_array(itemToSearch, arrayToSearchThrough, strict)

• itemToSearch is the element you're looking for. It's compulsory.

• arrayToSearchThrough is the array in which you want to search for itemToSearch. It's also compulsory.

• strict is a boolean value that lets you specify whether you want the search to be done with loose comparison (==) or strict comparison (===). It defaults to false.

Here's the in_array() function in action:

$myFruitsArr1 = ["Apple", "Banana", "Cashew", "Mango"];
var_dump(in_array("Banana", $myFruitsArr1)); // bool(true)
var_dump(in_array("banana", $myFruitsArr1)); // bool(false)

Because the result of in_array() is a boolean, it's commonly used in conditionals:

$myFruitsArr1 = ["Apple", "Banana", "Cashew", "Mango"];


if (in_array("Banana", $myFruitsArr1)) {
 echo "Banana is in the array"; // Banana is in the array
} else {
 echo "Banana is not in the array";
}

How to Loop Through Arrays in PHP

PHP provides the traditional for loop for iterating through both indexed and associative arrays. You can also use a cleaner forEach() function for the same purpose.

How to Loop through an Indexed Array

Here's the basic syntax for looping through an array with a for loop:

for ($i=0; $i < count($arr); $i++) {
 # do something with $arr ...
}

And here's that of foreach():

foreach ($arrs as $arr) {
 # do something with $arr
}

Here's an example using the for loop to loop through an array of strings:

$retiredBallers = ["Pele", "Maradona", "Zidane", "Lampard", "Okocha"];

for ($i = 0; $i < count($retiredBallers); $i++) {
 echo $retiredBallers[$i] . "<br>";
}

/*
Output:

Pele
Maradona
Zidane
Lampard
Okocha
*/

You can loop through numbers the same way:

for ($i = 0; $i < count($myNums); $i++) {
 echo $myNums[$i] . "<br>";
}

/*
Output:

45
8
90
2
5
*/

You can also print the index for each element of the array:

for ($i = 0; $i < count($myNums); $i++) {
 echo $myNums[$i] . " is at index " . $i . "<br>";
}

/*
Output:

45 is at index 0
8 is at index 1
90 is at index 2
2 is at index 3
5 is at index 4
*/

Don't forget you can use foreach to loop through any array too:

foreach ($retiredBallers as $retiredBaller) {
 echo $retiredBaller . "<br>";
}


/*
Pele
Maradona
Zidane
Lampard
Okocha
*/

You can get the index this way as well:

foreach ($retiredBallers as $key => $retiredBaller) {
 echo $retiredBaller . " is at index " . $key . "<br>";
}


/*
Pele is at index 0
Maradona is at index 1
Zidane is at index 2
Lampard is at index 3
Okocha is at index 4
*/

How to Loop through an Associative Array

An associative array can be complex with items nested deep into it. So, you have to get what you want from it instead of displaying everything in it.

Here's how I got the name and country of some retired footballers from a $retiredFootballers array:

$retiredFootballers = [
 [
   "name" => "Pele",
   "position" => "Forward",
   "country" => "Brazil",
   "club" => "Santos"
 ],


 [
   "name" => "Diego Maradona",
   "position" => "Attacking Midfielder",
   "country" => "Argentina",
   "club" => "Napoli"
 ],


 [
   "name" => "Zinedine Zidane",
   "position" => "Midfielder",
   "country" => "France",
   "club" => "Real Madrid"
 ],


 [
   "name" => "Ronaldinho",
   "position" => "Attacking Midfielder",
   "country" => "Brazil",
   "club" => "Barcelona"
 ],


 [
   "name" => "David Beckham",
   "position" => "Midfielder",
   "country" => "England",
   "club" => "Manchester United"
 ],
 [
   "name" => "Jay-Jay Okocha",
   "position" => "Midfielder",
   "country" => "Nigeria",
   "club" => "Bolton Wanderers"
 ]
];


for ($i = 0; $i < count($retiredFootballers); $i++) {
 echo $retiredFootballers[$i]["name"] . " is from " . $retiredFootballers[$i]["country"] . "<br>";
 echo "<hr>";
}

Doing the same with foreach() is cleaner because you don't need an $i variable:

foreach ($retiredFootballers as $retiredFootballer) {
 echo $retiredFootballer["name"] . " is from " . $retiredFootballer["country"] . "<br>";
 echo "<hr>";
}

How to Loop through an Array Inside the HTML Template

Any HTML in your PHP file is the template for that PHP file. This means you can do the looping inside the HTML, because you can write PHP inside that HTML.

Here's how you can do that:

<?php
$retiredBallers = ["Pele", "Maradona", "Zidane", "Lampard", "Okocha"];
?>

<h1 class="text-center mt-3 bd-highlight">Looping Through Arrays in PHP</h1>

 <h2 class="mx-5 mt-5">Some Retired Footballers</h2>

 <ul class="list-group mx-5" style="width: 25%;">
   <!-- The loop -->
   <?php for ($i = 0; $i < count($retiredBallers); $i++) : ?>
     <li class="list-group-item"> <?= $retiredBallers[$i] ?> </li>
   <?php endfor; ?>
 </ul>

You can do the same with foreach():

<?php
$retiredBallers = ["Pele", "Maradona", "Zidane", "Lampard", "Okocha"];
?>

<h1 class="text-center mt-3 bd-highlight">Looping Through Arrays in PHP</h1>

 <h2 class="mx-5 mt-5">Some Retired Footballers</h2>


 <ul class="list-group mx-5" style="width: 25%;">
   <!-- The loop -->
   <?php foreach ($retiredBallers as $retiredBaller) : ?>
     <li class="list-group-item"> <?= $retiredBaller ?> </li>
   <?php endforeach; ?>
 </ul>

Here's what that looks like in the browser:

Looping through arrays using PHP for loop inside HTML

Let's use foreach() to display the $retiredFootballers associative array too:

<h1 class="text-center mt-3 bd-highlight">Looping Through Arrays in PHP</h1>


 <h2 class="mx-5 mt-5">Some Retired Footballers</h2>


 <ul class="list-group mx-5" style="width: 25%;">
   <!-- The loop -->
   <?php foreach ($retiredFootballers as $retiredFootballer) : ?>
     <li class="list-group-item"> <?= $retiredFootballer["name"] . " is from " . $retiredFootballer["country"] ?> </li>
   <?php endforeach; ?>
 </ul>

Looping through arrays using PHP foreach function inside HTML

Conclusion

Learning how to work with arrays is a foundational step toward proficiency in PHP and web development. That's why this handbook walked you through the various capabilities of PHP arrays, from creation to manipulation and looping.

You should now be confident using arrays to effectively manage data in PHP, whether for simple lists with indexed arrays, or complex structures with associative and multidimensional arrays.

Moving forward, I encourage you to experiment with various array functions to improve your code and tackle different programming challenges. Also, consider exploring multidimensional and associative arrays for more complex data scenarios.

As you grow more proficient with PHP arrays, integrating them with database operations can further enhance your web applications. A good example is MongoDB, a NoSQL database that integrates seamlessly with PHP. Check out the MongoDB PHP docs for more info.

Also, look out for the second article of this series.

Keep coding!

Learning JavaScript empowers you to create dynamic and interactive web experiences. And it lets you to bring websites and web applications to life by adding functionality, interactivity, and real-time updates for a better user experience.

I recently had a 30 Days of JavaScript Tips challenge on Twitter (now, X) where I shared 30 different JavaScript tips with my followers daily for 30 days. I decided to compile those tips into one giant tutorial for campers and everyone else on the internet. That's why you're reading this.

Whether you're just getting started with JavaScript or you're already a seasoned JavaScript developer, you will take something away from this article.

What We'll Cover

• Tip 1: Use console.table() to Display Arrays and Objects in the Console
• Tip 2: Use Template Interpolation to Render Strings Instead of the Assignment Operator
• Tip 3: Convert Strings to Numbers with Unary Plus and Number Constructor
• Tip 4: You Don’t Need to Declare Every Variable with a Keyword
• Tip 5: Use console.group() with Multiple console.log() to Group Related Items to the Console
• Tip 6: Style your Console Output with the %c Specifier
• Tip 7: How Math.floor(Math.random() * n1 + n2) Generates a Random Number Between n1 and n2
• Tip 8: Methods of the Math Object
• Tip 9: Capitalize the First Letter of Any Word
• Tip 10: Destructure Arrays with Default Values to Avoid Getting undefined
• Tip 11: Use the Spread Operator to Copy and Merge Arrays
• Tip 12: Use Arrow Syntax to Write Shorter and More Elegant Functions
• Tip 13: Use Destructuring to Extract Properties from Objects
• Tip 14: Use the startsWith() and endsWith() String Methods to Get the Start and End of a String
• Tip 15: Use the trim(), trimStart(), and trimEnd() to Handle White Spaces
• Tip 16: Use replace() with the toUpperCase() and toLowerCase() Methods to Convert Between Cases
• Tip 17: Use the Array.from() Method to Create Arrays from Array-like Objects or Iterables
• Tip 18: Use the map() Method to Transform all the Elements of an Array
• Tip 19: Use the filter() Method to Filter Through Arrays
• Tip 21: Use the Web Audio API to Work with Audio Files
• Tip 22: Use the Web Video API to Work with Video Files
• Tip 23: Preserve Object Integrity by Sealing and Freezing Them
• Tip 24: Use async...await For Asynchronous Operations
• Tip 25: Clone Objects with the Spread Operator, Object.assign(), and JSON.parse()
• Tip 26: Remove Duplicates from an Array with Set and Map
• Tip 27: Map Through and Array and Flatten it with the flatMap() Method
• ip 28: Use the padStart() and padEnd() Methods to Pad a string with a Character
• Tip 29: Use the insertAdjacentHTML() method of DOM to Insert a String into the DOM
• Tip 30: Use the createTreeWalker() DOM Method to Traverse the DOM

Tip 1: Use console.table() to Display Arrays and Objects in the Console

console.log will display the array or object as usual, but console.table will tabularize the index and values for you.

Here's how it works with arrays:

const myArr = ['Kolade', 'Chelsea', 10, true];

console.log(myArr);
console.table(myArr);

Here's the output of console.log() and console.table():

You can see that in addition to tabularizing the array for you, it also shows it the way a console.log() would show it.

It works with objects the same way it works with arrays:

const myObj = {
  name: 'Kolade',
  luckyNum: 10,
  lovesFootball: true,
};

console.log(myObj);
console.table(myObj);

Tip 2: Use Template Interpolation to Render Strings Instead of the Assignment Operator

The template interpolation syntax is cleaner and more readable than the regular concatenation with plus (+). With template interpolation, you can conveniently embed variables in strings.

const name = 'John Doe';
const age = 20;

const plusConcat =
  'Hi there 👋🏽 \nMy name is ' + name + ' and I am ' + age + ' years old.';

const templateLiteralConcat = `Hi there 👋🏽 \nMy name is, ${name} and I am ${age} years old.`;

Tip 3: Convert Strings to Numbers with Unary Plus and Number Constructor

The unary plus operator (+) and number constructor (Number()) help you convert strings to numbers.

To convert the string to a number with unary, all you need to do is prepend the string with a plus sign. And to do it with the number constructor, wrap the number in Number()

const myNum = '5';

convertNum1 = +myNum;
convertNum2 = Number(myNum);

console.log(convertNum1, typeof convertNum1); // 5 'number'
console.log(convertNum2, typeof convertNum2); // 5 'number'

Tip 4: You Don’t Need to Declare Every Variable with a Keyword

Did you know that if you have multiple variables next to each other, you can avoid using const, let, or var to declare every variable after the first one?

The only caveat is that if you're declaring variables without a keyword, you must separate them with a comma (,) instead of a semi-colon.

This is it:

// declare multiple variables at once.
let x, y, z;

x = 1;
y = 2;
z = 3;

console.log(x, y, z); // 1, 2, 3

// declare other variables after the first one without the keyword.
const a = 'Hello',
  b = 'How are you today?',
  c = 'Are you coding today?';

console.log(a); // Hello
console.log(b); // How are you today?
console.log(c); // Are you coding today?

The above is the same as:

let x;
let y;
let z;

x = 1;
y = 2;
z = 3;

console.log(x, y, z); // 1, 2, 3

// declare other variables after the first one without the keyword.
const a = 'Hello';
const b = 'How are you today?';
const c = 'Are you coding today?';

console.log(a); // Hello
console.log(b); // How are you today?
console.log(c); // Are you coding today?

Tip 5: Use console.group() with Multiple console.log()s to Group Related Items to the Console

When you have multiple related items like username, bio, and so on and you want to log them to the console, you should use console.group() and console.groupEnd() to close the group.

This will give you a drop down list of all the items:

console.group('Bio:');

console.log('My name is Kolade');
console.warn("I don't like to be late");
console.error('You came late');

console.groupEnd();

Tip 6: Style your Console Output with the %c Specifier

%c is not a part of JavaScript itself. It's a format specifier provided by modern browsers for styling the console. Whne you want to use it, it has to be the first parameter in the console.log() method.

You can set the styling you want to apply to the console:

const styles = `padding: 15px;
                background-color: #2ecc71;
                color: black`;

console.log('%c Hello, Everyone!', styles);

Or you can put it in directly:

console.log(
  '%c Hello, Everyone!',
  'padding: 15px; background-color: #2ecc71; color: black'
);

Tip 7: How Math.floor(Math.random() * n1 + n2) Generates a Random Number Between n1 and n2

You've probably seen how Math.floor(Math.random() * n1 + n2) creates a random number between 2 numbers. You could have even used it yourself. But how does it work?

For example, Math.floor(Math.random() * 100 + 1) would generate a random number between 100 and 1, after it follows these processes:

• Math.random() generates a random floating point number between 0 and 1 – 0 inclusive but 1 exclusive
• With Math.random() * 100, the random number is now between 0 and 99 but still has long floating points
• Math.floor(Math.random() * 100) rounds the floating point number to the nearest integer between 0 and 99
• Math.floor(Math.random() * 100 + 1) adds 1 to the result and shifts the range to 1 - 100.

This infographic below also shows you how it works:

Tip 8: Methods of the Math Object

Here are several methods of the Math object and what they do:

let x;

// Get the square root of a number
x = Math.sqrt(9);

// convert a number to absolute value
x = Math.abs(-5); // 5

// Round up a number to the nearest whole number
x = Math.round(4.6);

// Round up a number
x = Math.ceil(4.2); // 5

// Round down a number
x = Math.floor(4.9); // 4

// Exponent of a number
x = Math.pow(2, 3); // 8

// Get the minimum number
x = Math.min(4, 5, 3); // 3

// Get the maximum number
x = Math.max(4, 5, 3); // 5

// Get a random number/decimal between 0 and 1
x = Math.random();

// Get a random number between 1 and 200
x = Math.floor(Math.random() * 200 + 1); // any number between and 200

console.log(x);

Tip 9: Capitalize the First Letter of Any Word

You can capitalize the first letter of any word by combining the chartAt(), toUpperCase(), and slice() methods.

With chartAt(0), you can get the first letter of the word and use the toUpperCase() method with it, then concatenate the rest of the letters with slice(1).

const str = 'john';
const capitalizedStr = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalizedStr(str)); // John
console.log(capitalizedStr('doe')); // Doe

Tip 10: Destructure Arrays with Default Values to Avoid Getting undefined

If you destructure with a default value, and the expected value is not present in the array or object during destructuring, the default value will be used instead. This helps prevent errors and ensures that your code gracefully handles missing data.

This is how it works with arrays:

// Destructuring without default values
const fruits = ['Apple', 'Banana'];
const [firstFruit, secondFruit, thirdFruit] = fruits;

console.log(firstFruit); // Apple
console.log(secondFruit); // Banana
console.log(thirdFruit); // undefined

// Destructuring with default values
const [fruit1, fruit2, fruit3 = 'Orange'] = fruits;

console.log(fruit1); // Apple
console.log(fruit2); // Banana
console.log(fruit3); // Orange

And this is how it works with objects:

// Without default values
const person = { name: 'John Doe', age: 30 };
const { name, age, occupation } = person;
console.log(name); // John Doe
console.log(age); // 30
console.log(occupation); // undefined

// With default values
const { firstName = 'John', lastName = 'Doe', gender = 'Male' } = person;
console.log(firstName); // John
console.log(lastName); // Doe
console.log(gender); // Male

Tip 11: Use the Spread Operator to Copy and Merge Arrays

You can use the spread operator in various scenarios, such as copying arrays, merging arrays, cloning objects, and passing multiple arguments to functions.

Here's how to use it to copy and merge arrays:

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // [1, 2, 3]

// merge two or more arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const mergedArray = [...arr1, ...arr2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6

Here's how you can clone objects with it:

const originalObj = { name: 'John', age: 30 };
const clonedObj = { ...originalObj };

console.log(clonedObj); // { name: 'John', age: 30 }

And below is how you can use it to pass multiple arguments into any function:

function addNumbers(a, b, c) {
  return a + b + c;
}

const numbers = [10, 12, 8];
const sum = addNumbers(...numbers);

console.log(sum); // 30

Tip 12: Use Arrow Syntax to Write Shorter and More Elegant Functions

Arrow functions provide a shorter syntax compared to traditional function expressions and have some unique features. Understanding arrow functions is essential for modern JavaScript development.

// Traditional Function Expression
function add1(a, b) {
  return a + b;
}

// Arrow Function
const add2 = (a, b) => a + b;

console.log(add1(1, 2)); // 3
console.log(add2(5, 8)); // 13

// Using Traditional Function Expression
const numbers1 = [3, 4];
const numbers2 = [2, 8];

const squared1 = numbers1.map(function (num) {
  return num * num;
});

// Using Arrow Function
const squared2 = numbers2.map((num) => num * num);

console.log(squared1); // [ 9, 16 ]
console.log(squared2); // [ 4, 64 ]

Tip 13: Use Destructuring to Extract Properties from Objects

Object destructuring is a powerful feature in JavaScript. It allows you to extract properties from objects and assign them to variables in a more concise and readable way compared to the traditional dot notation way.

Here's how to extract properties with destructuring:

const person = {
  name: 'John Doe',
  age: 30,
  gender: 'male',
};

// Traditional way
const name2 = person.name;
const age2 = person.age;
const gender2 = person.gender;

console.log(name, age, gender); // John Doe 30 male

// with destructuring
const { name, age, gender } = person;

console.log(name, age, gender);
// John Doe 30 male

Tip 14: Use the startsWith() and endsWith() String Methods to Get the Start and End of a String

The startsWith() and endsWith() methods help you determine if a string begins or ends with a specific substring. Since they both return true or false, they are handy for various string manipulations and conditional checks.

Here's their basic usage:

const message = 'Hello world';

console.log(message.startsWith('H')); // true
console.log(message.startsWith('h')); // false
console.log(message.endsWith('d')); // true
console.log(message.endsWith('D')); // false

With the two methods, you can programmatically extract a certain text or filename, as you can see below:

const files = [
  'text.txt',
  'document.txt',
  'image.jpg',
  'script.js',
  'docs.txt',
];

// Get .txt files
const textFiles = files.filter((file) => file.endsWith('.txt'));
console.log(textFiles); [ 'text.txt', 'document.txt', 'docs.txt' ]

Both the startsWith() and endsWith() methods also support optional start and end positions to limit the range of the string where the check is performed:

const text = 'Welcome to freeCodeCamp';

console.log(text.startsWith('W', 0)); // true
console.log(text.startsWith('freeCodeCamp', 11)); // true
console.log(text.endsWith('f', 11)); // false

Tip 15: Use the trim(), trimStart(), and trimEnd() to Handle White Spaces

The trim() method gets rid of white spaces at both ends of the string. The trimStart() gets rid of white spaces at the start of the string. And trimEnd() removes white spaces at the end of the string.

These three methods are useful when you need to clean up user inputs or remove leading/trailing whitespace from strings.

const greet = '   Hello world!   ';
console.log(greet.trim());
// Hello world!

const greet2 = '   Hello world!   ';
console.log(greet2.trimStart());
// Output: 'Hello, world!   '

const text = '   Hello world!   ';
console.log(text.trimEnd());
// Output: '   Hello world!'

const input = '   ';
if (input.trim() === '') {
  console.log('The input is empty but has whitespace characters.');
} else {
  console.log('The input contains non-whitespace characters.');
}

// Output: The input is empty but has whitespace characters.

Tip 16: Use replace() with the toUpperCase() and toLowerCase() Methods to Convert Between Cases

The toUpperCase () and toLowerCase() methods convert a string to uppercase and lowercase, while replace() takes a string and replaces it with a specified string.

replace() can also take regular expressions. So you can tailor that regex for a particular part of the string then use the toLowerCase() and toUpperCase() methods to convert between cases.

In the code snippet below, I used the regex (^|\s)\w/ to look for the first word and every other word after a space, then convert them to uppercase letters:

function toTitleCase(str) {
  return str.toLowerCase().replace(/(^|\s)\w/g, (match) => match.toUpperCase());
}

console.log(toTitleCase('welcome to twitter (now x)!'));
// Welcome To Twitter (now X)!

I was also able to convert to snake_case by using the regex /\s+/g to look for every space and replace them with underscore (_)

function toSnakeCase(str) {
  return str.toLowerCase().replace(/\s+/g, '_');
}

console.log(toSnakeCase('Convert this to snake case'));
// convert_this_to_snake_case

Don’t forget you can convert to cases without replace() and regex:

function toSentenceCase(str) {
  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

console.log(toSentenceCase('hELLo TwEePs! HOW ARE YOU TODAY?'));
// Hello tweeps! how are you today?

If you want to learn more about regular expressions, you can read my book on them here for free.

Tip 17: Use the Array.from() Method to Create Arrays from Array-like Objects or Iterables

Array-like objects or iterables include the multiple arguments you pass to function, and the DOM items you select with the querySelectorAll() method, for instance, list items.

This is how I created an array from a function argument and used the reduce() array method on them:

function sumArguments() {
  // The "arguments" object is array-like
  const argsArray = Array.from(arguments);
  return argsArray.reduce((acc, num) => acc + num, 0);
}

const result = sumArguments(1, 2, 3, 4, 5);
console.log(result); // Output: 15

And this is how I created an array from from a set of list items selected with quersySelectorAll():

<ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
   <li>List item 4</li>
</ul>

const listItems = document.querySelectorAll('li');
const itemsArray = Array.from(listItems);

itemsArray.forEach((item) => {
  console.log(item.textContent);
});

Tip 18: Use the map() Method to Transform all the Elements of an Array

The map() method is a higher-order array method. It allows you to transform elements of an array into new values, creating a new array with the same length as the original but with modified elements.

const numbers = [1, 4, 9, 16, 25];

const squareRoots = numbers.map((num) => Math.sqrt(num));
console.log(squareRoots); //[1, 2, 3, 4, 5]

const names = ['john', 'jane', 'smith'];

const capitalizedNames = names.map((name) => name.toUpperCase());
console.log(capitalizedNames); // ['JOHN', 'JANE', 'SMITH']

It is very common to use map() for showing items coming from an API or the ones you created yourself:

<ul id="item-list"></ul>

const items = ['Item 1', 'Item 2', 'Item 3'];

const itemList = document.querySelector('#item-list');

// Use map() to generate a list of <li> elements
const liElements = items.map((item) => {
  const li = document.createElement('li');
  li.textContent = item;
  li.style.color = 'crimson';
  return li;
});

// Append the <li> elements to the <ul>
liElements.forEach((li) => {
  itemList.appendChild(li);
});

Tip 19: Use the filter() Method to Filter Through Arrays

The filter() method is another array method that lets you create a new array with some elements that pass a specific test.

Here is a basic example in which I got all the even and odd numbers in an array:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

const oddNums = nums.filter((num) => num % 2 !== 0);
const evenNumbers = nums.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10, 12, 14]
console.log(oddNums); // [1,  3,  5,  7, 9, 11, 13, 15]

And here is a more complex example where I got all products less than $500:

const products = [
  { id: 1, name: 'Laptop', price: 1000 },
  { id: 2, name: 'Phone', price: 500 },
  { id: 3, name: 'Tablet', price: 300 },
  { id: 4, name: 'Headphones', price: 100 },
];

const cheapProducts = products.filter((product) => product.price < 500);

console.log(cheapProducts);
/*
[
  { id: 3, name: 'Tablet', price: 300 },
  { id: 4, name: 'Headphones', price: 100 }
]
*/

Tip 20: Use the forEach() Method to Loop Through Arrays

The forEach() method provides a cleaner and more expressive way to loop through arrays compared to traditional for loops.

const fruits = ['apple', 'banana', 'orange'];

// with for loop
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// with forEach() – cleaner!
fruits.forEach((fruit) => {
  console.log(fruit);
});

/*
Output: 
apple
banana
orange
*/

Tip 21: Use the Web Audio API to Work with Audio Files

The Web Audio API provides methods and properties for playing, pausing, controlling volume, and performing other audio-related tasks.

To play audio files or create a music player with the audio API, you have to use it in combination with the audio tag (<audio>).

Here's how I play, pause, and control the volume of a song:

<h1>Audio API</h1>

<audio id="my-audio" src="audio-file.mp3"></audio>
<div id="controls">
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <input type="range" id="volume" min="0" max="1" step="0.01" value="1" />
</div>

const audioElement = document.querySelector('#my-audio');
const playBtn = document.querySelector('#play');
const pauseBtn = document.querySelector('#pause');
const volume = document.querySelector('#volume');

// play audio with the play() method
playBtn.addEventListener('click', () => audioElement.play());

// pause audio with the pause() method
pauseBtn.addEventListener('click', () => audioElement.pause());

//adjust volume with the volume property
volume.addEventListener('change', () => (audioElement.volume = volume.value));

Read more on the web audio API on MDN.

Tip 22: Use the Web Video API to Work with Video Files

The web video API lets you play video files with themethods and properties built in to it.

Just like the audio API, you can play, pause, control volume of a video with the video API. You also have to use it in combination with the video tag (<video>).

<h1>Video API</h1>

<video id="my-video" src="video-file.mp4" poster="snail.jpg" width="500"
</video>

<div id="controls">
     <div id="current-time"></div>
     <button id="play">Play</button>
     <button id="pause">Pause</button>
</div>

const videoElement = document.querySelector('#my-video');
const playBtn = document.querySelector('#play');
const pauseBtn = document.querySelector('#pause');
const videoTime = document.querySelector('#current-time');

// play video with the play() method
playBtn.addEventListener('click', () => videoElement.play());

// pause video with the pause() method
pauseBtn.addEventListener('click', () => videoElement.pause());

// show video time with the currentTime property
videoElement.addEventListener('timeupdate', () => {
  videoTime.innerText = videoElement.currentTime.toFixed(2);
});

Read more on the web video API on MDN.

Tip 23: Preserve Object Integrity by Sealing and Freezing Them

To avoid tampering with your objects, you can seal them with Object.seal and freeze them with Object.freeze().

When you seal an object, you won't be able to add and remove properties anymore:

const person1 = {
  name: 'Kolade',
  luckyNum: 10,
  footballFan: true,
  club: 'Chelsea',
};

// seal the object with Object.seal()
Object.seal(person1);

console.log(person1.name); // Kolade

person1.favPet = 'Cat'; // You can't add entries to a sealed object
console.log(person1.favPet); // undefined

delete person1.club; // You can't remove entries from a sealed object
console.log(person1.club); // Chelsea

// You can still edit the property values
person1.name = 'Kolade Chris';
console.log(person1.name); // Kolade Chris

// check if the object is sealed and frozen with isSealed() and isFrozen()
console.log(Object.isSealed(person1)); // true
console.log(Object.isFrozen(person1)); // false

When you freeze an object, you can't add entries, and the object is sealed as well. This means you can't add to it and remove from it:

const person2 = {
  name: 'Jane',
  luckyNum: 11,
  footballFan: true,
  club: 'Man United',
};

// freeze the object with Object.freeze()
Object.freeze(person2);

console.log(person2.name); // Jane

person2.favPet = 'Cat'; // You can't add entries to a frozen object
console.log(person2.favPet); // undefined

person2.name = 'Jane Doe';
console.log(person2.name); // Jane – nothing changes

delete person2.club; // You can't remove entries from a frozen object
console.log(person2.club); // Man United

// check if the object is frozen and sealed with isFrozen() and isSealed()
console.log(Object.isFrozen(person2)); // true
console.log(Object.isSealed(person2)); // true
// isSealed() returns true because a frozen object is also a sealed object

The difference between Object.freeze() and Object.seal() is that Object.seal() allows you to modify the entries while Object.freeze() does not. This makes Object.freeze() stronger.

Tip 24: Use async...await For Asynchronous Operations

The async await syntax is more straightforward and cleaner to work with. So, instead of chaining multiple .then() while working with asynchronous data or operations that return a Promise, you should use async await.

Here's what chaining multiple .then()s looks like:

function fetchData1() {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then((res) => res.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(`There was an error: ${error}`));
}

Here's how you can refactor the same code to use async await:

async function fetchData2() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();
  console.log(data);
}

You can't use catch() with async await, so you should use try catch to handle errors:

async function fetchData3() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(`There was an error: ${error}`);
  }
}

You can also use arrow functions with async await:

const fetchData4 = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(`There was an error: ${error}`);
  }
};

Tip 25: Clone Objects with the Spread Operator, Object.assign(), and JSON.parse()

There are several ways and hacks with which you can clone objects, but the most commonly used ways are using the spread syntax (…), Object.assign() and JSON.parse().

const originalObject = {
  name: 'Kolade',
  luckyNum: 10,
  isFootballFan: true,
  club: 'Chelsea',
};

// clone with spread operator
const clonedObject1 = { ...originalObject };

// clone with Object.assign()
const clonedObject2 = Object.assign({}, originalObject);

// deep cloning with JSON.stringify() and JSON.parse()
const clonedObject3 = JSON.parse(JSON.stringify(originalObject));
console.table(clonedObject1);
console.table(clonedObject1);
console.table(clonedObject1);

You can also create a deep clone of an object with the structuredClone(). structuredClone() was added to the JavaScript language in ECMAScript 2019.

const clonedObject4 = structuredClone(originalObject);
console.table(clonedObject4);

Read more about the structuredClone() method on MDN.

Tip 26: Remove Duplicates from an Array with Set and Map

Set and Map are built-in data structures for storing collections of values, each with their own specific characteristics and use cases.

Both Set and Map do not allow duplicate values, so you can use them to remove duplicates from an array by spreading the array into them:

// create unique arrays with Set()
const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(arrayWithDuplicates)];

console.log(uniqueArray); // [1, 2, 3, 4, 5]

// create unique arrays with Map()
const fruitsWithDuplicates2 = [
  'Mango',
  'Cashew',
  'Barley',
  'Mango',
  'Barley',
  'Berry',
  'Cashew',
];
const uniqueFruitsWithDuplicates2 = [
  ...new Map(fruitsWithDuplicates2.map((item) => [item, true])).keys(),
];

console.log(uniqueFruitsWithDuplicates2);
// [ 'Mango', 'Cashew', 'Barley', 'Berry' ]

Tip 27: Map Through and Array and Flatten it with the flatMap() Method

If you want to map through a multidimensional array and you want to make sure all deeply nested items are aggregated into a single array, you can use the flatMap() method. This will flatten the array and map through it as well.

This is how you can achieve that by chaining .flat() to .map():

const numbers = [1, 2, 3, 4, 5];

const doubledAndSquared = numbers.map((num) => [num * 2, num * num]);
const flattenedArr = doubledAndSquared.flat();

console.log(doubledAndSquared); // [ [ 2, 1 ], [ 4, 4 ], [ 6, 9 ], [ 8, 16 ], [ 10, 25 ] ]
console.log(flattenedArr); //  [2, 1, 4, 4, 6, 9, 8, 16, 10, 25]

And this is how you can use flatMap() to do the same thing:

// combine map and flat
const combinedMapAndFlat = numbers.flatMap((num) => [num * 2, num * num]);

console.log(combinedMapAndFlat); // Output: [2, 1, 4, 4, 6, 9, 8, 16, 10, 25];

How cool is that?

Tip 28: Use the padStart() and padEnd() Methods to Pad a string with a Character

The padStart() and padEnd() are string methods that allow you to pad a string with a specified character to reach a target length. These methods are particularly handy for formatting strings and aligning text in columns.

Here is the basic usage:

const originalString = 'Hello';
const paddedString = originalString.padStart(10, '*');
console.log(paddedString); // *****Hello

const originalString2 = 'World';
const paddedString2 = originalString2.padEnd(10, '-');
console.log(paddedString2); // World-----

// combine both padStart() and padEnd()
const text = 'Hello';
const paddedText = text.padStart(10, '-').padEnd(15, '+');
console.log(paddedText); // -----Hello+++++

Here's how you can use both methods to align items in the console:

const products = [
  { name: 'Apples', price: 1.5 },
  { name: 'Bananas', price: 0.75 },
  { name: 'Oranges', price: 2 },
];

console.log('Product      Price');
console.log('-------------------');

products.forEach(({ name, price }) => {
  const paddedName = name.padEnd(10, ' ');
  const formattedPrice = price.toFixed(2).padStart(8, ' ');
  console.log(`${paddedName}${formattedPrice}`);
});

/*
Output:

Product      Price
-------------------
Apples        1.50
Bananas       0.75
Oranges       2.00
*/

And a better usage is formatting the time of a music or video player in the 00:00 of 00:00 format:

function formatTime(currentTime, totalTime) {
  // Helper function to pad a number with leading zeros
  const padWithZero = (num) => num.toString().padStart(2, '0');

  // Format current time in minutes:seconds
  const formattedCurrentTime = `${padWithZero(
    Math.floor(currentTime / 60)
  )}:${padWithZero(Math.floor(currentTime % 60))}`;

  // Format total time in minutes:seconds
  const formattedTotalTime = `${padWithZero(
    Math.floor(totalTime / 60)
  )}:${padWithZero(Math.floor(totalTime % 60))}`;

  // Combine formatted current time and total time with "of" in between
  return `${formattedCurrentTime} of ${formattedTotalTime}`;
}

// Example time values
const currentTimeInSeconds = 125; // Example of a current time in seconds
const totalTimeInSeconds = 3600; // Example of a total time in seconds

// Format the time and display the result
const formattedTime = formatTime(currentTimeInSeconds, totalTimeInSeconds);
console.log(formattedTime); // 02:05 of 60:00

Tip 29: Use the insertAdjacentHTML() method of DOM to Insert a String into the DOM

The insertAdjacentHTML() method of the DOM lets you insert a string of HTML at a specified position relative to a given element. This position could be 'beforeend', 'afterend', 'beforebegin', or 'afterbegin'.

Here's how it works:

<div id="content">
   <p>This is an example.</p>
</div>

<button id="add-button">Add Paragraph</button>

const addButton = document.getElementById('add-button');
const content = document.getElementById('content');

addButton.addEventListener('click', () => {
   const newParagraphHTML = '<p>This is a new paragraph.</p>';
   content.insertAdjacentHTML('afterend', newParagraphHTML);
});

Tip 30: Use the createTreeWalker() DOM Method to Traverse the DOM

The createTreeWalker() method allows you to traverse through the nodes of the DOM tree and perform actions on them based on specific criteria.

This method can be useful for complex document structures or specialized traversal needs.

<div id="content">
<p>This is a <span>paragraph</span> with some <em>emphasis</em>.</p>
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ul>
</div>

Use createTreeWalker() to traverse and show all text nodes:

const content = document.getElementById('content');
const treeWalker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);

let node;
while ((node = treeWalker.nextNode())) {
  console.log(node.nodeValue.trim());
}

N.B: White spaces qualify as a text node – that's why you can see the spaces in the output

Conclusion

Every code example in this article is from my 30 Days of JavaScript challenge on Twitter (now, X). You can checkout my Twitter profile.

I hope these tips help you understand some nuances of JavaScript and let you get some things done in your web projects.

Regular expressions can be intimidating when you first encounter them. When I started learning to code, I gave up on regular expressions twice.

While that was partly because I was intimidated by regular expressions at first, the tutorials and courses I used never taught them in a way I could understand.

In fact, before some tutorials start teaching regex, they complain about regex and how tough they can be. And there's no better way to discourage a learner than that.

In this book, you won't just see how to use regex in a regex testing tool like regexpal or regex101. You'll also see how they works in JavaScript. This is what many courses and tutorials tailored for regex in JavaScript lack. As you see how they work using a regex tester, you'll also see how they work in JavaScript.

You can also apply what you learn in this book to other programming languages like Python, PHP, and so on. All you need to do is to know about how the regex engine of that language works. You'll also need to understand the methods and functions the language uses for working with regular expressions.

To get the most out of this book, make sure you read it in order because each chapter builds upon the previous ones. I have also arranged the chapters according to how difficult they are. So, you will find simpler concepts first and more advanced concepts later.

Happy reading!

Table Of Contents

• Chapter 1: Introduction to Regular Expressions
  • What are Regular Expressions?
  • A Brief History of Regular Expressions
  • What are the Uses of Regular Expressions?
  • Flavors of Regular Expressions
  • Tools for Working with Regular Expressions
  • Basic Concepts of Regular Expressions
• Chapter 2: How to Match Literal Characters and Character Sets in Regular Expressions
  • What are Literal Characters in Regular Expressions?
  • How to Match Literal Characters in RegEx Testers
  • Character Set Matching
• Chapter 3: Regular Expressions Flags
  • The global Flag
  • The case-insensitive Flag
  • The multi-line and single-line Flags
  • The unicode Flags
  • The sticky Flags
• Chapter 4: How to Use Regular Expressions in JavaScript
  • How to Create Regular Expressions in JavaScript
  • Methods of the RegExp() Constructor
  • Properties of the RegExp() Constructor
  • String Methods for Working with Regular Expressions
  • How to Match Literal Characters in JavaScript Regular Expressions
  • How to Use Character Sets in JavaScript Regular Expressions
• Chapter 5: Metacharacters, Quantifiers, Repeated Matches, and Optional Matches
  • What are Metacharacters?
  • The Word and Non-word Metacharacters
  • The Anchor Metacharacters
  • The Digit and Non-digit Metacharacters
  • The Square Brackets Metacharacter
  • The Word Boundary and Non-word Boundary Metacharacters
  • The Parenthesis Metacharacter
  • The Space and Non-space Metacharacters
  • The Pipe Metacharacter
  • How to Match Repeated Characters With Qunatifiers
  • How to Specify Match Quantity with the Curly Braces Metacharacter
  • The Wildcard Metacharacter
  • Greediness and Laziness in Regular Expressions
• Chapter 6: Grouping and Capturing in Regex
  • How to Reference Captured Groups with Backreferences
  • How to Use the d Flag and hasIndices Property With Groups
• Chapter 7: Lookaround Groups: Lookaheads and Lookbehinds
  • What are Lookaround Groups?
  • What is a Lookahead Group?
  • What is a Lookbehind Group?
• Chapter 8: Regex Best Practices and Troubleshooting
  • Best Practices to Consider While Writing Regular Expressions
  • How to Write Accurate Regular Expressions
• Chapter 9: Applications of Regular Expressions
  • A Better Way to Match Dates
  • How to Match US Zip Codes
  • How to Match Email Addresses
  • How to Match Passwords
  • Form Validation with Regex
  • Article Table of Contents Generator
• Glossary and References
  • Glossary of Terms
  • Quick Reference of Metacharacters and Quantifiers

Chapter 1: Introduction to Regular Expressions

What are Regular Expressions?

You might see this written as regular expressions, regex, or RegExp – but all refer to the same thing.

Regex are a sequence of characters for matching a part of a string or the whole string. Matching strings with regular expressions might require more than just "characters". Many times, you will need to use a special set of characters called "metacharacters" and "quantifiers".

Because regular expressions are a powerful tool, you can use then to do much more than just "matching strings" when you combine regex with programming languages.

Almost all the main programming languages of the modern era have built-in support for regular expressions. Some programming languages might even have specific libraries that help you work more conveniently with regex.

Apart from using regular expressions in programming languages, other tools that let you use regular expressions are:

• Text Editors and IDEs: for search and search and replace in VS Code, Visual Studio, Notepad++, Sublime Text, and others.

• Browser Developer Tools: mostly in-browser search (with extensions or add-ons) and search within the developer tools.

• Database Tools: for data mining.

• RegEx Testers: you can paste in text and write the regular expressions to match them – which is a very good way to learn regular expressions. This book explores that option quite a bit.

A Brief History of Regular Expressions

Regular expressions have a rich and fascinating history that has already spanned more than seven decades. This history continues to evolve alongside the development of computer science and programming languages.

The concept of regular expressions traces back to the 1950s. American mathematician Stephen Cole Kleene introduced them as a notation for defining patterns in formal languages. Kleene's work also formed the foundation for theoretical computer science.

In the early 1960s, the first implementations of regular expressions emerged. Ken Thompson, a computer scientist at Bell Labs, developed a text editor named QED that utilized regular expressions for pattern matching. QED's capabilities provided a way to search and manipulate texts more efficiently.

The concept gained further popularity when Thompson and Dennis Ritchie created the Unix operating system in the early 1970s.

They incorporated regular expressions into various Unix utilities, most notably the ed text editor and later the sed stream editor. These tools allowed users to perform complex text manipulation tasks, significantly enhancing the efficiency and power of text processing.

In 1973, Thompson collaborated with Alfred Aho and Peter Weinberger to develop a new tool called grep (global regular expression print) as part of the Unix toolkit.

Grep allowed users to search files for specific patterns using regular expressions. The simplicity and effectiveness of grep made it a widely adopted tool. It also established regular expressions as a standard feature in Unix-based systems.

As computer systems and programming languages evolved, regular expressions became integrated into various software development environments. In the late 1970s, the AWK programming language was created. AWK inspired Larry Wall to create Perl and make it available to the public in 1987.

Wall recognized the value of regular expressions for text manipulation and integrated regex into Perl.

Perl's integration of regular expressions into its syntax made it a popular language for text matching and data extraction tasks. This integration formed the foundation of PCRE (Perl-compatible regular expressions), a flavor and library of regular expressions you can use in some programming languages such as Perl, Python, PHP, Java, and others.

Regular expressions continued to evolve and find applications beyond Unix and Perl. In the 1980s, the International Organization for Standardization (ISO) developed the POSIX standard, which included a specification for regular expressions. This standardization ensured compatibility and consistency across different implementations and systems.

With the rise of the internet and the World Wide Web in the 1990s, regular expressions found widespread use in web development and data processing. They became an essential component of many scripting languages, providing developers with powerful tools for text processing, form validation, and data extraction from web pages.

For example, JavaScript had always had a version of PCRE built in for working with regular expressions. But by 1999, with the release of ECMAScript, the RegExp() constructor was introduced. This gave JavaScript developers the ability to start using regular expressions directly in their code, in the JavaScript way.

In the early 2000s, tools and libraries specifically focused on regular expressions emerged, making it easier for developers to work with them. Libraries like PCRE (Perl Compatible Regular Expressions) provided enhanced features and better performance, further expanding the usage and capabilities of regular expressions.

Today, regular expressions are an integral part of programming languages and text-processing tools like your code editor. They are supported by almost all major programming languages, including Java, C#, Ruby, and PHP.

Integrated development environments (IDEs) and code editors like Visual Studio, VS Code, and Notepad++ also now include regex-based search and search and replace functionalities, simplifying the process of finding and manipulating texts in code.

The history of regular expressions demonstrates their evolution from theoretical concepts to practical tools that have revolutionized text processing and pattern matching.

From the early developments at Bell Labs and Unix to their integration into popular programming languages, regular expressions have become an essential tool in the hands of developers and system administrators. Regex empowers them to handle complex text-based tasks efficiently.

With the ongoing advancements in computing and the continuous demand for efficient text processing, regular expressions will likely remain a fundamental part of the technology landscape for years to come.

What are the Uses of Regular Expressions?

Regular expressions are quite versatile and flexible. This makes it possible to apply them to various tasks in various domains such as computer programming, data processing, text editing, and web development.

Those applications and uses include but are not limited to the following:

String Matching: This is one of the most common ways developers use regular expressions. This is also a good way to learn regular expressions.

You can paste some texts into a regex engine and write the regex to match a part of the text or the whole text. You can also search for strings that contain specific character sequences, start or end with certain characters, or match complex patterns.

This makes regular expressions valuable for tasks like searching for keywords, validating input against specific patterns, or filtering data based on string patterns

Password Strength Validation: You can use regular expressions for validating the strength of passwords in websites and applications.

By defining a set of rules using regular expressions, developers can enforce specific password requirements, such as a minimum number of characters, a combination of uppercase and lowercase letters, numbers, and special characters.

Form Validation: Validating inputs of a form or standalone inputs is another popular way developers use regular expressions.

Regular expressions provide a concise and efficient way to ensure that input data follows specific patterns or formats. Whether it's validating usernames, email addresses, phone numbers, credit card numbers, postal codes, or other inputs, regular expressions can help you enforce validation rules and maintain data integrity.

Text Search and Manipulation: Regular expressions excel at searching for specific patterns within text and performing manipulations based on those matches. They are a powerful tool for tasks such as data mining, log analysis, and text processing.

Whether you need to find occurrences of particular words or phrases, extract structured data from text, analyze content, or perform string matching, regular expressions offer efficient pattern-matching capabilities

Working with URLs and URIs: Since URLs and URIs are an integral part of web development, regular expressions can help in validating, parsing, and manipulating them. This enables developers to ensure the correctness and structure of web addresses, validate whether a string is a valid URL, and help extract specific components such as the domain, path, query parameters, or fragments.

This functionality is particularly useful in tasks like URL routing, rewriting, or extracting data from query parameters.

Search and Replace in IDEs and Text Editors: Regular expressions offer sophisticated search capabilities. This enables developers to locate specific patterns (such as words with specific prefixes or sequences of characters) and then replace the matches with a specified text. This is built into modern text editors like VS Code and Notepad++.

Data Extraction and Scraping: Regular expressions play a significant role in data extraction and web scraping. They allow developers to extract specific information from unstructured or semi-structured text by defining patterns to match desired data.

They are also valuable when extracting data from sources like HTML or XML documents, as they enable efficient retrieval of information based on defined patterns.

Syntax Highlighting: Regular expressions are commonly used in IDEs and text editors to provide syntax highlighting. This ends up helping users to visually distinguish different parts of a code or document by assigning colors or formatting to keywords, strings, comments, and other language-specific constructs.

Regular expressions are used to identify and match these language-specific patterns, making code more readable and enhancing the overall editing experience.

Flavors of Regular Expressions

The term "flavors of regular expressions" refers to the specific implementation and syntax variations of regular expressions in different programming languages, libraries, or tools.

While the core concept of regular expressions remains the same, the details of how regular expressions are written and interpreted can vary between different environments.

Each flavor of regular expressions may have its own set of metacharacters, syntax rules, and additional features beyond the basic functionality.

These differences can include variations in the syntax for character classes, metacharacters, capturing groups, and assertions, as well as additional capabilities like named capturing groups, look-ahead, and look-behinds.

There are many flavors of regular expressions available today. Some of them are:

• Basic Regular Expressions (BRE): this flavor is commonly found in Unix tools such as sed and grep. It uses a limited set of metacharacters and features. The wildcard (.) and zero or more (*) metacharacters are available in it.

• Extended Regular Expressions (ERE): ERE is an extension of BRE. It provides additional metacharacters and features. In addition to the metacharacters available in BRE, ERE introduces features like grouping with parentheses ( ( )), alternation with the pipe symbol (|), and the use of curly braces ({}) to specify repetition ranges.

• Perl-Compatible Regular Expressions (PCRE): PCRE is a popular flavor supported by various programming languages such as Perl, Python, PHP, and JavaScript. PCRE extends the basic regular expression syntax with powerful features like lookahead and look-behind assertions, backreferences, non-capturing groups, and the use of \b for word boundaries.

• JavaScript Regular Expressions: JavaScript has its regular expression flavor which is similar to PCRE but with a few differences. It supports basic features like character classes with square brackets ([ ]), metacharacters (*, +, ?, and others), and capturing groups (( )). JavaScript also provides additional features like the global flag /g to perform multiple matches, and the ignore case flag /i for case-insensitive matching

• Python Regular Expressions: Python's re module implements a flavor that is similar to PCRE but with a few variations. It supports features such as character classes [ ], metacharacters (*, +, and ?), and capturing groups (( )). The re module also has a unique raw string syntax (r' ') to simplify working with backslashes.

It's important to be aware of the flavor of regular expressions you are using when working with regular expressions in different programming languages or tools. This ensures that you use the correct syntax and take advantage of any unique features or capabilities provided by that particular flavor.

N.B.: Don’t bother so much about the metacharacters (and quantifiers) mentioned in this part. You will see them in action in chapter 5 of this book.

Tools for Working with Regular Expressions

Regular expression tools are the programming languages, libraries and frameworks, command line utilities, online regex testers, text editors and IDEs, and applications designed to help you create, test, and apply regular expressions in your day-to-day work life.

There are many tools available for working with regular expressions. Let me take you through them under regex testers, programming languages, libraries, text editors and IDEs, and command line tools.

RegEx Testers

RegEx testers are the online testing environments specifically built for creating and testing regular expressions against some test strings. Examples include regex101.com, regexr.com, and regexpal.com.

The UIs of these regex testers usually have an input for the regular expressions you want to write, and another for the text you want to test the regex against.

This is how the UI of regexpal.com looks:

More advanced ones like regex101.com let you select the flavor of regular expressions you want to work with, an explanation of the regex, and match information.

Here’s what the UI of regex101.com looks like:

One of the good things about these online regex testers is that they are helpful for learning regular expressions. A lot of them provide real-time matching and cheatsheets you can quickly look at. Many devs who use regex have used them.

Apart from learning, you can also use them by creating your regex with them and pasting them into wherever you want to use the regex. This is how I create my regex.

Programming Languages

Almost all modern programming languages have built-in support for regular expressions. And so they all have methods for creating and testing regular expressions.

For example, JavaScript has the RegExp() constructor for working with regular expressions, Python has the re module, Java has the java.util.regex package, and Perl has regex built into it directly.

Libraries and Frameworks

Many programming languages have standalone libraries and frameworks that make it easier to create regular expressions.

There is XRegExp for JavaScript, PCRE (Perl Compatible Regular Expressions) for Perl, Go-Restructure for Golang, and Verbal Expressions, a cross-platform regex library.

Text Editors and IDEs

Many text editors and IDEs such as VS Code, Visual Studio, Notpad++, Atom, Sublime Text, IntelliJ IDEA, and others have built-in support for regular expressions.

The commonest thing developers use this for is search, and search and replace. Also, the syntax highlighting in those text editors and IDEs is often implemented with regular expressions.

Command Line Tools

Unix command line tools like grep and sed allow you to perform regex operations on text files and streams. With this, you can search, filter, and manipulate multiple files.

Using these Unix tools, options for customizing search behaviors and customizing complex text transformations are also available to you.

Basic Concepts of Regular Expressions

The basic concepts and syntax of regular expressions are the building blocks involved in creating, testing, and applying patterns for searching, matching, and manipulating strings.

This includes concepts like literal characters, metacharacters, quantifiers, character classes, anchors and boundaries, and escape characters. The more advanced ones are groupings, backreferences, look-ahead assertions, and look-behind assertions.

Regular expressions users utilize many of these concepts to construct efficient regular expressions for working with text. On many occasions, the basic ones are enough. But if you want to create more advanced regular expressions, then the more advanced ones will also be useful for you.

This book won’t leave any of the concepts behind. I will show you how you can utilize them in regex testers and how you can use them in JavaScript since that’s what this book is meant for.

Chapter 2: How to Match Literal Characters and Character Sets in Regular Expressions

What are Literal Characters in Regular Expressions?

Literal characters are characters you can match as they appear in a test string. They could be letters, numbers, spaces, or even symbols. In other words, they are non-special characters that represent themselves.

This means if you want to match literal characters, you should construct your regex pattern in the same way as the test string appears.

For example, if you want to match the word hello, your regex pattern can be hello. And if you want to match the h in the word hatch, all you need as the pattern is h.

This h would match the first occurrence of the letter h in the test string hatch. If you want it to match the other letter h as well, you need the "g" flag, or global flag. You will learn about the flags and modifiers in the next chapter of this book.

That is not the case for some symbols, though. That’s because some symbols are special characters of regular expressions (metacharacters and quantifiers). So, if you want to match those characters, you have to escape them with a backslash (\). This book will also teach you all you need to know about metacharacters because there's a whole chapter for them.

How to Match Literal Characters in RegEx Testers

Provided you want to match the word hello, then hello should be your regex pattern:

If you want to match the text freeCodeCamp, you can construct your regex to be freeCodeCamp:

So, what if you want to match hello freeCodeCamp? Then you just use hello freeCodeCamp as the pattern:

If you want to match the letter e in the text freeCodeCamp, e is the pattern to use:

And if you want to match h in the text hatch, h is the pattern you should use:

You can see that in the text freeCodeCamp, the other es after the first occurrence were not returned as matches – same with the last h in the word hatch. You will learn how to match every occurrence of a letter in a text in the next chapter.

Character Set Matching

A character set, also called character class, is a set of characters that will successfully match a certain character in a test string. This set of characters is enclosed in square brackets.

For instance, the pattern [abc] will match any of a, b, and c, while [xyz] will match any of x, y, and z.

Here are some examples of character sets and what they do:

• [abc]: matches either a, b, or c
• [aeiou]: matches any vowel character
• [a-z]: matches any lowercase letter from a to z
• [A-Z]: matches any uppercase letter from A to Z
• [0-9]: matches any digit from 0 to 9

Inside the square brackets, you don’t need to escape metacharacters because they lose their special meaning. The only symbol that has a meaning in the square brackets is a hyphen (-), which you can use to specify ranges, as I have done with some examples of character sets.

You will also learn about ranges in this book. On some occasions, a backslash \ does not lose its special meaning in a character set.

As with literal character matching, only the first occurrence of the character set will return as a match, every other occurrence will be ignored. In the next chapter, you will learn how to match multiple occurrences of a character with the g flag.

Here’s how each of the above character sets works in a regex testing tool:

[abc]:

[aeiou]:

[a-z]:

[A-Z]:

[0-9]:

You can also define your unique character class based on what you want. Character sets are useful when you want to match some characters in a particular position in a text.

For instance, the pattern br[ao]ke will match both brake and broke:

The pattern gr[ae]y will match both gray and grey:

N.B.: I turned on the g flag so you can see all the matches, and how powerful character sets are. We will take a look at the g and other flags in the next chapter.

Since there are always multiple ways of doing the same thing in programming, there are also certain character sets called "shorthand character sets" that you can use instead of character sets.

Since these shorthand character sets are a subset of metacharacters, you will learn about them under the chapter dedicated to metacharacters.

Chapter 3: Regular Expressions Flags

Also called modifiers, flags are special characters you can place at the end or within a regular expressions pattern to alter its default behavior.

JavaScript developers tend to refer to these characters as "flags", but in Python they are used interchangeably.

In Python, you can place flags within a regex pattern, but in JavaScript, flags are always placed at the end of the regex pattern.

Here are the flags you can use in regular expressions:

• global flag
• case insensitive flag
• multi-line flag
• single-line flag
• unicode flag
• sticky flag

In many regex engines, you can turn on any flag you want to use. In regex101.com, you can turn on a flag by clicking on the slash symbol (/) right inside the pattern input:

You can then select any flag you want to use:

N.B.: If the flavor of regex you selected in regex101.com is not ECMAScript, the set of flags presented to you might be different.

If you are using regexpal.com, click on "flags" above the regex pattern input:

Select any flag you want by clicking on it:

Now, let's take a detailed look at each of the regex flags and how they work in a regex engine.

The global Flag

The global flag is denoted by the letter g. With it, you get to perform a global match with your pattern.

Remember in the previous chapter of this book, some patterns I defined stopped when they found the first match, even if there were more. That’s because by default, regular expressions only find the first match in a text. But with the g flag, all occurrences of the match are returned.

Another good thing about using the g flag is that you can iterate over the matches you get with the pattern in JavaScript. The iteration continues until there’s nothing to match. You will learn about multiple ways you can iterate over matches soon.

To let you see how the g flag works, I’ll use the hatch and freeCodeCamp examples from the previous chapter.

If you want to match the letters h in the word hatch with the pattern h, both the first and the last hs will be returned as matches as long as you have the g flag on:

And if you want to match e in freeCodeCamp with the pattern e and you turn on the g flag, the second and third es are returned as a match too:

The case-insensitive Flag

The case insensitive flag is denoted by i. As the name implies, it lets you perform case-insensitive matching.

By default, regular expressions perform case-sensitive matching. But with the i flag you can perform case-insensitive matching, so you won’t bother about casing in your patterns.

With this, uppercase or lowercase will be ignored. That means Hello and hello will be treated as the same thing:

freeCodeCamp and freecodecamp are treated the same, too:

RegEx and regex are also the same thing:

Another thing is that if you’re using a character class, for example [a-z], it would match uppercase letters too if you turn on the case-insensitive flag.

So, the pattern [a-z] also matches uppercase letters with the case-insensitive flag turned on:

The multi-line and single-line Flags

Denoted by m, the multi-line flag tells the regular expressions engine that the test string is more than one line. Since the multi-line flag influences the behavior of the start and end anchor metacharacters (^ and $), you’ll learn more about it under the anchors and word boundaries chapter.

The single-line flag is denoted by s. Just like the multi-line flag, the single-line flag also works with a metacharacter called the wildcard (.). You will see the single-line flag in action under the chapter for metacharacters.

The Unicode Flag

The Unicode flag enables full Unicode matching in the regular expressions engine that supports it. It is denoted by u.

By default, JavaScript and many other programming languages treat strings as a sequence of 16-bit code units. With the u flag, regex patterns can match against Unicode code points instead of code units. This allows handling characters like emojis, certain symbols, and characters from non-Latin scripts. So, when you set the flag, it modifies the behavior of certain escape sequences and metacharacters to work with regular expressions.

For example, the escape sequence \u{1F602} will match the literal character u{1F602} if you don’t turn on the u flag:

But if you turn on the u flag, the same pattern matches the face with tears emoji:

That is one way to match emojis and other Unicode characters. Take the Unicode of the emoji and put the hexadecimal in curly braces, then precede the two with \u.

For instance, the Unicode of growing heart is U+1F497, the pattern to match it would be \u{1F497}:

You will see more examples of how the flag works in the chapter on how to use regular expressions in JavaScript.

The sticky Flag

The sticky flag is denoted by y. It’s a feature of JavaScript regular expressions implemented in ECMAScript 6. The y flag limits matching to the current position in the string, which you can specify with the lastIndex property of the RegExp() constructor.

When you use the y flag, it uses the lastIndex property to determine where the next search will start. The pattern matches only if it occurs exactly at the lastIndex position or at the beginning of the string.

Unlike the global (g) flag, the y flag does not find all matches but stops after the first successful match.

In a regex engine like regex101.com, the y flag usually anchors to the start of the test string and stops there:

Since the y flag typically works with the lastIndex property of JavaScript regular expressions, we will look at more examples in the chapter on how to use regular expressions in JavaScript – specifically when we look at the sticky of the regular expressions constructor.

You can also combine multiple flags to write more complex syntax. For example, you can use the g flag with the i flag for global and case-insensitive matching:

Chapter 4: How to Use Regular Expressions in JavaScript

How to Create Regular Expressions in JavaScript

There are two ways you can create regular expressions in JavaScript. The first is with regex literal syntax and the second is with the RegExp() constructor.

To create a regular expression with the regex literal syntax, you have to enclose the pattern inside two forward slashes (/) like this:

/regex pattern/

If you want to use one or more flags, it has to be after the second slash:

/regex pattern/flag

Depending on your use case, you might have to assign the regex to a variable:

const regex = /regex pattern/flag

The flag could be any of the flags available in the JavaScript regular expressions engine.

If you want to create regular expressions with the RegExp() constructor, you have to use the new keyword, then put the pattern and the flag inside the RegExp() brackets.

This is what the syntax looks like:

const regex = new RegExp("regex pattern", "flag");

Since RegExp() is a constructor, there are some methods and properties available in it with which you can work with regular expressions. Whether you create your pattern with the literal syntax // or the RegExp() constructor, the methods and properties are available for it.

Methods of the RegExp() Constructor

The methods of the RegExp() constructor are defined on the RegExp.prototype. You can quickly check the methods (and properties) by typing RegExp().__proto__ and hitting ENTER in your browser console. These methods include test(), exec(), and toString().

Apart from those three, some methods take regular expressions as a parameter. But it is better to discuss them under "string methods for working with regular expressions" because, at their core, they are string methods that take regular expressions as a parameter.

Let’s take a look at what test(), exec(), and toString() do.

The test() Method

The test() method tests for a match between a regular expression and the test string and returns a boolean as the result. If there's a match, it returns true, and if there's no match, it returns false.

In the example below, there's a match for the pattern /freeCodeCamp/:

const re = /freeCodeCamp/;
const testStr =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp.";

console.log(re.test(testStr)); //true

But in the example below, there's no match for the pattern /fcc/, so the test() method returns false:

const re = /fcc/;
const testStr =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp.";

console.log(re.test(testStr)); //false

Apart from testing random patterns against a string, the test() method can be useful in form validation.

The exec() Method

The exec() method executes a search for a match in a test string and returns an array containing a piece of detailed information about the first match. If there's no match, it returns null.

That detailed information contains the first match, the index of the match, captured groups (if any), and the length.

Here's an example:

const re = /freeCodeCamp/;
const testStr =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp.";

console.log(re.exec(testStr));

And here’s a screenshot of the result:

If you want to make the exec() method return all the matches, you can use the g flag on the pattern and then loop through with a while loop:

const re = /freeCodeCamp/g;
const testStr =
  "freeCodeCamp is a great place to start learning to code from scratch. freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp.";

let match;

while ((match = re.exec(testStr)) !== null) {
  console.log(match[0]);
}

Here's what the result looks like in the console:

You can go further by accessing the index of the matches this way:

const re = /freeCodeCamp/g;
const testStr =
  "freeCodeCamp is a great place to start learning to code from scratch. freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp.";

let match;

while ((match = re.exec(testStr)) !== null) {
  console.log(match[0]);

  //   Access the indices of the matches
  console.log(match.index);
}

If there's no match, exec() returns null:

const re = /fcc/;
const testStr =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp.";

console.log(re.exec(testStr)); //null

The toString() Method

The toString() method converts a regex pattern to a string. In JavaScript, the toString() method is in every object. Regular expressions are treated as an object behind the scenes, that's why you can create them with the new keyword.

Using this method on a regex pattern converts the pattern to a string:

const pattern = /freeCodeCamp/;
const strPattern = pattern.toString();

console.log(strPattern, typeof strPattern); // /freeCodeCamp/ string

Even if you create the pattern with the RegExp() constructor, you get the result the same way:

const pattern = new RegExp('freeCodeCamp');
const strPattern = pattern.toString();

console.log(strPattern, typeof strPattern); // /freeCodeCamp/ string

And if you have a flag in the pattern, it would be returned as a part of the string:

const pattern = /freeCodeCamp/gi;
const strPattern = pattern.toString();

console.log(strPattern, typeof strPattern); // /freeCodeCamp/gi string

Properties of the RegExp() Constructor

The properties of the RegExp() constructor are defined on the RegExp.prototype. They include:

• RegExp.prototype.global
• RegExp.prototype.source
• RegExp.prototype.flags
• RegExp.prototype.multiline
• RegExp.prototype.ignoreCase
• RegExp.prototype.dotAll
• RegExp.prototype.sticky
• RegExp.prototype.unicode

In short, there are the global, source, flags, multiline, ignoreCase, dotAll, sticky, and unicode.

Most of the properties check whether a certain flag is used or not. Let's take a look at how each of the properties works.

The global Property

The global property checks whether the g flag is used with a regex pattern or not. If the pattern has the g flag, it returns true, otherwise it returns false.

Remember the global (g) flag indicates that the regex pattern should not just return the first match but all the matches.

Here's how the global property works in code:

const re1 = /freeCodeCamp/g;
const re2 = /freeCodeCamp/;
const re3 = new RegExp('freeCodeCamp');
const re4 = new RegExp('freeCodeCamp', 'g');

console.log(re1.global); //true
console.log(re2.global); //false
console.log(re3.global); //false
console.log(re4.global); //true

The flag Property

The flag property returns the flags you use in the regex pattern in alphabetical order. That is, g before i, i before m, m before y, and so on.

In the code below, you can see that the g flag comes before i, and m comes before y:

const re1 = /freeCodeCamp/gi;
const re2 = new RegExp('freeCodeCamp', 'my');

console.log(re1.flags); //gi
console.log(re2.flags); //my

The source Property

The source property returns the regex pattern as a string. So, it acts like the toString() method.

The difference between the source property and the toString() method is that the source property excludes the flag you use with the pattern. Also, the source property does not show the literal forward slashes you use for creating the regex.

In the code below, you can see the forward slashes don’t get printed, the flags are omitted too, and the type is a string:

const re1 = /freeCodeCamp/gi;
const re2 = new RegExp('freeCodeCamp', 'my');

const re1Source = re1.source;
const re2Source = re2.source;

console.log(re1Source, typeof re1Source); // freeCodeCamp string
console.log(re2Source, typeof re2Source); // freeCodeCamp string

The multiline Property

The multiline flag is another boolean property of the RegExp() constructor. It specifies whether the multiline flag is used with the pattern or not by returning true or false.

Remember the multiline (m) flag indicates that the test string should be treated as a text that has more than one line.

Here's how the multiline property works in action:

const re1 = /freeCodeCamp/gi;
const re2 = new RegExp('freeCodeCamp', 'my');

const re1Source = re1.multiline;
const re2Source = re2.multiline;

console.log(re1Source); //false
console.log(re2Source); // true

The ignoreCase Property

The ignoreCase property specifies whether the case-insensitive flag (i) is used in the regex pattern. It returns true if you use the i flag and false if you don’t use it.

const re1 = /freeCodeCamp/i;
const re2 = /freeCodeCamp/;
const re3 = new RegExp('freeCodeCamp', 'i');
const re4 = new RegExp('freeCodeCamp');

console.log(re1.ignoreCase); //true
console.log(re2.ignoreCase); // false
console.log(re3.ignoreCase); // true
console.log(re4.ignoreCase); // false

The Unicode Property

The unicode property helps you check whether the Unicode (u) flag is used in the regex pattern or not. If it finds the u flag, it returns true, otherwise it returns false.

const re1 = /\u{1F1F3}\u{1F1EC}/u; //matches the Nigerian flag emoji
const re2 = /\u{1F1F3}\u{1F1EC}/;
const re3 = new RegExp('\u{1F1F3}\u{1F1EC}', 'u');
const re4 = new RegExp('\u{1F1F3}\u{1F1EC}');

console.log(re1.unicode); //true
console.log(re2.unicode); // false
console.log(re3.unicode); // true
console.log(re4.unicode); // false

The sticky Property

The sticky property indicates whether the sticky (y) flag is set in the regular expression or not. Even though that's what it does, it's still a bit tricky to understand because of the lastIndex property.

When the y flag is set, the regex engine in use will attempt to match the pattern starting at the exact position specified by the lastIndex property (without using the g flag). If a match is found, the lastIndex property is updated to the position immediately after the end of the match.

To help you understand that better, here's a code snippet with comments:

const re = /xyz/y;
const str = 'xyzxyz';

re.lastIndex = 0;
console.log(re.test(str)); // true – there's a match at index 0 to 2
console.log(re.lastIndex); // 3

re.lastIndex = 1;
console.log(re.test(str)); // false – no match at the specified index
console.log(re.lastIndex); // 0 – resets to 0 because there's no match at the specified index

re.lastIndex = 3;
console.log(re.test(str)); // true – there's a match at index 3 to 5
console.log(re.lastIndex); // 6

re.lastIndex = 6;
console.log(re.test(str)); // false
console.log(re.lastIndex); // 0 – resets to 0 because there's no match at the specified index

N.B.: The dotAll property works with the wildcard (.) metacharacter. Due to that, you will see how it works in detail in the chapter on metacharacters. Also, hasIndices works with captures. So, you will see how to use it under the chapter on grouping and capturing.

String Methods for Working with Regular Expressions

JavaScript provides some inbuilt methods for working with strings. Some of these methods take regular expressions as a parameter. These methods include match(), matchAll(), replace(), replaceAll(), split(), and search().

Let's look at each of them one by one.

The search() Method

The search() method searches for the match of a regular expression in a string and returns the index of the match.

const myStr =
  "fCC is the abbreviation for freeCodeCamp. freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /freeCodeCamp/;
const searchFCC = myStr.search(re);

console.log(searchFCC); //28

If the search() method finds no match, it returns -1:

const myStr =
  "fCC is the abbreviation for freeCodeCamp. freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /FCC/;
const searchFCC = myStr.search(re);

console.log(searchFCC); //-1

You might be thinking using the g flag with the pattern would return the indices of all the matches, but this isn't the case. The g flag does not affect the search() method:

const myStr =
  "fCC is the abbreviation for freeCodeCamp. freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /freeCodeCamp/g; //pattern with g flag
const searchFCC = myStr.search(re);

console.log(searchFCC); //28

If you want to get the indices of all the matches, you should use the match() or matchAll() method.

The match() Method

The match() method lets you specify a regex pattern as the parameter, then it runs through the string you use it against and returns an array containing the substring(s) that match the regex pattern.

const my_str = 'freeCodeCamp';
match = my_str.match(/free/);

console.log(match); // [ 'free', index: 0, input: 'freeCodeCamp', groups: undefined ]

You can also separate the regex pattern into a separate variable:

const my_str = 'freeCodeCamp';
const re = /free/;
const match = my_str.match(re);

console.log(match); // [ 'free', index: 0, input: 'freeCodeCamp', groups: undefined ]

If match() finds multiple matches, it returns all of them in the array, provided you use the g flag in the pattern:

const my_str =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /free/g;
const match = my_str.match(re);

console.log(match); // ['free', 'free', 'free']

If you expand the array, this is what it looks like:

Since the result is an array, you should probably use console.table() instead of console.log() so you can see the indices of the matches:

const my_str =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /free/g;
const match = my_str.match(re);

console.table(match);

If the match() method finds no match, it returns null:

const my_str = 'freeCodeCamp';
const re = /ref/;
const match = my_str.match(re);

console.log(match); // null

The matchAll() Method

matchAll() is a hybrid of the match() method. It returns an iterator of all the substrings that match the regular expressions you provide. This means you have to use it with the global (g) flag.

Because it returns the iterator of all matches, matchAll() is a great option for looping through the matches of regular expressions.

An alternative to iterating through the matches of a regular expression is using the exec() method and g flag, then looping with a while loop this way:

const my_str =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /free/g;

let match;
while ((match = re.exec(my_str))) {
  console.log(match[0]); //
}

// free
// free
// free

With the matchAll() method, you don’t need the exec() and while loop. All you need is a for…of loop to get the matches:

const my_str =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /free/g;
const matches = my_str.matchAll(re);

console.log(matches); // RegExpStringIterator {}

//loop through the matches with a for...of loop
for (const match of matches) {
  console.log(match);
}

This returns each match, their index, the test string, the length, and groups in their respective arrays:

You can modify the console log to get only the matches and their index this way:

const my_str =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /free/g;
const matches = my_str.matchAll(re);

console.log(matches); // RegExpStringIterator {}

//loop through the matches with a for...of loop
for (const match of matches) {
  console.log(`Found a match ${match[0]} at index ${match.index}`);
}

/*
Output:
Found a match free at index 0
Found a match free at index 66
Found a match free at index 98
*/

You can also use the Array.from() method to do the same thing:

const my_str =
  "freeCodeCamp doesn't charge you any money, that's why it's called freeCodeCamp. Learn to code for free today.";
const re = /free/g;

Array.from(my_str.matchAll(re), (match) =>
  console.log(`Found a match ${match[0]} at index ${match.index}`)
);

/*
Output:
Found a match free at index 0
Found a match free at index 66
Found a match free at index 98
*/

If the matchAll() method finds no match, it returns an empty iterator. And if you decide to loop through that empty iterator, there'll be nothing to see in the console.

The replace() Method

The replace() method does what its name implies. It searches for matches of a specified string or regular expression in a string and replaces them with the specified replacement string. It returns a new string with the replacements applied.

The replace() method is not as straightforward as match() and matchAll() because it accepts two parameters – a regular expression and the replacement string. Any substring of the test string that matches the regular expressions is then replaced with the replacement string.

If the regular expression does not include the global (g) flag, only the first match is replaced:

const myStr =
  'Elephants are very large animals. They are large to the extent that they can uproot a large tree.';
const re = /large/;
const replaceLarge = myStr.replace(re, 'massive');

console.log(replaceLarge); // Elephants are very massive animals. They are large to the extent that they can uproot a large tree.

If you use the g flag in the pattern, all the matches are replaced:

const myStr =
  'Elephants are very large animals. They are large to the extent that they can uproot a large tree.';
const re = /large/g;
const replaceLarge = myStr.replace(re, 'massive');

console.log(replaceLarge); // Elephants are very massive animals. They are massive to the extent that they can uproot a massive tree.

The replaceAll() Method

The replaceAll() method is relatively new because it became available in ECMAScript 2021. It is a hybrid of replace().

Both replace() and replaceAll() do the same thing by taking a regular expression and a replacement string as parameters, and replacing all matches with the specified replacement string.

But unlike replace() which will only replace the first match if you don’t use the g flag, replaceAll() replaces all the matches by default:

const myStr =
  'Elephants are very large animals. They are large to the extent that they can uproot a large tree.';
const re = /large/g;
const replaceLarge = myStr.replaceAll(re, 'massive');

console.log(replaceLarge); // Elephants are very massive animals. They are massive to the extent that they can uproot a massive tree.

If you don’t use the g flag with replaceAll(), it throws a TypeError:

const myStr =
  'Elephants are very large animals. They are large to the extent that they can uproot a large tree.';
const re = /large/;
const replaceLarge = myStr.replaceAll(re, 'massive');

console.log(replaceLarge); // Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument
//    at String.replaceAll (<anonymous>)

The split() Method

The split() method takes a string or regex and splits the string you use it against into an array based on the string or regex you pass into it. The split() method also takes an optional limit parameter, a positive number. When you specify the limit, the splitting stops at that limit.

Wherever the split() finds a match, it creates a new item in the array. Here's how it works:

const myStr = "Codes don't lie. You're the one doing something wrong.";
const re = /\s/; // "\s" means white space - spacebar, backspace, tab, ENTER.

const splitedStr = myStr.split(re);
console.log(splitedStr);

/* 
Output:
[
  'Codes',  "don't",
  'lie.',   "You're",
  'the',    'one',
  'doing',  'something',
  'wrong.'
]
*/

Here's how to use the split() method with the limit parameter:

const myStr = "Codes don't lie. You're the one doing something wrong.";
const re = /\s/; // "\s" means white space - spacebar, backspace, tab, ENTER.

const splitedStr = myStr.split(re, 5); // 5 is the limit here
console.log(splitedStr);

/*
output: [ 'Codes', "don't", 'lie.', "You're", 'the' ]
*/

How to Match Literal Characters in JavaScript Regular Expressions

As I pointed out earlier, literal characters are texts or strings you will write patterns for as they are.

If you want to match the text hello, /hello/ should be your pattern. You can then use the i flag with it to match both hello and Hello:

const testString = 'hello';
const re = /hello/;
const re2 = /hello/i;

console.log(re.test(testString)); // true
console.log(re2.test(testString)); // true

If you want to match freeCodeCamp, the pattern should be just that. You can also create a pattern that matches freeCodeCamp in any case:

const testString = 'freeCodeCamp';
const re = /freeCodeCamp/;
const re2 = /freeCodeCamp/i; // match freeCodeCamp in any case

console.log(re.test(testString)); // true
console.log(re2.test(testString)); // true

You can also match digits using literal characters:

const num = 10234;
const re = /2/;

console.log(re.test(num)); //true

How to Use Character Sets in JavaScript Regular Expressions

As a reminder, a character set is a group of characters enclosed in square brackets. They provide a way to specify a set of characters from which the regex engine can match a single character at a specific position in a test string.

Character sets allow you to specify a range of characters, individual characters, or a combination of both.

Here are common examples of popular character sets in regular expressions:

• [abc]: matches either a, b, or c
• [aeiou]: matches any vowel character
• [a-z]: matches any lowercase letter from a to z
• [A-Z]: matches any uppercase letter from A to Z
• [0-9]: matches any digit from 0 to 9

Let's look at how to match each of the above character sets in JavaScript regular expressions:

// uppercase character set
const hcaseRe = /[A-Z]/;
const hcaseStr = 'freeCodeCamp is cool';

console.log(hcaseRe.test(hcaseStr)); //true

// vowels character set
const vowelsRe = /[aeiou]/;
const vowelsStr = 'Imagine how pronunciation would have been without vowels';

console.log(vowelsRe.test(vowelsStr)); //true

// [abc] character set
const abcSetRe = /[abc]/;
const abcSetStr = 'freeCodeCamp is totally free';

console.log(abcSetRe.test(abcSetStr)); //true

// number character set
const numRe = /[0-9]/;
const numStr = 'Thank God for Arabic numerals 0 to 9.';

console.log(numRe.test(numStr)); //true

Chapter 5: Metacharacters, Quantifiers, Repeated Matches, and Optional Matches

What are Metacharacters?

In regular expressions, metacharacters are characters that have special meanings beyond their literal meaning.

Metacharacters are the backbone of regular expressions. They serve as the building blocks for constructing better regex patterns and defining the behavior of the regular expression engine you're using, but with an extra learning curve.

This part of the book is where you will learn about topics such as:

• Anchors
• Word boundaries
• How to specify character ranges
• How to match every occurrence with the wildcard
• Alternation
• Greediness and laziness of regular expressions and how to prevent greediness

And lots more.

If you want to match any metacharacter as a literal character, you have to escape it with a backslash (\). And if there's a metacharacter represented by a word, you have to escape it with the backslash too. So, the backslash is also a separate metacharacter.

There's a metacharacter to negate most metacharacters. For instance, \b and \s represent the word boundary and space metacharacters. If you want to negate them, you can use \B and \S respectively. That's the pattern most metacharacters follow – the small letter is the metacharacter and the capital letter negates it.

Metacharacters are categorized into single and double metacharacters. As the name implies, single metacharacters have a "single" character and double metacharacters have a "double" character.

Most metacharacters are also called shorthand character classes. As we look at each metacharacter, you will see whether it is a single or double metacharacter.

The Word and Non-word Metacharacters

Represented by \w, the word metacharacter is a shorthand character class that matches all word characters. Word characters are alphanumeric characters and underscores. So, they are a-z, A-Z, 0-9, and underscore (_).

Here's what happens when you use \w in a regex tester:

And here’s how it works in JavaScript:

const testStr =
  'Every alphanumeric character (a to z and 0 to 9) and underscore (_) is a word character';
const wordCharacterRe = /\w/g;

console.log(testStr.match(wordCharacterRe));

Since word characters are alphanumeric characters and underscores, you can simulate the \w metacharacter by putting all the examples in a character set:

const testStr =
  'Every alphanumeric character (a to z and 0 to 9) and underscore (_) is a word character';
const wordCharacterRe = /[a-z A-Z 0-9_]/g;

console.log(testStr.match(wordCharacterRe));

The non-word metacharacter is the opposite of the word metacharacter and it is represented by an escaped capital letter W (\W).

The non-word metacharacter matches every other character apart from alphanumeric characters and the underscore. That includes spaces, punctuation marks, and symbols:

Here it is in action in some JavaScript code:

const testStr =
  'Every character apart from alphanumeric characters (a to z and 0 to 9) and underscore (_) is a non-word character';
const nonWordCharacterRe = /\W/g;

console.log(testStr.match(nonWordCharacterRe));

Since you can represent the word metacharacter by putting all the characters in a character set, you may be wondering how you can do the same for the non-word metacharacter.

That's where the negated character set comes in. The caret (^) is used for negation. It is one of the two anchor metacharacters, which we'll look at next.

The Anchor Metacharacters

Caret (^) and dollar sign ($) are the two anchor metacharacters. They are both single metacharacters.

The caret anchors the regex pattern to the start of a line or string, so you can call it a "start of line anchor".

For example, if you want to match the text "freeCodeCamp" and you want to make sure it's at the start of the line or a string, you can use the caret this way:

If the freeCodeCamp text is not at the start of the line, there won't be a match:

Here are the two cases in JavaScript code:

const testStr =
  "freeCodeCamp doesn't charge you any money. That's why it's called freeCodeCamp because. Learn to code for free today."; // has "freeCodeCamp" at the start of the line

const testStr2 =
  "It's called freeCodeCamp because freeCodeCamp doesn't charge you any money. Learn to code for free today."; // does not have "freeCodeCamp" at the start of the line

const startAnchorRe = /^freeCodeCamp/;

console.log(startAnchorRe.test(testStr)); //true
console.log(startAnchorRe.test(testStr2)); //false

The dollar sign metacharacter is the opposite of the caret. It anchors the regex pattern to the end of the line or string. So, there will only be a match if the target text is at the end of the line.

To use the $ metacharacter, it has to be the last character in your pattern:

If the target string has more than one line and the target text is at the end of each line, the last one matches:

To correct this behavior, you have to use both the g and m flags:

Here are all the cases in JavaScript code:

const testStr =
  "The lion is not the king of the jungle because of its strength, the lion is the king of the jungle because it's never intimidated";

const testStr2 = `The lion is not the king of the jungle because of its strength, the lion is the king of the jungle because it's never intimidated

This is another line that ends with intimidated

And this is the last line that ends with intimidated

And this is the last line that ends with intimidated`;

const re = /intimidated$/;
const re2 = /intimidated$/gm;

console.log(re.test(testStr)); // true
console.log(re.test(testStr2)); // true
console.log(re2.test(testStr2)); // true

If the target text is not at the end of the line, there won't be any match:

const testStr =
  "A lion can never be intimidated because it's the king of the jungle";
const re = /intimidated$/;

console.log(re.test(testStr)); // false

When you use both the dollar and caret metacharacters with the g and m flags, they don’t just match at the start and end of a line, they find the matches at the start and end of each line:

//dollar with g and m flags
const testStr1 = `The lion is not the king of the jungle because of its strength, the lion is the king of the jungle because it's never intimidated

Another line with intimidated

And another line with intimidated`;

const re1 = /intimidated$/gm;
const matches1 = testStr1.match(re1);

console.log(matches1); // [ 'intimidated', 'intimidated', 'intimidated' ]

// caret with g and m flags
const testStr = `freeCodeCamp doesn't charge you any money. That's why it's called freeCodeCamp because. Learn to code for free today.

freeCodeCamp starts this line

freeCodeCamp starts this line too
`;

const re2 = /^freeCodeCamp/gm;
const matches2 = testStr.match(re2);

console.log(matches2); // [ 'freeCodeCamp', 'freeCodeCamp', 'freeCodeCamp' ]

As I pointed out earlier, the caret metacharacter is typically used for negating a character set or any other character. With that, you tell the regex engine in use not to match that character or each of the character sets.

For example, if you have the pattern [^a], then all letters "a" in the test string won't be returned as matches:

If you have the pattern [^aeiou], all the vowels in the test string won't be returned as matches:

If you have the pattern [^a-zA-Z0-9_], that's equivalent to the non-word metacharacter (\W):

The Digit and Non-digit Metacharacters

The digit metacharacter is represented by \d. You can negate it with \D, so \D is the non-digit metacharacter.

\d matches all numbers (0 to 9), so it is a shorthand character class for [0-9]. So, if you have a string and you want to extract the numbers from it, you can use the \d metacharacter. But you have to use it with the g flag so it matches every number in the test string:

You can use the match() method to extract the numbers in JavaScript too:

const testStr =
  'Arabic numerals are 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. From those ten numbers, you can write any number you want, including nonillion and decillion.';

const re = /\d/g;

console.log(testStr.match(re));

/* output
[
  '0', '1', '2', '3',
  '4', '5', '6', '7',
  '8', '9'
]
*/

A more straightforward example is matching dates since dates are mostly in numbers. For example, if you want to match a date in the format dd/mm/yyyy, you can match it with the pattern /\d\d\/\d\d\/\d\d\d\d/:

const date = '22/04/2023';
const re = /\d\d\/\d\d\/\d\d\d\d/;

console.log(re.test(date)); // true

Since you can also have a period or hyphen as the separator of a date, you can account for those too by putting all the possible separators in a character set:

const slashSeparatedSate = '22/04/2023';
const hyphenSeparatedDate = '22-04-2023';
const periodSeparatedDate = '22.04.2023';

const re = /\d\d[/.-]\d\d[/.-]\d\d\d\d/;

console.log(re.test(slashSeparatedSate)); // true
console.log(re.test(hyphenSeparatedDate)); // true
console.log(re.test(periodSeparatedDate)); // true

N.B.: The pattern above matches a date but also an invalid date like 99/45/2022. A better way to match dates is provided in the applications of the regex chapter.

Another example is matching phone numbers. For example, US phone numbers are in the format (123) 456-7890. You can use the pattern /\(\d\d\d\) \d\d\d-\d\d\d\d/:

const USPhone = '(123) 456-7890';
const re = /\(\d\d\d\) \d\d\d-\d\d\d\d/;

console.log(re.test(USPhone)); // true

The non-digit metacharacter is the opposite of the digit metacharacter. It matches all non-digit characters. That is, alphabets, spaces, and symbols. In other words, it is the shorthand character class for [^0-9].

If you want to extract all non-digit characters in a string, you can use the \D metacharacter:

This is it in JavaScript code:

const testStr =
  'Arabic numerals are 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. From those ten numbers, you can write any number you want, including nonillion and decillion.';

const re = /\D/g;

console.log(testStr.match(re));

/* output
A total of 137 matches is too much to show here, but you can test it out yourself.
*/

The Square Brackets Metacharacter

You've already seen the square brackets ([]) metacharacter in action. Square brackets are used for specifying a character class, or character set. And if you want to match them as a literal character, then you have to escape them.

One thing to have in mind is that some metacharacters lose their meanings inside the character set. The exceptions to this are:

• The caret (^) which you can use to negate a character set
• The hyphen (-) which you can use to specify ranges

N.B.: Sometimes, you might encounter a situation where you have to escape some metacharacters inside a character set.

If you want to match any of those characters in a character set, you have to escape it. If you are just passing the three of those characters in directly, you don't need to escape them if the caret is not the first character.

const testStr =
  'If you want to match the caret (^), hyphen and (-) symbols in a character set, you might not have to escape them.';

const re = /[-^]/g;

console.log(testStr.match(re)); // [ '^', '-' ]

But if the caret is the first character in the character set alongside some word and non-word character, you should escape it, otherwise it will negate all other characters:

The Word Boundary and Non-word Boundary Metacharacters

The word boundary metacharacter is represented by \b and the non-word boundary metacharacter is represented by \B. Both let you match a specific part of a string where a word character and a non-word character exist.

Word boundary (\b) matches a position between a word character (\w) and a non-word character (\W), and vice versa. It can be useful when you want to match a certain word in a string, or if you want to make sure a particular word or character is in a string.

Here's an example in a regex tester:

And the same example in JavaScript code:

const myStr =
  'A Tiger can do everything a lion does, apart from being a family man.';
const re = /\blion\b/;

console.log(myStr.match(re));

/*
Output:
[
  'lion',
  index: 28,
  input: 'A Tiger can do everything a lion does, apart from being a family man.',
  groups: undefined
]
*/

If you use a g flag with the pattern and use the match() method, all the matches will be returned – as expected:

const myStr =
  'A Tiger can do everything a lion does, apart from being a family man. Not even a tiger can intimidate a lion within his family.';
const re = /\blion\b/g;

console.log(myStr.match(re)); // [ 'lion', 'lion' ]

On the other hand, the non-word boundary (\B) is the opposite of the word boundary (\b). So, it matches everywhere a word boundary won't return a match. For example, "thin" in "everything":

And also "code" in "freeCodeCamp" when you use the case insensitive (i) flag:

You can see that the first "code" in the text wasn't the match returned. That's the power of word and non-word boundary metacharacters.

Here's what the two reveal in JavaScript code:

const myStr1 =
  'A Tiger can do everything a lion does, apart from being a family man.';
const myStr2 = 'Learn to code for free on freeCodeCamp.';

const re1 = /\Bthin\B/;
const re2 = /\Bcode\B/i;

console.log(myStr1.match(re1));
console.log(myStr2.match(re2));

/*
Output:
[
  'thin',
  index: 20,
  input: 'A Tiger can do everything a lion does, apart from being a family man.',
  groups: undefined
]
[
  'Code',
  index: 30,
  input: 'Learn to code for free on freeCodeCamp.',
  groups: undefined
]
*/

The Parenthesis Metacharacter

The parenthesis metacharacters (( and )) let you create grouping and capturing. With them, you can treat any group of characters as a single unit and apply a common modifier or quantifier to them.

Parenthesis is also used for creating both lookahead and lookbehind assertions.

When you create the group and assertions, you can reference them later in the same pattern with a backslash and the order in which they appear. For example, you can reference the first group by specifying \1 in the pattern.

In this book, a whole chapter is dedicated to grouping and capturing. There, you will learn more about grouping and capturing so you can see the parenthesis metacharacters in action.

The Space and Non-space Metacharacters

It is impossible for text to make sense without spaces. Not just a "space", but also other space characters like tabs, carriage returns, and new lines. This is why the space and non-space metacharacters are made available in regular expressions.

The space metacharacter is represented by \s and the non-space metacharacter is represented by \S.

\s matches all space characters:

And \S matches all non-space metacharacters:

Here's how both the \s and \S metacharacters work in JavaScript code:

const myStr = 'Learn to code for free on freeCodeCamp';
const spaceRe = /\s/g;
const nonSpaceRe = /\S/g;

console.log(myStr.match(spaceRe)); // [' ', ' ', ' ', ' ', ' ', ' '];

console.log(myStr.match(nonSpaceRe)); 
// [
// 'L', 'e', 'a', 'r', 'n', 't',
// 'o', 'c', 'o', 'd', 'e', 'f',
// 'o', 'r', 'f', 'r', 'e', 'e',
// 'o', 'n', 'f', 'r', 'e', 'e',
// 'C', 'o', 'd', 'e', 'C', 'a',
// 'm', 'p'
// ]

One cool thing you can do with \s in JavaScript is to replace all spaces with say, a hyphen, or any other thing you want:

const myStr = 'Learn to code for free on freeCodeCamp';
const replaceHyphen = myStr.replace(spaceRe, '-');

console.log(replaceHyphen); // Learn-to-code-for-free-on-freeCodeCamp

The space metacharacter does not just match the spacebar you press on the keyboard of your device. It also matches:

• A tab character
• A carriage return character
• A new line character
• A vertical tab character
• And a form feed character

Here's an example:

You can't see the match for the carriage return but it's there:

If you want to match each of those space characters, they also have their unique metacharacters:

• \t for tab
• \r for carriage return
• \n for new line
• \v for vertical tab
• \f for form feed.

You should be aware that most of the time, \s is all you need because it can do the matching for any space character.

The Pipe Metacharacter

Also known as the OR operator, the pipe metacharacter is represented by the pipe symbol (|). It lets you specify multiple alternatives for matching.

The pipe matches the character preceding it, or the character that follows it. For example, if you have website|web\sapp as your pattern, then one or both of website and web app will be returned as the match:

The evaluation goes from left to right. If a match is found on the left, it returns the match. And if there's no match on the left, the character on the right-hand side is evaluated for a possible match. If both characters on the left and right are in the test string, then both are returned as matches.

You can also have more than two characters separated by the pipe symbols. For instance, the pattern /o|a|i|re/ would match o, a, i, and re:

There's no limit to the characters you can separate with it.

You can see I used the g flag in those examples. If you don’t use the g flag and both the left and right characters are matches, only the first match in the test string will be returned:

Here's a clearer example:

Here's how using the OR operator works with the g flag in code:

const myStr = 'The website and web app are running fine';
const re = /website|web\sapp/g;

console.log(myStr.match(re)); // returns [ 'website', 'web app' ] because of the g flag

And here's how it works without the g flag:

const myStr = 'The website and web app are running fine';
const re = /website|web\sapp/;

const matches = myStr.match(re);

for (const match of matches) {
  console.log(match); // returns "website" and ignores web app because there's no g flag
}

How to Match Repeated Characters With Quantifiers

Repeated characters occur when the same character exists in multiple numbers consecutively.

When you have a repeated character in your test string, you don't need to repeat a particular character in your pattern to match it. That's because there are metacharacters available for one or more matches, zero or more matches, and zero or one matches, AKA optional matches.

One or More Matches with the Addition Sign Metacharacter

As you can guess, the addition sign metacharacter is represented with a plus (+). You can also call it the "one or more quantifier".

If you want a particular character to be repeated one or many times, that's what the addition sign metacharacter does.

For example, the pattern, /fe+d/ will match any word with one letter e or multiple letters e that occur consecutively. For instance, fed and feed:

A practical example in JavaScript is extracting vowels in a test string while limiting occurrences by making sure multiple vowels that follow one another are also returned:

const myStr = 'You should plant trees to save mother earth';
const re = /[aeiou]+/gi;

console.log(myStr.match(re));

/*
Output:
[
  'ou', 'ou', 'a',
  'ee', 'o',  'a',
  'e',  'o',  'e',
  'ea'
]
*/

You can also append the addition sign metacharacter to other metacharacters. For example, /\d+/ would match one or more digits:

You can also add the + metacharacter to a character set to repeat it one or more times. In the screenshot below, the pattern /f[a-z]+/ would match one or more letter f followed by any set of small letters:

Zero or More Matches with the Asterisk Metacharacter

The asterisk metacharacter (*) matches zero or many occurrences of the character it comes after. You can also call it a "zero or more quantifier".

So, if you want a character to be repeated zero or more than one time, you can use the asterisk metacharacter. A basic example is using the pattern /go*d/ would match any word that starts with the letter g followed by any number of the letter o, and ending with the letter d:

Just like you can do with the plus metacharacter, you can also append the asterisk metacharacter to any other metacharacter. For example, you can match empty strings with the pattern /\s*/:

Doubting that? Here it is in JavaScript code:

const re = /\s*/;
const emptyString = '';

console.log(re.test(emptyString)); // true

I didn’t know matching empty strings was as straightforward as this until I got to this point in the book!

Again, like the plus metacharacter, you can also add the * metacharacter to a character set to repeat it zero or more times:

Here's the same thing in JavaScript code:

const myStr = 'You can make yourself free from diseases';
const re = /f[a-z]*/g;

console.log(myStr.match(re)); // [ 'f', 'free', 'from' ]

You can see the f in the word yourself is even a match too. That's one way to deduce that the asterisk (*) returns more matches than the addition sign (+) metacharacter because it is greedier. You will learn about greediness of a regular expression in the closing part of this chapter.

Zero or One Matches with the Question Mark Metacharacter

The question mark metacharacter (?) is also known as the zero or one quantifier. It lets you make the character that precedes it optional, so it plays an important role in preventing greediness.

For example, the pattern /ab?c/ will match abc and ac, but never abbbc or any other numbers of b between the a and c:

This is not the case with the other two metacharacters for matching repeated characters (+ and *). The pattern /ab*c/ will match all of abc, ac, abbbc, and abbbbbbbc while /ab+c/ will leave out ac:

const myStr = 'abc ac abbbc abbbbbbbc';
const re1 = /ab*c/g;
const re2 = /ab+c/g;
const re3 = /ab?c/g;

console.log(myStr.match(re1)); // [ 'abc', 'ac', 'abbbc', 'abbbbbbbc' ]
console.log(myStr.match(re2)); // [ 'abc', 'abbbc', 'abbbbbbbc' ]
console.log(myStr.match(re3)); // [ 'abc', 'ac' ]

A better example is tailoring a regex pattern to match words that have different spellings due to the small variations in British and American English. For example, color and colour:

There's also centre and center:

You can extract those words in JavaScript. You can't use the match() method for that because it causes some unexpected behaviors when used with the ? metacharacter.

Here's how I was able to do it for color and colour:

const myStr = 'The words center and centre are homophones';
const re = /cente?re?/g;

let match;
const matches = [];

while ((match = re.exec(myStr)) !== null) {
  matches.push(match[0]);
}

console.log(matches); // ["center", "centre"]

I used the same approach to extract center and centre:

const myStr =
  'It is "colour" in British English and "color" in American English';
const re = /colou?r/g;

let match;
const matches = [];

while ((match = re.exec(myStr)) !== null) {
  matches.push(match[0]);
}

console.log(matches); // [ 'colour', 'color' ]

Many times, it's challenging knowing which to use for character repetition between these three metacharacters – *, +, and ?. It can even be hard to get used to what each of them does if you're just starting out with regular expressions.

Be aware that identifying them and knowing which to use between them is not a herculean task. Here are some things to note about the three of them:

• Asterisk (*) means "zero or many": use it if you want a character not to appear in the target string or you want the same character to be more than one
• Plus (+) means "one or many": use it if you want a character to appear once or more than once in the target string
• Question mark (?) means "zero or one": use it if you want a character to be optional in the target string.

How to Specify Match Quantity with the Curly Braces Metacharacter

Quantifiers let you indicate the quantity or frequency of a preceding character in a pattern with curly braces ({}}. With those braces, you can specify an exact quantifier, a minimum quantifier, and a range quantifier.

The Range Quantifier

The general syntax for the range quantifier looks like this:

char{n1,n2}

• cha is any character you're applying the quantifier to
• n1 is the minimum number of times you want the character to repeat
• n2 is the maximum number of times you want the character to repeat

An example is the pattern /a{3,6}/. This means you want to match between three and six letters a:

If you have more than six letters a in the test string, the first six will match:

To fix this, you can surround the pattern in a word boundary:

You can also attach the range quantifier to metacharacters. For example, you can extract any number that is at least in hundreds this way:

const myStr =
  'The marathon had 500 participants, with 251 finishing under 3 hours, and the winner crossed the line at 4800 seconds.';
const re = /\b\d{3,6}\b/g;

console.log(myStr.match(re)); // [ '500', '251', '4800' ]

The Minimum Quantifier

The minimum quantifier lets you specify the minimum number of times you want the character that precedes it to match. You can do this by putting a comma right after the number in the curly brace. The general syntax looks like this: {n,}.

For example, the pattern /a{3,}/ means you want a minimum of three letters a. In this case, one letter a and two letters a won't be a match, but three letters a and upward would be returned as matches:

Let's extract those matches with the match() method:

const myStr =
  '"a" won\'t match here. "aa" won\'t match too, but "aaa" is a match, "aaaa" is also a match, and every other number of "a"';
const re = /a{3,}/g;

console.log(myStr.match(re)); // [ 'aaa', 'aaaa' ]

The Exact Quantifier

The exact specifier is represented by {n}. In this case, n stands for the exact number of times you want that character to be repeated. For instance, the pattern, /a{3}/ means you want a to be repeated three times

Unfortunately, a match is returned anywhere there are three letters a that follow one another. You can prevent this behavior with word boundary (\b):

That way, you can extract the abbreviations, AAA from a string using the match() method. Below is an example:

const myStr =
  "There is American automobile association (AAA)and there is Australian automobile association (AAA). What I've never seen is AAAA or AAAAAA.";
const re = /\ba{3}\b/gi;

console.log(myStr.match(re)); // [ 'AAA', 'AAA' ]

Remember the pattern I wrote to match dates in the dd/mm/yyyy format? You can make it better and easier to read with the exact quantifier like this:

\d{2}[/.-]\d{2}[/.-]\d{4}

Everything still works fine:

const slashSeparatedSate = '22/04/2023';
const hyphenSeparatedDate = '22-04-2023';
const periodSeparatedDate = '22.04.2023';

const re = /\d{2}[/.-]\d{2}[/.-]\d{4}/;

console.log(re.test(slashSeparatedSate)); // true
console.log(re.test(hyphenSeparatedDate)); // true
console.log(re.test(periodSeparatedDate)); // true

You can also make the pattern that matches the US phone number better and shorter with the same approach:

\(\d{3}\) \d{3}-\d{4}

Everything still works fine too:

const USPhone = '(123) 456-7890';
const re = /\(\d{3}\) \d{3}-\d{4}/;

console.log(re.test(USPhone)); // true

The Wildcard Metacharacter

The wildcard metacharacter is represented by a dot (.), so you can also call it the dot metacharacter.

The wildcard lets you match any character apart from a new line (\n). That means you can use it to match alphanumeric characters, spaces, and symbols.

You can also attach the wildcard metacharacter to another metacharacter. For example, the pattern /\d./g should match at least a number and everything that follows it:

You can see that the pattern is transcending beyond the digits by matching the spaces after them. This is what is called greediness.

The pattern, /\d.*/g is even more greedy because it will match everything after it encounters the first number:

It’s the same in code:

const myStr =
  'An example of a two-digit number is 20. 100 is a three-digit number. 300 and 900 are also three-digit numbers.';
const re = /\d.*/g;

console.log(myStr.match(re)); // [ '20. 100 is a three-digit number. 300 and 900 are also three-digit numbers.']

If you want the wildcard to match a new line too, you can use the s flag. Here's an example:

let codeBlock = `
  function add(x, y) {
    /* This is a function
    that takes two numbers
    and adds them together. */
    return x + y;
  }
`;

let commentRegex = /\/\*(.*)\*\//s; // gets everything between /* and */

const match = codeBlock.match(commentRegex);
console.log(match);

Here's the result:

You can use the dotAll property to check if the s flag is used in the pattern:

let codeBlock = `
  function add(x, y) {
    /* This is a function
    that takes two numbers
    and adds them together. */
    return x + y;
  }
`;

let commentRegex = /\/\*(.*)\*\//s; // gets everything between /* and */
const match = codeBlock.match(commentRegex);

console.log(commentRegex.dotAll) // true;

You can extract the match with an if statement:

let codeBlock = `
  function add(x, y) {
    /* This is a function
    that takes two numbers
    and adds them together. */
    return x + y;
  }
`;

let commentRegex = /\/\*(.*)\*\//s; // gets everything between /* and */

const match = codeBlock.match(commentRegex);

if (match) {
  console.log(match[1]);
}

/*
Output:  
This is a function
    that takes two numbers
    and adds them together.
*/

Because the wildcard always matches any character it encounters apart from a new line, it is better not to use it unless it is absolutely necessary. For every character the wildcard matches, there is always another way to match it.

Greediness and Laziness in Regular Expressions

By default, regular expression patterns are greedy, meaning they always try to match as many as possible characters. But the concept of greediness is primarily applicable to quantifiers (*, +, ?, and {}) and the wildcard (.).

For Example, the pattern /f.*h/gi will match as many characters as possible after encountering an f in the target string:

Same for the pattern, /f.*h/gi:

It’s the same in code:

const myStr = 'The fresh fish was caught in the Finnish lake';
const re = /f.*h/gi;

console.log(myStr.match(re)); // [ 'fresh fish was caught in the Finnish' ]

Laziness is the opposite of greediness and it’s the way you stop greediness. On many occasions, if you want to stop greediness, all you need is to apply the zero or ones quantifier (?) to the metacharacter causing the greediness.

Here's how I stopped the greediness of the asterisk metacharacter:

I stopped it for the plus metacharacter the same way:

I can now safely extract every word that starts with f and ends with h:

const myStr = 'The fresh fish was caught in the Finnish lake';
const re = /f.*?h/gi;

console.log(myStr.match(re)); // [ 'fresh', 'fish', 'Finnish' ]

Chapter 6: Grouping and Capturing in Regex

What is Grouping?

Grouping means treating a regex pattern or a part of a regex pattern as a single unit. To achieve grouping, you surround the pattern or the part of the pattern you want to group in parenthesis (( and )).

After you've grouped the part of the pattern you want to, you can then refer back to it through a process we call "backreferencing" in regular expressions.

The groups you define in a pattern refer to the target string or text and not the pattern itself. You'll see this in action when it's time to discuss backreferencing.

After grouping, you can then apply a quantifier to that group since all the patterns in it are a unit.

Let's say you have a group of the ids z8g4g4 ga1v4g f4k7f9 bb3b2b d6b4t5 d4cm3d e9f5y6 ggj64 mgtyqg m0foh9 and you want to find out which of them follow the pattern letter number letter number letter number. The pattern [a-z]\d[a-z]\d[a-z]\d can do that for you:

Using grouping, you can make the pattern shorter by grouping the [a-z]\d sequence and applying an exact quantifier of 3 to it:

([a-z]\d){3}

When you use grouping in a pattern, especially if you have multiple groups in the same pattern, you can use the exec() method to extract each of the groups.

A good example to illustrate this is a date in any acceptable format, for example dd/mm/yyyy.

Here's how I group the pattern \d\d[/.-]\d\d[/.-]\d\d\d\d into dd, mm, and yyyy:

(\d\d)[/.-](\d\d)[/.-](\d\d\d\d)

I used the exec() method this way:

const re = /(\d\d)[/.-](\d\d)[/.-](\d\d\d\d)/;
const date = '22-03-2023';

const execRes = re.exec(date);
console.log(execRes);

This is what the result looks like in the console:

In the array, you can see that:

• there is the whole date in the index 0
• the index 1 has the day
• the index 2 has the month`
• and the index 3 has the year

You can then use array referencing to get all of those figures:

const re = /(\d\d)[/.-](\d\d)[/.-](\d\d\d\d)/;
const date = '22-03-2023';

const execRes = re.exec(date);

console.log(`The full date is ${execRes[0]}`); // The full date is 22-03-2023
console.log(`The day is ${execRes[1]}`); // The day is 22
console.log(`The month is ${execRes[2]}`); // The month is 03
console.log(`The year is ${execRes[3]}`); // The year is 2023

You can also use this approach to extract a username and domain from an email:

function extractUsernameAndDomain(email) {
  const re = /([a-z]{2,})@([a-z]{3,}\.com)/;
  const result = re.exec(email);

  console.log(`The username is ${result[1]}`);
  console.log(`The domain is ${result[2]}`);
  console.log(`The full email is ${result[0]}`);
}

extractUsernameAndDomain('janedoe@gmail.com');

/*
Output:
The username is janedoe
The domain is gmail.com
The full email is janedoe@gmail.com
*/

This behavior of grouping in which each match of the pattern is separated in an array according to the groups is the reason groups are also called "capturing" groups. This way, you don’t need the split() method of JavaScript or any other programming hacks to get each of the groups on those dates.

How to Reference Captured Groups with Backreferences

Since groups are captured by default, you can refer back to them. To do this, you use a backslash (\) and then the order of the group in the pattern. For example, you can reference the first group with \1 and the third group with \3. No zero indentation.

Let's say you want to match "tsetse" fly in the text There are many tsetse flies in the tropics. If you group the text "tse" first and use the g flag, you'll get two matches:

You can refer back to that tse group with \1 and you'll have a single match:

It's very important to note that when you use a capturing group, the grouping refers to the target string (or text) and not the pattern itself. The reason why the pattern /(tse)\1/ returns a match in the last example is because of the "tse" in the text and not the "tse" in the pattern.

To illustrate this, let's use a date again, since the month or date and the separators can repeat and can be different. I will use the pattern (\d\d)([/.-])\1\2(\d\d\d\d) for matching dates that I grouped in one of the previous examples. Remember the pattern successfully matches a date:

I can group the separator too and refer back to it for the second separator. I can also refer back to the day part of the date to match the month, since they both look for two digits.

Here's the new pattern now:

(\d\d)([/.-])\1\2(\d\d\d\d)

I can make the pattern shorter with an exact quantifier:

(\d{2})([/.-])\1\2(\d{4})

The new pattern successfully matches the same date:

But the reason there's a match in the example above is that the separators are the same and the day and month are the same.

If the day is different from the month, there won't be a match:

If the separators are different too, there also won't be a match:

But remember that if both are the same, there will be a match:

That is the reason why the groups in a pattern refer to the target string (or text) and not the pattern itself.

It is also possible to make a group non-capturing. That way, you won't be able to refer to it in the pattern. To create a non-capturing group, you use a question mark and a colon right after the opening parenthesis.

The syntax for that looks like this:

(?: chars)

Because of this, the text does not match the pattern anymore. To make it match again I have to:

• remove the first backreference (\1)
• define \d{2} for the date
• change the reference to the separator from \2 to \1

Here’s the new pattern:

(?:\d{2})([/.-])\d{2}\1(\d{4})

And now the date matches the pattern:

How to Use the d Flag and hasIndices Property with Groups

The d flag adds index information to match objects for capture groups. This way, you won't just know what was matched by each capture group, but also where that match was found in the input string.

Let's look at how this works with the grouping for matching dates:

const re = /(\d\d)[/.-](\d\d)[/.-](\d\d\d\d)/d;
const date = '22-03-2023';

const match = re.exec(date);
console.log(match);

The result contains an array of objects detailing the total position of all matches, and the position of each match:

If you want to see those indices, you can use .indices to see them:

const re = /(\d\d)[/.-](\d\d)[/.-](\d\d\d\d)/d;
const date = '22-03-2023';

const match = re.exec(date);

console.log(match.indices);

You can also extract those indices separately:

const re = /(\d\d)[/.-](\d\d)[/.-](\d\d\d\d)/d;
const date = '22-03-2023';

const match = re.exec(date);

console.log(`The full index range is ${match.indices[0]}`); //The full index range is 0,10
console.log(`The day index range is ${match.indices[1]}`); // The day index range is 0,2
console.log(`The month index range is ${match.indices[2]}`); // The month index range is 3,5
console.log(`The year index range is ${match.indices[3]}`); // The year index range is 6,10

And finally, you can check if the d flag is really used with the hasIndices property:

const re = /(\d\d)[/.-](\d\d)[/.-](\d\d\d\d)/d;
const date = '22-03-2023';

console.log(re.hasIndices); // true

Chapter 7: Lookaround Groups: Lookaheads and Lookbehinds

What are Lookaround Groups?

Lookaround assertions are non-capturing groups that return matches only if the target string is followed or preceded by a particular character.

Lookaround assertions do not consume the characters in the input string or text. This makes them a "zero-width assertion", and that's why lookaround groups are also called "lookahead assertions".

There are two types of lookaround groups: lookahead and lookbehind. The two also have their positive and negative forms, so there are positive lookahead, negative lookahead, positive lookbehind, and negative lookbehind groups.

What is a Lookahead Group?

A lookahead group is a non-capturing group that lets you match a part of a string only if it is followed by another character in the string, without including that string or text to match in the pattern.

A lookahead group is useful when you want to match a string based on a condition. So, look at it like an if statement in a programming language.

There are two types of lookaheads, namely positive lookahead and negative lookahead.

Because you're still dealing with groupings, a positive lookahead is specified by an opening parenthesis followed by a question mark, an equal sign, the characters, and a closing parenthesis:

(?=chars)

For example, the pattern x(?=y) means match x only if it is followed by y.

In the syntax of negative lookahead, you replace the equal sign with an exclamation mark:

(?!chars)

For example, the pattern x(?!y) means do not match x if it is followed by y.

Let's look at an example of a positive lookahead assertion.

Say you want to match the domain name of domains that have only the .org extension within a string of domains with other extensions. This pattern would do it:

[a-zA-Z]+(?=\.org)

In the pattern, [a-zA-Z]+ represents one or more word characters, and (?=\.org) checks whether the domain contains a .org extension.

In the screenshot below, you can see that domain names that have a .org extension were matched:

You also can see that the words "freeCodeCamp" and "catholic" were not included in the pattern, but they still matched the pattern because they have the .org extension.

If there are no domains with the .org extension in the target string, there won't be any match. That's true for the domains without the .org extension.

That way, you can extract text like that in JavaScript and do whatever you want with it:

const domains = 'koladechris.com freeCodeCamp.org mdn.com catholic.org';
const re = /[a-zA-Z]+(?=\.org)/g;

const charityWebsitesArr = domains.match(re);
const charityWebsites = charityWebsitesArr.join(',').replace(/,/, ' and ');

console.log(charityWebsites, 'are examples of charity organizations.'); //freeCodeCamp and catholic are examples of charity organizations.

If you want to match the .org as well so the whole domain gets matched, you have to include the .org in the pattern:

Since lookahead groups don’t consume characters, you will see a lot of developers use positive lookaheads to validate passwords.

Let's say you want the password to be at least six characters that includes a lowercase letter, an uppercase letter, a number, and a symbol. You can use lookaheads to define all of those conditions:

• (?=.{6,}) ¬– at least 6 characters
• (?=.*[a-z]) – at least one lowercase character, but check if there are zero or many characters before it
• (?=.*[A-Z]) – at least one lowercase character, but check if there are zero or many characters before it
• (?=.*[0-9]) – at least one number, but check if there are zero or many characters before it
• (?=.*[!@#$%%^&*()+=-]) – accepted symbols, but check if there are zero or many characters before each
• .* – check if there are zero or many characters after the groups

Here's the full regular expression:

(?=.{6,})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%%^&*()+=-]).*

And here is what matches the pattern and what does not:

To use that pattern in JavaScript, you can test it against a password string and do something from there:

const password = 'Tse23*';
const passwordRe =
  /(?=.{6,})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%%^&*()+=-]).*/;

if (passwordRe.test(password)) {
  console.log('Welcome to your dashboard!');
} else {
  throw new Error('Incorrect password!');
}

/**
output: Welcome to your dashboard!
*/

For the application of negative lookahead, it is useful when you don't want a certain character before the character(s) you are looking for in a string.

Let's say you want to extract all items of an array that do not have the article "the" before them. In that case, you can use the pattern below:

/^(?!.*\bThe\b).*$/

In the pattern above:

• ^ ensures the regex pattern matches from the start of the line
• (?!.*\bThe\b) is the negative lookbehind that ensures that the article "the" is not in the target string
• \bThe\b is a word boundary that matches "The" and nothing else
• .* the wildcard that matches any character apart from a new line

let docTitles = [
  'The Incredible Dr. Poll',
  'Born in Africa',
  "America's Funniest Home Videos",
  'The Lion Queen',
  'Snake in the City',
];
let re = /^(?!.*\bThe\b).*$/;

for (let title of docTitles) {
  if (re.test(title)) {
    console.log(`A Title without "The": ${title}`);
  }
}

/*
Output:
A Title without "The": Born in Africa
A Title without "The": America's funniest home videos
A Title without "The": Snake in the City
*/

What is a Lookbehind Group?

A lookbehind group is similar to lookahead group. But instead of checking if a certain character(s) follows what you're trying to match, it checks whether the character(s) precedes what you're trying to match.

So, a lookbehind group is a non-capturing group that lets you match a part of a string only if it is preceded by another character in the string, without including that string or text to match in the pattern.

Like lookaheads, there are also positive and negative lookbehind assertions. A positive lookbehind returns a match only if the character you want to match is preceded by another character you specify in your pattern. On the other hand, a negative lookbehind returns a match only if the character you want to match is not preceded by another character.

A positive lookbehind is represented by an opening parenthesis, a question mark, a less than symbol, an equals sign, the character(s), and a closing parenthesis:

(?<=chars)

For example, the pattern (?<=x)y indicates you want to match y only if there's x before it. In this case, xx or yx won't match, but xy would match.

For a negative lookbehind, an exclamation mark replaces the equals sign:

(?<!chars)

For example, the pattern (?<!x)y means do not match y if there's x before it. In this case by would match, my, would match, but never xy.

Positive lookbehind groups can be useful for matching numbers preceded only by a certain currency symbol, for example numbers preceded by the dollar sign.

The regex pattern below has a positive lookbehind that matches a number only if it is preceded by a dollar sign:

(?<=\$)\d+(\.\d*)?

In the pattern above, the lookbehind ((?<=\$)) checks whether there's a dollar sign before one or more digits (represented by \d+). The other group, (\.\d*), and the zero or one quantifier (?) check whether the number contains floating points.

Here's what matches and what does not:

In JavaScript, what you can do with the numbers that match is to calculate the total with the reduce() method:

const myStr =
  '10 pieces of the items cost $102.99, but you can get 15 for a discount of $2, and 20 for a discount of $3.99';

const re = /(?<=\$)\d+(\.\d*)?/g;

// put all the prices in an array
const allPrices = myStr.match(re); // [ '102.99', '2', '3.99' ]

// convert each of the prices to a number with map() and unary plus
const allPricesToNum = allPrices.map((price) => +price); // [ 102.99, 2, 3.99 ]

// add all the numbers with reduce()
const sumOfAllPrices = allPricesToNum.reduce((acc, curr) => acc + curr, 0); // 108.97999999999999

// add a dolar sign to the number and use toFixed() to round it down
console.log(`$${sumOfAllPrices.toFixed(2)}`); // $108.98

For the example of negative lookbehind, let's say you want to match a digit as long as it is not preceded by the dollar sign. This pattern does it:

(?<!\$)\d+

But unfortunately, it still looks out for a number inside another number and matches it even if there's a dollar sign before the whole number:

To correct that behavior, you can surround the whole pattern with a word boundary (\b):

Negative lookbehind groups are supported in JavaScript as well:

const monies = '$123 456 $789 £12 ₦568 $8903 £345';
const re = /\b(?<!\$)\d+\b/g;

console.log('Monies without dollar sign:', monies.match(re)); // Monies without dollar sign: [ '456', '12', '568', '345' ]

Chapter 8: Regex Best Practices and Troubleshooting

Best Practices to Consider While Writing Regular Expressions

Over time, regular expressions can become complex and hard to understand, depending on the use case and purpose. Things may become more complicated if it takes you a long time to come back to them or you work in a team.

Luckily, there are a few best practices to consider while writing regular expressions so you can make things easier for yourself and your team members.

Here are those best practices:

• Keep it simple and readable: a simple, easy-to-read, and effective regex is better than a complex and effective regex. If you can make the regex efficient without using the complex concept of non-capturing groups like lookarounds (lookaheads and lookbehinds), then don’t use them.

• Avoid greedy matches: metacharacters like * and + and the wildcard (.) are greedy by default. It's hard to do without them, but when you use them and they cause greediness, make sure you use the zero or one quantifier (?) on them. In addition, avoid using the wildcard where necessary.

• Use comments to describe what a regex does: if you're working in a team, try to explain what the regexes you write do so others can understand them without wasting time.

• Use online regex testers: instead of writing your regular expressions in your code editor, write them in regex testers where you can test what they match without writing some more code. Free online regex testers like regex101 and regexpal.com also play a role in debugging because they can highlight errors and tell you what's wrong.

• Escape special characters: if you want to perform a literal match on metacharacters like ., *, +, {, }, and others, don’t forget to escape them unless you're using them inside a character set. Sometimes, you even have to escape hyphens in a character set.

How to Write Accurate Regular Expressions

Writing accurate regular expressions with precision requires understanding what you want to match, the pattern to use, attention to detail, and an understanding of the underlying syntax and behavior of regular expressions in general.

This is crucial in order to ensure there are no avoidable errors and make sure the regexes you write effectively match the desired string.

Here are some tips to help you write accurate regular expressions:

• Understand the string you want to match: before you write the regex pattern to match a string, examine the string closely. Determine if you're targeting the whole string or a particular part of the string. If you're targeting a part of the string or you want to strip out some, look out for the pattern that you want follow. If you get familiar with the string, you can write a more accurate regex.

• Be specific: avoid using the wildcard where necessary. For instance, do not use the wildcard to match a number since you can use \d or [0-9], or uppercase letters since you can use [A-Z].

• Use quantifiers to shorten patterns: if you want a particular part of your regex to match repeated occurrences, try to use quantifiers like +, *, {n,m}, {n,}, and {n}. For instance, if you want to match a date with / as the separator, you can use the pattern \d{1,2}\/\d{1,2}\/\d{4} instead of \d\d\/\d\d\/\d\d\d\d.

• Use online regex testers: online regex testers like regexpal.com and regex101.com help you write more accurate regexes by giving you a live match preview, highlighting matches, and showing you errors their engines encounter while processing the regexes.

• Use word boundary to prevent unwanted matches: surrounding your pattern with the word boundary (\b) can help you prevent unnecessary and unwanted matches. For example, if you want to match a 6-digit zip code, \d{6} can do it for you but will also match any part of the string that has 6 digits that follow one another. What would do it better is \b\d{6}\b.

Anchors (^ and $) can also help prevent unwanted matches since they "anchor" a pattern to the start or end of the line. You can use them to make sure the match is found at the end or start of the line, or both.

For example:

• /^Hello/i would only match Hello or hello at the start of a line
• /Hello$/i would only match Hello or hello at the end of a line
• /^Hello$/i would only match Hello or hello if it’s the only target string unless you have the multiline flag turned on and there's Hello or hello on another line.

If you have issues getting things right with a regex pattern, online testing tools like regex101.com and regexpal.com can also help you step through the pattern bit by bit. There are also regex visualizers you can use to check what's wrong with your regex patterns.

One of those tools that I find amazing is Regulex (jex.im/regulex). It helps you put your regular expressions in a visual perspective you can export

And it can show you what goes wrong with your pattern:

Chapter 9: Applications of Regular Expressions

A Better Way to Match Dates

You've seen several patterns you can use to match dates in the dd/mm/yyyy format such as \d\d\/\d\d\/\d\d\d\d, \d\d[/.-]\d\d[/.-]\d\d\d\d/;, and \d{1,2}\/\d{1,2}\/\d{4}.

The problem is that those three patterns just check for the occurrence of a number, and not a valid date. For example, invalid dates 99/89/2022 or 42/32/1909 would still match those patterns:

The solution is that you must account for the acceptable day, month, and year:

• the day can be 1 or 2 digits
• the day cannot exceed 31
• the month cannot exceed 12
• the year could be 2 or 4 digits, but never 1, 3, or greater than 4 digits

You should also account for:

• a day that could start with 0, 1, 2, or 3, but never 4 or greater
• a month that could start with 0, or 1, but never 2 or greater

Here's the regex pattern that satisfies those conditions:

/^(3[01]|[12][0-9]|0?[1-9])[-./](1[0-2]|0?[1-9])[-./](20[0-9]{2}|[0-9]{4}|[0-9]{2})$/gm

The image below is an illustration that labels each part of the pattern and explains what they do:

Here are the dates that match the pattern and those that do not:

You can take the pattern and test it against some dates in JavaScript:

const re =
  /^(3[01]|[12][0-9]|0?[1-9])[-./](1[0-2]|0?[1-9])[-./](20[0-9]{2}|[0-9]{4}|[0-9]{2})$/;

function testDate(date) {
  const dateTester = re.test(date);
  console.log(dateTester);
}

testDate('12-01-2022'); // true
testDate('31.11.1999'); // true
testDate('02-01-21'); // true
testDate('42-01-2021'); // false
testDate('22-91-23'); // false

You can see the date, month, year, and separator parts of the pattern are in their respective groups. If you want to match other formats like mm/dd/yyyy or yyyy/mm/dd, you can twist the pattern around.

You can even make the pattern a little shorter by putting the first separator in a group and referencing it for the second separator:

^(3[01]|[12][0-9]|0?[1-9])([-./])(1[0-2]|0?[1-9])\2(20[0-9]{2}|[0-9]{4}|[0-9]{2})$

How to Match US Zip Codes

The zip codes in the US are a 5-digit number, but they may also have a 4-digit extension, for example, 56893 or 56893-9232.

The pattern \b\d{5}\b would match a 5-digit zip-code:

You also need to account for the other 4 digits and the hyphen between the two sets of numbers. The pattern, \b\d{5}(\-\d{4})?\b would do that for you.

Here's an image that labels each part of the pattern and explais what they do:

You can also take the regex and extract all the zip codes that are matches:

const re = /\b\d{5}(\-\d{4})?\b/g;
const zipCodes = [
  '56893',
  'ca58392bn',
  '29043',
  '90342-9014',
  '89435',
  '75034',
  '90453-3056',
  '12345-6789',
  'b458923',
  '589323',
];

const matchedZipCodes = [];

for (const zipCode of zipCodes) {
  const matches = zipCode.match(re);
  if (matches) {
    matchedZipCodes.push(matches[0]);
  }
}

console.log(matchedZipCodes);

/*
Output:
[
  '56893',
  '29043',
  '90342-9014',
  '89435',
  '75034',
  '90453-3056',
  '12345-6789'
]
*/