DEV Community: IanMcbull

The Evolution of JavaScript

IanMcbull — Mon, 22 Aug 2022 12:29:00 +0000

The year is 1995, and the world wide web is ripe with potential. By the end of that year, the number of websites will have increased by 300%. Microsoft also released their much-anticipated Windows 95 which came bundled with Internet Explorer.

The most popular web browser at the time was Netscape Navigator with an 80% market share. The founder of Netscape, Marc Andreessen was envisioning a new better, and more dynamic web. With better client-side experience and more interactivity. Netscape then decided to enter into a partnership with Sun Microsystems, to make their programming language, Java available in the browser.

Netscape also wanted a scripting language that was relatively easy to use and more dynamic in nature compared to Java, which is a more strict programming language. So essentially, this language would be more of a sidekick to Java, a Robin to the Batman.

This is where Brendan Eich, the creator of Javascript comes in. Netscape hired him to come up with said scripting language. So in just ten days, Mocha, which was the initial name of Javascript, was born.

Fun Fact: The first version of Javascript didn't even have a traditional Garbage Collector.

The name Mocha was then changed to LiveScript, then eventually to Javascript. The naming was a marketing ploy to get Java developers to use it. The idea was, at least in theory, that a Java developer would be interested in using a language that had the name "Java" in it.

JavaScript gained popularity pretty quickly and by 1996, there was a sense that Javascript was going to revolutionize the web. There was a problem though, JavaScript hadn't been standardized so if a competing browser wanted to use JavaScript in their environments, they had to go through Sun Microsystems which owned the name JavaScript.

Microsoft could see the potential that JavaScript had and wanted to use it in their browser. They however did not want to deal with trademark issues. So Microsoft did essentially what most developers do on StackOverflow, they copy-pasted the JavaScript code tinkered with it a bit to suit their environment, and called it JScript.

What this meant is that you could write JavaScript code that runs in Netscape Navigator, but not on Internet Explorer. Essentially two sides of the same coin. This was the "it runs on my machine" meme playing out. Microsoft eventually discontinued JScript.

In 1996, Netscape took JavaScript to Ecma International, a nonprofit standards body which back then was called ECMA(European Computer Manufacturing Association), to draft a standard specification for the language.

Standardizing the language would ensure there was a single source of truth. A single implementation of JavaScript that could run on different platforms in the exact same way. This is why your JavaScript code runs the same on_ Mozilla, Chrome, and Safari_.

For a new specification to be written, you need two things, a_ technical committee_, and a standard. The standard specification for JavaScript is called ECMA-262, and the technical committee is Technical Committee-39(TC39).

The TC39 is made up of between 50- 100 volunteers from organizations who have a vested interest in the web, like Google, Mozilla, Facebook, and so forth. They meet frequently to discuss the state of the language and offer ideas on how to improve it. For a proposal to be added to the language, it has to go through 4(zero-indexed) stages before it can be adopted and added to the language specification.

The adding of new features can be a long rigorous process and can sometimes turn comical as was the case in the famous smooshgate incident in 2018.

Starting from 2015, a new version of ECMAScript is released annually with the most famous one being ES6 or ES2015 which brought a lot of new features to the language. ES6 because it was the sixth edition of the language. ES2015, because it was released in the year 2015.

The language has come a long way from playing second fiddle to now becoming the most popular programming language. It can now be used on multiple platforms, from web servers to mobile devices to embedded systems to animation.

It's now virtually impossible to come across a piece of software that will not at some point interact with JavaScript.

Having a look at the events leading up to the current JavaScript, one cannot help but appreciate the hardworking individuals who are making time to better the language.
Thanks for reading and happy coding. 👋

Let's talk about Typescript

IanMcbull — Mon, 15 Aug 2022 13:04:00 +0000

JavaScript is now one of the most used programming languages today thanks to not only its flexibility, but also as a result of the internet boom.

We access the internet using web browsers and JavaScript comes packaged with your web browser. At some point you're going to interact with JavaScript either as an end-user or a developer whether it's on your smartphone, or your smart TV, basically anything that will at some point talk to the internet.

