DEV Community: Vidushi Agrawal

Regular Expression

Vidushi Agrawal — Wed, 07 May 2025 16:47:54 +0000

I had read about regular expressions and thought of writing a blog on this. I will try to cover as much as possible. Let's start with the basic definition.

Regular Expression

A regular expression (also “regexp”, or just “reg”) consists of a pattern and optional flags. In short, it is the method of matching strings to a pattern.

Two syntaxes can be used to create a regular expression.

const regexp = new RegExp("pattern","flags");

const regexp = /pattern/; //without flags
const regexp = /pattern/flags;

Regex should be written within forward-slashes /..../. These slashes play the same role as quotes in strings.

The main difference between the syntaxes is that when the regular expression remains constant, use a pattern with a slash for better performance, but if the regular expression is changing, or you don't know the pattern, or getting it from another source like input fields, then a pattern with constructor should be used.
This is not a hard and fast rule, but an optimal way to do.

Let's see an example:

const regex = new RegExp("abc");
const regex = /abc/;

Both of these regular expressions represent the same pattern, i.e a is followed by b followed by c.

Flags

Regular expressions may have flags that affect the search.
There are only 6 of them in JavaScript:

i: With this flag, the search is case-insensitive
g: With this flag, the search looks for a whole match. Without this flag, the search returns only the first match
m: With this flag, the search matches not only at the beginning and the end of the string, but also at the start/end of the line.
u: Enables full Unicode support
s: With this flag, the search allows a dot . to match a newline character \n
y: With this flag, searching at the exact position in the text

Let's understand it more with some examples.

let string = "You can and you will";
console.log(string.match(/You/gi));
  //(2) ["You", "you"]

As we are using g flag, it returns an array of all matches.
Both You and you are found because i flag makes the regex case-insensitive. Let's see what happens without the flag.

let string = "You can and you will";
console.log(string.match(/You/));
  //(1)["You"]

Before going through other flags, first understand Character Classes.

Character Classes

A character class is a special notation that matches any symbol from a certain set.
The following character classes exist:
\d - digits
\s - space symbols, tabs, newlines
\w - Latin letters, digits, underscore '_'
. - any character if with the regexp 's' flag, otherwise any except a newline \n.

Inverse Classes

Every character class has an inverse class; these are:
\D - non-digits
\S - all but \s
\W - all but \w

Dot Character Class

A dot is a special character which matches "every character except new line".

alert("ABC".match(/./)); 
      // A

We can even match it in the middle of a regex.

const regex = /Project.2/;
alert("Project-2".match(regex)); //Project-2
alert("Project 2".match(regex)); //null

The second example gives null. This is because a dot means "any character" but not "absence of character."
Dot doesn't match character with new line without s flag.

let string = "A\nB"
alert(string.match(/A.B/)); //null
alert(string.match(/A.B/s)); //A  B

The above example is self-explanatory.

Regular expressions are a powerful tool in JavaScript for pattern matching and text manipulation. While they may seem intimidating at first, understanding the basics, such as how to create regex using literals or constructors, the role of flags, and the meaning of character classes, can go a long way in making them approachable and useful. Whether you're validating input, searching within strings, or performing complex text transformations, regex can simplify your logic and make your code more efficient. As with any powerful tool, practice and experimentation are key to mastering regular expressions. Happy coding!

Introduction to Next.js

Vidushi Agrawal — Mon, 11 Mar 2024 10:28:44 +0000

Delving into Next.js is essential for any seasoned developer. This robust React framework brings forth a myriad of benefits. Mastering Next.js equips you with the tools to craft web applications that are not just efficient and scalable but also embrace modern web development practices.

What is Next.js?

Next.js is a React framework for building full-stack web applications. It offers an excellent developer experience and comes with many built-in features.

Getting started with Next.js

Prerequisites:

Before we begin, make sure you have a strong knowledge of HTML, CSS, JavaScript, and React JS.

Create your first Next.Js app:

Open your terminal and use the following commands to create a new Next.js project:

npx create-next-app my-nextjs-app
cd my-nextjs-app

Replace my-nextjs-app with your preferred project name. This will set up a basic Next.js project structure for you.

Exploring the Project Structure:

Only files & folders inside the app folder are considered for rendering.
page.js: This file is used to render the pages. This file defines the content of the page.
layout.js: This file defines the shell around one or more pages. It runs HTML and body tags. We don't have a head section in the layout.js's HTML tag as the title and description are defined in "metadata".

icon.png: When we will define this then this image will be considered a favicon.

Start the Development Server:

To run the local server-

npm run dev

Create a new page:

In the app, add a new directory about and add a new page.js file.

/about/page.js

export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
    </main>
  );
}

This will create a http://localhost:3000/about page. The content should be written on the page.js file.

Conclusion

Bravo! You started learning the next.js and created a new page. Feel free to create more pages and explore. Keep learning and experimenting!

Microtasks

Vidushi Agrawal — Sat, 15 May 2021 16:52:05 +0000

Event Loop is used to perform asynchronous function in JavaScript. Event Loop monitors message queue and the execution stack to make sure that the callback functions are executed just after the execution stack gets empty. The callback functions are divided into macro-tasks and micro-tasks.
We will see the execution of microtask in the blog.

How is microtask executed?

Event Loop has a task queue also called macro-task. Once the callback in the message queue starts executing, it executes one macro-task first. When the macro-task gets executed then it goes to execute the micro-task queue. During the execution of the micro-task queue, if any additional microtasks gets added to the end of the queue then it is also executed at that same execution. Once the micro-task gets empty, it starts executing the macro-task queue.

Problems with Micro-task

It might happen that the micro-task keep queuing more micro-tasks and get stuck in an infinite loop. Render is also blocked during the execution of the micro-task queue. So if infinite loop is created or execution of microtask is taking too long, then the page will become unresponsive.

To avoid this, JS limits the simultaneous number of micro-tasks execution to 1000. This means that after 1000 micro-tasks, it has to pick up a macro-task and after the execution get back to the micro-task queue.

Promise callbacks as Micro-task

Promise callbacks should be queued as micro-task. This is because if we queue promise callbacks as macro-tasks then it may lead to performance problems, as callback may be unnecessarily be delayed by task-related thing such as rendering. It also causes non-determinism due to interaction with other task sources, and can break interactions with APIs.

Conclusion

We discussed about the execution of micro-task and the merits and demerits related to it.