The "WHY" behind Typescript

JavaScript isn't perfect though, in fact, it can get pretty frustrating to work with. JavaScript is a dynamically typed language. This means JavaScript will try to help you out even when you haven't asked it to.

Let's look at an example:


let numberOne = 1;
let stringOne = "One"
let sum = numberOne + stringOne;
console.log(sum)
// Output
// 1One

Intuition will tell you that this operation should not be possible. How can we add a number to a string? JavaScript will take a look at it and say "Hey human, I can help you with that", then proceed to change your number value into a string.

While there are some benefits to this kind of behavior, it more often than not causes more harm than good. JavaScript will not complain about this behavior, until it absolutely has to.

As a JavaScript developer, you've probably encountered this behavior before. For example passing in the wrong data type as a parameter to a function.


const squareMe = (number) =>{
  return number * number;
}

// Let's call the function but pass in a string instead of a number
console.log(squareMe("five"))

// Output
// NaN

👋 The most common kinds of errors programmers write are type errors, where the wrong type of value was used.

Wouldn't it be nice if we could accurately determine how our code would execute without having to worry about Javascript playing judge, jury and executioner.

Typescript to the rescue

Up to this point, we've been writing dynamic code. This is referred to as dynamic typing, where the language can decide to fill in the gaps when it needs to.
Typescript offers us a way out. Rather a way to limit the dynamic nature of JavaScript by allowing us to use static typing instead.

Static typing in a nutshell, is the opposite of dynamic typing. Instead of being as vague as possible when writing our code, we try to be as explicit as possible. Let's declare a pair of variables using typescript.


 let numberOne:string = "One";
 let numberTwo:number = 2;

This is what typescript allows us to do. We are explicitly declaring the data types our variables can hold. If we try to re-assign the variables with values that don't match the data types specified, typescript will complain.


numberOne = 1; // Error: type "string" is not assignable to number
numberTwo ="2"; // Error: type "number" is not assignable to string

You'll get immediate feedback from typescript write in your code editor. This type checking functionality is what has propelled typescript to be one of the most loved languages in recent years.

The graph below is Stack Overflows' Annual Developer Report 2022 for the most loved programming languages.

So Typescript in a nutshell, is still JavaScript, but a statically typed or strongly typed JavaScript.

Now let's begin to look at some of the features that are available to us when using typescript starting with the tsc.

The `tsc`

TSC stands for typescript compiler. The typescript compiler is the brains behind typescript. It gives us a plethora of options to choose from when it comes to configuration options.

Before we can even interact with typescript though, we need to first install it on our machines.

npm i typescript -g

yarn add typescript

Confirm you have it installed by running tsc -v on your terminal.


tsc -v 
Version 4.7.4

To initialize a typescript config file, run the following command in your terminal window

tsc --init

This will generate a configuration file for you that the typescript compiler will then use to run your typescript code.

Common Configuration options

They're a lot of options to choose from, but we won't dive into the details of what they all mean. We will however look at the common configuration options that you will more often than not be interacting with.

`noImplicitAny`

This configuration option ensures that types are not inferred. This has the added advantage of ensuring that we always pass in the correct types when executing our program. By default, tsc will infer the any type to your variables. This is the same behaviour vanilla javascript gives you.
With the implicitAny option enabled, variables inferred with the any type will issue an error.

`strictNullChecks`

This option allows us to handle operations that return null or undefined more elegantly. We've all at one point or the other forgotten that a particular function doesn't return anything and tried to operate on them.

`target`

This option refers to the version that typescript will emit after transpiling your code to vanilla javascript. Remember your browser doesn't understand Typescript and that's why we need to specify the target version of javascript.

`module`

Specify the JS Module System that you'd like to use.E.g commonJS, AMD, ECMAScript

`strict`

The strict option specifies how strict tsc should be when it comes to type checking. As good practice, you should always have this option turned on.

The basics

The tsc is responsible for checking your code before executing. Let's look at an example of valid JavaScript code, that shouldn't intuitively work, but does.

function shineMyName(firstName){
   console.log(`This little ${firstName} of mine, I'm gonna let it shine..`)
}
console.log(shineMyName())
// Output
// This little undefined of mine, I'm gonna let it shine.

That doesn't look right does it? We forgot to pass in the firstName parameter to our function, but we were still able to run our code.

If you try to run the same code in typescript, you'll get immediate feedback from the tsc complaining that you didn't pass in all the parameters.


 function shineMyName(firstName){
   console.log(`This little ${firstName} of mine, I'm gonna let it shine..`)
}
console.log(shineMyName())
// Expected 1 argument  but got 0 ts(2554)
// An argument for firstName was not provided

Let's add more type-checking capabilities by explicitly defining the data types.


function shineMyName(firstName:string){
   console.log(`This little ${firstName} of mine, I'm gonna let it shine..`)
}
console.log(shineMyName("Bob"))

This is referred to as type annotating. Let's look at a few more example of type annotation.


let lastName: string = "Marley";
let age:number = 45;

This method of annotating is called explicit typing where we explicitly define the type of value.

Typescript also has the ability to infer types. This is called type inference

let lastName = "Marley"; // string 
let age = 45; // Number

💡 When you don't explicitly annotate the types, typescript will infer the types for you. This is called implicit annotating.

Primitive types in Typescript

String
number
boolean
null
undefined
void
never
any
symbol
bigint

let firstName: string = "Mark";
let age:number = 30;
let isCool:boolean = true;
let bigNum:bigint = 100n;
let weDintKnow:any = "I don't know";
let maybeWeknow:unknown = "I might know";
let notDefined:undefined = undefined;
let nulling:null = null;
let never:never;
let symbol:symbol = Symbol("symbol");
let voided:void = undefined;

Defining Types in Typescript

Arrays

To specify an array in typescript, we use the syntax type[]. You start by defining the data types that the array will include followed by a pair of square brackets.


let lyrics: string[] = ["Hey", "I", "Just", "Met", "you", "and", "this","is","crazy","but","here's","number","so","call","me","maybe"]

We first define the types of values that should be stored in our array. In our example, we can only have strings in our array.

Tuples

A tuple resembles an array but with a few differences:

The length of the tuple is fixed,
The tuple can have a mix of data types,


let rgb:[number,number,number] = [239,120,200]

Functions

You'll want to check the type of values being passed to our functions and define the type of value that the function should return.
We can do this by annotating our arguments as well as defining the type of value to be returned.


  function lyricsMatch(lyrics:string[]):string{
    return lyrics.join(' ');
  }

console.log(lyricsMatch(["Hey", "I", "Just", "met", "you","," "and", "this","is","crazy","but","here's","number","so","call","me","maybe"]))

// Hey I just met you, and this is crazy but here's my number, so call me maybe

We're explicitly telling typescript, that our function will take a single argument that has to be an array of string(s). We are also indicating that our return value will be a string as well.

If we try to pass in a parameter that isn't an array of string(s), the tsc will complain.


lyricsMatch("I'm never gonna dance again")
// Argument of type string is not assignable to string[]

Union Types

A union type is a combination of one or more types. Let's look at an example.


 function returnAge(age:string|number){
  return age;
}

console.log(returnAge(20))
console.log(returnAge("20"))
// The age argument can either be number or string type
// Both calls to `returnAge` will execute successfully.

Something to keep in mind though is that when you use unions, you can't use methods that are available to one of the data types only.

For example we can't do something like age.toUpperCase().
If the parameter that we passed in was a number, it wouldn't work. To get around this, we use narrowing.


 function returnAge(age:string|number){
  if(typeof age === "string"){
    return age.toUpperCase()
  }
  return age;
}

Narrowing simply means we try to deduce the data type that was passed in. If it's of type string, then we know we can use the toUpperCase() method on it.

Type aliases

Let's define an object shape


{
  name:string,
  material:string,
  status?:boolean
}

Now let's assume we want to keep reusing this shape throughout our code base. We can save this blueprint using type aliases.

 type glassJar = {
  name:string,
  material:string,
  status?:boolean
 }

Now we can reuse this object shape anywhere in our code base without having to keep rewriting the shape itself.

const jarOne: glassJar = {
  name:"Mikes Jar",
  material:"glass",
}

You can use type aliases to define any type of data structure and not just objects.

type ID = number | string;
type userIDs = string[] | number[];

Interfaces

An interface is an alternative syntax that we can use to create objects.

interface glassJar:{
  name:string,
  material:string,
  status?:boolean
 }

const jarOne: glassJar = {
  name:"Mikes Jar",
  material:"glass",
}

Literal Types

To explain type literals, we need to think about let,var and const and how typescript interprets these values.

We know that using let and var allows us to change the values at a later time.

 let buzz = "Buzz Light Year";
 var woody = "woody";

 // How typescript represents this: let woody:string
// let buzz:string`

We are telling the compiler that we want the values represented by the two variables to be any string values.

But what about declaring types with const. These are values that we don't plan on ever-changing.

const peterParker = "Spidey";

// How typescript represents this:
// const peterParker:"spidey"

Because we can only represent a single string value, the variable is assigned the type "spidey".

Conclusion

💡The biggest advantage of using typescript is the ability to catch type related bugs at compile time.

I only scratched the surface in terms of what typescript can do but hopefully this post can push you to adopt it if you haven't already. It's a great tool that will boost the quality of the code that you write.

Thanks for reading and happy coding. 👋

A Comprehensive Guide to Regular Expressions

IanMcbull — Wed, 03 Aug 2022 10:11:00 +0000

When I first saw regular expressions, I thought they looked like something nonsensical that a toddler had scribbled down on a piece of paper. It looked like gibberish, gobbledygook, a bunch of symbols and characters that someone had slapped together. Take a look at this:


/^\w+@\w+\.\w+(\.\w+)?$/

This is a regular expression for validating email addresses. Told you, gibberish looking. Don't worry if you don't understand what this means right now, we'll go through a series of examples and discuss how to write regular expressions. Before we dive into how to write them, let's define them first.

What are Regular Expressions

I think of regular expressions(also known as regex) as a test for matching string patterns. A test because we are checking whether a given text input, contains a particular pattern. Regex comes in six different dialects and regardless of what programming language you use, you're implementing one of the following dialects:

Flavor	Description
BRE	Basic Regular Expressions
ERE	Extended Regular Expressions
EMACS	EMACS Implementation
VIM	VIMs Implementation
PEARL	Perl Six, Perl Seven, Perl Eight
PCRE	Perl Compatible Regular Expressions

💡 "The examples I'll be giving will be in JavaScript, which uses a PCRE derivative syntax"

The regex engine is the thing that's responsible for performing the matching that happens every time you perform a regular expression operation. You don't need to know the nitty-gritties of how it actually works under the hood, but it's important to mention it. If you're interested in reading more about it, head on over to Devopedia

So now that we know that a regex is a text pattern, how do we actually write them?

Writing Regular Expressions.

You can create regular expressions in one of two ways in JavaScript:

Using the built-in RegExp Constructor


let regex = new RegExp("Bruce");

Using the literal notation


let regex = /Wayne/;

💡 The literal syntax is preferred when the regex is known at development time, and the constructor approach is used when the regex is constructed at runtime by building it up dynamically in a string.
-Secrets of the JavaScript Ninja, Second Edition

We'll be using the literal notation from here on out.

We defined regular expressions as patterns, so where is the pattern. From our example above, "Wayne" is our pattern. We have a "W" followed by the letter "a" followed by "y" and so forth. This is a pattern because only by combining those letters, will you get the word "Wayne".

So now that we have a pattern, how do we actually test it against something else like another word or a sentence?

Testing, Matching, and Extracting patterns.


let regexPattern = /Wayne/;
let textInput = "It's not who I am underneath, but what I do that defines me. - Bruce Wayne";

We want to check whether our regex pattern exists in the text input. JavaScript provides a number of methods that we can use.

Method	Description
test	Returns true if there was a match, or false if no match was found
match	Returns an array if there was a match or null if no match was found
exec	Returns an array if there was a match or null if no match was found
search	Returns the index position of the match or -1 if no match was found
matchAll	Returns an iterator of all results matching or -1 if no match was found
replace	Returns a new string with some or all matches replaced by a replacement string
replaceAll	Returns a new string with all matches of a pattern replaced by a replacement string

We'll have a look at the first three methods and see how they work. If you're interested in learning more about how the methods work, you can head on over to MDN and do a deep dive into them.

Let's first try to match our pattern using the test method.


let regexPattern = /Wayne/;
let textInput = "It's not who I am underneath, but what I do that defines me. - Bruce Wayne";
console.log(regexPattern.test(textInput)) // Returns true

The test method is called on the regex itself and it takes in a single argument, the text input. It's particularly useful when you simply want to see whether the pattern exists or not and are not concerned with extracting anything after matching.

The match method gives you a bit more information regarding the match.


let regexPattern = /Wayne/;
let textInput = "It's not who I am underneath, but what I do that defines me. - Bruce Wayne";
console.log(textInput.match(regexPattern))


[
'Wayne',
index: 69,
input: "It's not who I am underneath, but what I do that defines me. - Bruce Wayne",
groups: undefined
]

As you can see, we get an array that has information pertaining to the match. We get the pattern that matched, we also get the index position of the match as well as the input text that was passed in. We'll talk about groups in the coming section. The method is called on the text input and not on the regex itself.

The exec method also returns an array:


let regexPattern = /Wayne/;
let textInput = "It's not who I am underneath, but what I do that defines me. - Bruce Wayne";
console.log(regexPattern.exec(textInput)) // Returns an array"


[
'Wayne',
index: 69,
input: "It's not who I am underneath, but what I do that defines me. - Bruce Wayne",
groups: undefined
]

As you can see, the output is identical to that of the match method, however, the exec method is called on the regex itself and not on the text input as we saw in the match method.

Now that we've seen how to test and extract matches, we can now begin to dissect the actual matching and try to see how the regex engine works at a lower level. This will hopefully have you thinking about your regex patterns differently even as you run your operations.

How does the matching occur.

We talked about the regex engine a bit at the beginning of the post, now let's see how it runs every time we try to match a pattern.
The regex engine creates a graph that contains all the characters that need to match. In our case, we are trying to match the pattern "Wayne". The input text is the input we are trying to match against in this case, "It's not who I am underneath, but what I do that defines me. - Bruce Wayne"

As you can see, our pattern has been split up into individual letters, that the regex engine will use to determine whether we match or not. The regex engine will always try to match the leftmost match first. So in this case, it will try to match "W" before moving along the graph to the next letter.

The regex engine will go through each word, trying to match the "W" and won't move on to the next letter until it has tried to match all possible paths. If it fails, then the regex engine will fail to match and stop trying.

So in our case, we will encounter the "W" at the very end of our string. Once we match it, the regex engine will move on to the next letter in the pattern until it matches the entire pattern.

Here are a few key takeaways regarding the regex engine:

The engine tries every possible execution path before it moves along the string
The regex engine will find the earliest possible match and not the best possible match.
The regex engine will always try the leftmost match first
The regex engine always matches as early as possible in the string on the leftmost possible alternative in the regex.
The regex engine also returns as soon as it finds a match.

💡 Write regular expressions that match. This will improve the performance of the regex as it won't have to traverse through all the possible matches.

Up to this point, we've been matching basic patterns that don't have things like alternative matching, matching at specific positions and so fourth. That's what we are going to be looking a next.

Flags

Flags are used to add flexibility in terms of what is considered a match. For example the i flag is used to make the regex engine match regardless of case. So "Wayne" and "WAYNE" would both match.

The table below describes the flags that are available to us:

Flag	Description
i	ignores case
g	Perform a global search and don't return only after the first match
m	When the multi-line flag is enabled, beginning and end anchors (^ and $) will match the start and end of a line, instead of the start and end of the whole string.
y	The expression will only match from its lastIndex position and ignores the global (g) flag if set
u	When the unicode flag is enabled, you can use extended unicode escapes in the form \x{FFFFF}.
s	Dot (.) will match any character, including newline.

We'll have a look at the two most common, flags the i flag and the g flag, but if you're interested in learning more about flags you can visit the MDN documentation.

The i flag is used to match a pattern regardless of the case.


let regexPattern = /Wayne/i; // You add the flag after the closing forward slash.
let textInput = "It's not who I am underneath, but what I do that defines me. - Bruce WAYNE";
console.log(regexPattern.test(textInput)) // Returns true

The g flag tells the regex engine, keep looking for more matches even after you've encountered the first match.


let regexPattern = /Wayne/ig; // You can combine flags to add more flexibility to your regex.

// ['Wayne','Wayne']

Match any character

Sometimes we want to match any character in our pattern from digits to numbers to symbols to white-spaces.

Writing this all out explicitly will be too verbose and clunky, so we use the period symbol which matches any character.

let matchAnything = /./

Grouping

Grouping is used to group patterns together to make it easier to not only read our patterns but to also do more intuitive things as we match our patterns. We use parenthesis to group our patterns.

 let groupedPattern /(nickle)(back)/

Match patterns at specific positions

So far we've been matching patterns at any position but what if we want to match at the start or at the end of a string?

Symbol	Description
^	Match a pattern at the start
$	Match a pattern at the end

  let matchStart = /^a/ // Match an "a" at the beginning. 
  let matchEnd = /a$/ // Match an "a" at the end.

The ^ can also be used to negate characters. To negate a character, we use [^character] syntax. For example if we wanted out pattern to not include an "a" we would write:

let notIncludingA = /[^a]/

Quantifiers

Quantifiers tell the regex engine how many times to match a character or pattern.

Quantifier	Description
*	Match a pattern zero or more times
+	Match a pattern one or more times
?	Match a pattern zero or once
{x}	Match a pattern an arbitrary number of times

let matchZeroOrMore = /a*/
let matchOneOrMore = /a+/
let matchZeroOrOnce = /a?/
let matchArbitraryTimes = /a{3}/ // Match three times

The quantifier is placed after the character you are trying to quantify. the ? is used to match an optional character as in the example below:

let pattern = /favou?rite/
// This will match favourite or favorite

You can also use the | symbol to match one or more options. So we can rewrite the above patterns as /favourite|favorite/and this would still work.

Sometimes you may want to match a set of characters in a single position. To do this, we use the character set syntax which is denoted using [].

let pattern = /gr[ae]y/

This will now match either an "a" or an "e" in that position. We can include a range of numbers or letters to add more flexibility to the pattern.

  let pattern = /gr[a-f]y/
  console.log(pattern.test("His grey hair is starting to show")); // True

Shorthand syntax

The shorthand syntax is used to match a variety of characters without having to explicitly define the characters themselves.

For example lets assume we want to match all letters and numbers in a single position. If you were to write this explicitly, you'd write [a-z0-9].

This feels and looks a bit verbose, so instead, we can use the shorthand symbol \w.

Symbol	Description
\w	Match alphanumeric characters`[a-zA-Z0-0_]`.
\d	Match digits `[0-9]`
\s	Match white-spaces `[\t\r\n\f]`
\W	Match anything that is not an alphanumeric character `[^0-9A-Za-z_]`
\D	Match anything that is not a digit `[^0-9]`
\S	Match anything that is not a white space

let alphaNumericsMatch = /\w/
let digitsMatch = /\d/
let whiteSpaceMatch = /\s/
let nonAlphaNumerics = /\W/
let nonDigits = /\D/
let nonWhiteSpace = /\S/

We've covered a lot of material. From defining regular expressions, to writing them, to using them to match and extract patterns.

This will hopefully serve as a guide as you navigate your way through regular expressions.

Resources

Regex101
RegexOne

Thanks for reading and happy coding!! 💥

What does it even mean to be Asynchronous in JavaScript?

IanMcbull — Thu, 26 May 2022 07:55:17 +0000

All around us, we have synchronous and asynchronous activities happening. Can you think of any examples of synchronous activities that you perform on a day-to-day basis?
· Taking a shower
· Sleeping

What about asynchronous activities?
· Cooking
· Watching TV

We've all heard the phrase, 'you cannot serve two masters at a time. This is exactly what synchronous means. You have to do one thing at a time. More often than not, the nature of the operation will not allow you to do anything else.

An easy-to-understand activity that we all do, is taking a shower. Have you ever tried to take a shower and cook at the same time? Don't try it, it won't end well. Have you ever found yourself taking a jog while you're asleep? Probably not.

These are day-to-day examples of synchronous activities that we all perform.
What about asynchronous operations? Watching TV is an asynchronous activity. You can watch TV and eat pizza. You can watch TV and sleep. Cooking is also an asynchronous activity. Just because the rice isn't ready yet, doesn't mean you can't make a phone call, or do dishes. You can do something else as the rice is cooking. This is what we mean by asynchronous tasks. You can do other things while the async task is being fulfilled.

Now let's look at why we need asynchronous code. Couldn't we just write code synchronously and be on our merry way. Well, yes, we can. Let's look at an example.

console.log("Step 1");

for(let i = 0; i <= 9; i++){
  console.log(i)
}

console.log("Step 2")

JavaScript code runs from top to bottom. The code is executed line by line, in order.

So in our example the first line will be executed and will print "Step 1" to the console. Then, the for loop will start executing and print numbers 0 through 9. When this operation is complete, the next line will begin to execute and print "Step 2" to the console.

As you can see, the for loop had to be executed in its entirety first, before the next line of code could run. Now look at the same example, but this time, we'll increase the range of numbers.

console.log("Step one")

for(let i = 0; i < 1000000;i++){
console.log(i)
}

console.log("Step 2")

Chances are you'll be waiting for a while. As the loop runs, your browser tab will become unresponsive until the loop is done executing. The main JavaScript process is blocked by the synchronous loop. Synchronous code is also referred to as blocking code.

Your browser will throw a tantrum when a long running process blocks the main thread.

You can see how this can become problematic. So how do we solve this? Cue in asynchronous code, which is also referred to as non-blocking code.

JavaScript provides three main ways of writing non-blocking code.

Callbacks
Promises
Async/Await

Callbacks

A callback is a function that gets passed to another function as a parameter. Let's look at an example of a built-in JavaScript function, that takes in another function as a parameter.

setTimeout(()=>{

console.log("Some asynchronous action")

},1000)

A setTimeout function will wait for a given number of milliseconds, then call its callback function. Callbacks were the de-facto way of handling asynchronous operations in JavaScript for a long time.

Then came ES6, which introduced Promises. We'll look at promises in the next section. The problem with callbacks is as your asynchronous operations increase so does the number of callbacks. This is referred to as callback hell. Let's look at an example.

const stepOne = () => {
  console.log("Step 1");
};
const stepTwo = () => {
  console.log("Step 2");
};
const stepThree = () => {
  console.log("Step 3");
};
const stepFour = () => {
  console.log("Step 4");
};

setTimeout(() => {
  stepOne();
  setTimeout(() => {
    stepTwo();
    setTimeout(() => {
      stepThree();
      setTimeout(() => {
        stepFour();
      }, 2000);
    }, 3000);
  }, 2000);
}, 1000);

As your asynchronous operations increase, your code becomes harder to read.

Promises were introduced in ES6 as a modern solution for handling asynchronous code in JavaScript

Promises

Promises were introduced in ES6(ECMAScript 2015) as a modern solution to handling asynchronous operations. Promises consist of 3 states:

Pending
Fulfilled
Rejected

When a promise is pending, it has neither been fulfilled nor rejected. As the name suggests, the operation is still pending.
Once the operation is complete, the promise will return one of two states. It will either resolve or reject. If the promise resolves, it means it ran successfully and we can access the value of the promise. If an error occurred, the promise will be rejected with an error. Let's look at an example.

const marvelOrDC = (answer) =>{
    // Let's start by capitalizing the user input 
    answer = answer.toUpperCase()
    // This is how we return a promise
    return new Promise((resolve,reject)=>{ 
    if(answer === 'MARVEL'){
     resolve("You are a Marvel comics fan")
    }else if(answer === "DC"){
    resolve("You are a DC comics fan")
    }
      // If the user inputs anything other than Marvel or DC the promise will be rejected
      else{
      reject("You need to either pick marvel or DC")
      }
    })
  }

  marvelOrDC("")

So how do we access the value that is returned by the promise? We call the .then() method on our promise.

marvelOrDC("").then(data=>{
      console.log(data)
  },(err)=>console.log(err))

The .then() method takes in two parameters. The first is a callback function that gets called when the promise resolves. The second is a callback function that gets called if the promise is rejected.
But there is a cleaner way of handling rejections, using the .catch() method.

marvelOrDC("")
  .then(data=>{
      console.log(data)
  })
  .catch(err=>console.log(err))

Now that we have a sense of how to write promises, we can begin to look at async/await, which use promises under the hood.

Async/Await syntax was introduced in ES2017

Async/Await

The async/await syntax is syntactic sugar for writing promises. It's a cleaner less verbose way of handling promises. When handling promises using, async/await, we don't need to chain the .then() or the .catch() methods. Let's rewrite the previous example using async/await to see what I mean.

const marvelOrDC = (answer) =>{
    // Let's start by capitalizing the user input 
    answer = answer.toUpperCase()
    // This is how we return a promise
    return new Promise((resolve,reject)=>{ 
    if(answer === 'MARVEL'){
     resolve("You are a Marvel comics fan")
    }else if(answer === "DC"){
    resolve("You are a DC comics fan")
    }
      // If the user inputs anything other than Marvel or DC the promise will be rejected
      else{
      reject("You need to either pick marvel or DC")
      }
    })
  }


const handlePromise = async(answer) =>{
  try {
    const result = await marvelOrDC(answer)
    console.log(result)
  } catch (error) {
      console.log(error)
  }
}
handlePromise("")

Our handlePromise function is labeled with the keyword async. This allows the function to handle promises as well as facilitate the use of the await keyword, inside the function.

The try/catch block is used to handle the different responses the promise returns. The await keyword will suspend execution until the promise is either resolved, or rejected. If resolved, then result will be logged. If rejected, then the error is logged instead.

Conclusion

We've managed to cover a lot of ground. So kudos to you. This can hopefully serve as a stepping stone for you in your journey to master JavaScript.

DEV Community: IanMcbull

The Evolution of JavaScript

Let's talk about Typescript

The "WHY" behind Typescript

Typescript to the rescue

The tsc

Common Configuration options

noImplicitAny

strictNullChecks

target

module

strict

The basics

Primitive types in Typescript

Defining Types in Typescript

Arrays

Tuples

Functions

Union Types

Type aliases

Interfaces

Literal Types

Conclusion

A Comprehensive Guide to Regular Expressions

What are Regular Expressions

Writing Regular Expressions.

Using the built-in RegExp Constructor

Using the literal notation

Testing, Matching, and Extracting patterns.

How does the matching occur.

Flags

Match any character

Grouping

Match patterns at specific positions

Quantifiers

Shorthand syntax

Resources

What does it even mean to be Asynchronous in JavaScript?

Callbacks

Promises

Async/Await

Conclusion

The `tsc`

`noImplicitAny`

`strictNullChecks`

`target`

`module`

`strict`