DEV Community: Ekaterine Mitagvaria

Difference Between Data Type and Data Structure in JavaScript

Ekaterine Mitagvaria — Wed, 14 Jan 2026 12:24:05 +0000

In JavaScript, there are many terms that sound very similar to each other. For beginners, this can quickly become confusing. This confusion often happens because definitions sometimes look almost the same, with only small differences in wording.

In this post, I will break down the difference between data types and data structures. Understanding this difference is important before learning JavaScript data types and data structures in more detail, because it is a core concept in programming.

Definition
A data type is a classification that tells the computer what kind of value it is working with and what operations can be performed on that value.

You can think of a data type as a label that helps the computer understand how to handle the data. For example, numbers can be added or multiplied, while strings can be concatenated.
If the computer did not know the data type, it would not know what to do. For example, trying to add a number and a letter would not make sense unless the computer understands which one is a number and which one is a string.

A data structure, on the other hand, is a way to organize and store data so it can be used efficiently. It groups data together and defines how the data is arranged and accessed.
In simple terms, a data structure organizes data types in a specific way to make working with data easier.

What does it store?
A data type stores a single kind of value.
For example, a number data type stores numeric values, and a string data type stores text.

Each data type has rules about what kind of values it can hold. A number data type cannot store letters, and a string data type cannot be used for mathematical operations in the same way as numbers.
A data structure stores collections of values. These values can be of the same data type or different data types, depending on the structure.

For example, in JavaScript, an array can store multiple values, and those values can even be different data types. An object can store values with named keys, allowing data to be grouped in a meaningful way.

How do we save values?
With data types, values are usually assigned directly. In JavaScript, data types are determined automatically when a value is assigned. For example, when you assign a number to a variable, JavaScript understands that the variable now holds a number.
In some other programming languages, you must declare the data type in advance. JavaScript does not require this, which makes it more flexible for beginners.

With data structures, values are not assigned in a single step. Data structures are containers that hold multiple values, so we use specific operations to add, remove, or update data inside them.
For example, we can add values to an array, remove values, or update existing ones using built-in methods.

Difference across languages
Both data types and data structures can vary between programming languages. Some languages support data types or data structures that others do not, or they may work slightly differently.

In the next posts, we will focus specifically on data types and data structures in JavaScript and how they are used in real applications.
Enjoyed the post? Let me know in the comments below.

How to Find the Symmetric Difference Between Two Arrays in JavaScript

Ekaterine Mitagvaria — Wed, 07 Jan 2026 07:07:42 +0000

Let’s find the symmetric difference between two arrays in JavaScript. This is a very useful concept, especially for beginners.

We will compare two arrays and return a new array that contains only the values that exist in one array but not in both.

In simple words, we remove the values that appear in both arrays.

We will work with two arrays:

Using `Array.prototype.filter()`

The filter() method creates a new array by returning only the elements that pass a specific condition.

The plan

First, we compare arrayOne with arrayTwo using the includes() method.
Second, we compare arrayTwo with arrayOne using includes() again.
Finally, we merge the results using Array.prototype.concat().

Let’s get started

The process

First, we take arrayOne and use the filter() method.

For each item in arrayOne, we check if it is not included in arrayTwo.

Only the values that do not exist in arrayTwo are returned.
Next, we take arrayTwo and use filter() again.

This time, we return only the values that are not included in arrayOne.
Finally, we take the results from steps one and two:
- values from arrayOne that do not exist in arrayTwo
- values from arrayTwo that do not exist in arrayOne

We merge them into a single array using the concat() method.

Final result

The final array contains the symmetric difference between the two arrays.

These are the values that appear in only one of the arrays.

There are many other ways to solve this problem in JavaScript. However, if you are a beginner, this approach is simple, readable, and easy to understand.

Feel free to share your own solution in the comments! 🔥

Equality Comparisons

Ekaterine Mitagvaria — Mon, 18 Dec 2023 19:40:20 +0000

In this article, we will break down the 3 ways (operations) to compare values in JavaScript with examples and cover the situations to understand why we even need to compare the values.

Value comparison operators

Value comparison operators are an essential part of JavaScript and it’s crucial to understand when and how to use them. By comparing values our main goal is to find out whether it is true or false that these values are equal and only then we can act accordingly.

We have two main ways to compare values - Loose Equality (“==“) and Strict Equality (“===“). They look very similar so this can lead to confusion. That’s why we will dig deeper to understand the difference. We also have well-known comparison operators like greater than (>), less than (<), greater than or equal to (>=), or less than or equal to (<=).

When we compare the values we simply check if this is equal to that. The result is a boolean value true or false.

Don’t get confused and use only one equality “=“ like we usually do in mathematics. In the programming world, from the very start, the usage of a single equality was used for assignment and equality as well but due to its ambiguity we now use at least two equal signs (“==“) to use comparison instead of assignment.

Strict Equality (“===“)

When we compare two variables by using strict equality, the comparison result depends not only on the value but also on the data type. This type of comparison is more safe, correct and won’t result in bugs.

Why is it so important? For example, imagine, you are working with a contact form and you have various inputs where one of them was supposed to be saved as a number but is saved as a string. Let’s say, you need to check whether the value received is some specific number so you would use a comparison and check if the value received equals to, for example, 000. Compare the number 000 and the string “000”.

Why is the result false? As you can see, the first operand 000 is a number data type while the second one is a string. This means that strict equality checks not only the value but also the data type. If at least one of them is not equal then the final result is not equal.

If we didn’t compare values with strict equality and it returned true, we might have tried to perform some math operations on this string. This would lead to bugs and unexpected results. That’s why it’s important to make sure that we receive not only the correct value but also the data type.

Numbers, Strings, Booleans, Null & Undefined

The same works for all the data types in JavaScript when it comes to strict equality.

NaN(Not a Number)

The NaN never equals even itself because in JavaScript it represents a special kind of “undefined” value. When JavaScript encounters weird operations (for example, 0/0) it returns NaN. Every time you try to compare something to NaN it will always say NO. That’s why, usually to check if the value is a number, we use isNaN() instead.

Arrays

When it comes to arrays and objects in general, things get a little trickier. When the objects are created, their reference is stored in the memory. After we save this object in a variable, the variable has the information that points to the location of this object in the memory.

Even if we compare two arrays that have the same values inside them, the different variables will hold different places in the memory (have a different reference) which makes them unequal.

In the example below, we compare arrays with each other and themselves. Considering the fact that it’s comparing the reference instead of the actual values inside arrays, we get these results.

In order to compare the values of the arrays and not just the reference, we can create a function that will compare each value one by one.

Objects

The same logic of comparison works for any object. Instead of comparing values, JavaScript compares the reference which results in the false value.

Similar to arrays, we can compare the objects by comparing every key-value pair as a regular comparison isn’t enough. Such comparison is often called deep equality comparison. To check for deep equality, we retrieve the keys of objects and then compare them like in the example below. You can achieve this by using a little different logic as well but this is a short example to illustrate the comparison.

Functions

In JavaScript, you can even compare functions. If we use a regular comparison operator it will behave the same as it will compare the references.

Instead, we can convert the function reference to a string and compare the equality of strings. However, if both functions have the same body but the names are different, it already makes them unequal.

Loose Equality (==)

When comparing two variables by using loose equality, JavaScript attempts to convert the values and compare them that way. That’s why it’s not the best idea to compare variables using this method. If we attempt to compare the number 000 and the string “000”, it will assume that it’s the same.

Numbers, Strings, Booleans, Null & Undefined

Let’s check what happens when we use loose equality with data types like numbers, strings, null and undefined.
There are several rules that the loose equality follows:

strings comparison returns true only when both operands have the same character order.
numbers are equal if both have the same value and -0 and +0 are treated as the same.
booleans, just like in strict comparison both operands need to be true or false, to return true.

The comparison of the number 3 with the string 3, returns true this time even though they are different data types.

In the case of undefined and null, however, you will also notice that they are both considered equal. The reason is that JavaScript tries to convert types to the same type when comparing them with loose equality aka type coercion. Only then two values are compared. Due to historical decisions, JavaScript considers both null and undefined equal data types after using type coercion. And one more reason right here why it’s much better to use strict equality.

NaN(Not a Number)

NaN never equals NaN or anything else and just like in the previous example, if you want to check whether a value is a number, use the isNaN method.

Arrays, Objects & Functions

With the rest of the data types like objects, we have the same situation as the comparison happens by comparing the references and not the values it contains.

Operand conversions

Before comparison, the data types are converted to primitive types as long as they aren’t already the same types. A primitive type is anything besides objects.

If one of the operands is a type of Symbol and the other is not, it returns false.

When one of the operands is boolean, the booleans are converted to numbers. True is converted to 1 and false is always converted to 0. This means that if we loosely compared 0 and false, it would return true while true loosely compared to 1 would also return true.

When numbers and string are compared, the string is converted to a number. This is exactly why the number 3 and the string 3 were equal. But if the converted thing also fails and ends up being NaN, then it will return false.

Number and BigInt (big integers) are compared by their numeric value as long as the number isn’t +/-infinity or NaN.

Just like with numbers and string, comparing string with BigInt result in the conversion of string to BigInt and return false if this conversion fails.

Object.is()

Another way to compare values is a static method Object.is() which accepts two values that we want to compare. Just like loose or strict equality, it returns a boolean value. Note that it is not exactly the same as strict equality or loose equality. However, it is more similar to strict equality than a loose one. It does not do type conversion and doesn’t handle in any special way the NaN, -0, or +0. This means that Object.is() treats -0 and +0 and NaN as not equal compared to strict equality.

To determine whether Object.is() will return true, both values should be:

undefined
null
true or false
strings of the same length and same character order
same objects with the same reference
numbers and both +0, -0, or NaN
BigInts with same numeric value
Symbols that refer to the same symbol value

Equality algorithms

The value comparison operations that we covered earlier correspond to specific equality algorithms in JavaScript. If you are interested in how these operations work in detail, you can check the corresponding abstract operations:

Loose equality (“==“) - IsLooselyEqual.
Strict equality(“===“) - IsStrictlyEqual.
Object.is() - SameValue.

Why do we need equality comparisons?

There are several reasons why we need to compare values. With the help of equality comparisons, we can perform specific actions depending on whether the returned result is true or false. When we know that the comparison will return true or false, we can create a flow of logic on what should happen next.

Conditional statements like “if”, “else if” or “switch” are great places where we can use the power of equality comparisons.

In the example below, we check the typeof user input and make sure that it equals to number so we can proceed further. In this case, we use strict equality because it is more trustworthy.

Or we can use loose comparison if, for example, the input might be a string and a number and we are fine using both.

It depends on what you are planning to do with the input but in any case, I hope you understand the purpose of the comparison in conditionals. You can do so many variations depending on whether it’s true or false.

Conclusion

In conclusion, equality comparisons are vital in JavaScript, offering ways to figure out the equivalence of values. The main tools we use are Loose Equality (==), Strict Equality (===), and Object.is(). Strict Equality ensures both value and data type match, reducing bugs. Loose Equality attempts type conversion, making it less predictable.
Such equality comparisons enable logical flows in conditional statements, allowing us to control code behavior. The choice between strict and loose equality depends on specific situations or preferences.

What is JSON?

Ekaterine Mitagvaria — Fri, 10 Nov 2023 12:00:41 +0000

JSON stands for JavaScript Object Notation and it's a file format that is used to exchange or share various data across different systems or applications (e.g. from server to client). Transmission of data can be done using various file formats like XML or CSV however today we are going to cover JSON.

JSON is very human-readable and easy to understand which makes it one of the most popular file formats. It is structured data based on JavaScript syntax which makes it easier to convert JSON to JavaScript objects. You can also use JSON in other programming languages like Python or Java.

JSON syntax

JSON syntax is very similar to JavaScript object syntax but it's not the same. There are a couple of things you need to remember about JSON syntax:

It consists of key/value pairs separated by colons
The keys need to be strings and values can be strings, numbers, objects, booleans, arrays, and null.
The key/value pairs are separated by a comma
The JSON needs to be wrapped by curly braces ( {} )

JSON Strings Example

JSON Numbers Example

JSON Booleans Example

JSON Objects Example

JSON Arrays Example

JSON Null Example

Let's create one JSON ourselves that has various data types:

In the example above, we create a person named Anna, with age 30, whose boolean value of isStudent is set to false, with an address object that consists of key/value pairs of street, city, and postal, an array of hobbies and a key that is set to null because it's unknown for now if this person has pets.
Note that JSON doesn't have a built-in data type like Date or Symbol as we have in JavaScript.

JSON static methods

As mentioned earlier, in order to use JSON we need to convert it to JavaScript first. Even though they look similar, JavaScript objects are different and are not the same as JSON text format. Besides, objects have various built-in methods that help us to manipulate the data.

In order to work with JSON we need to use two built-in JavaScript methods. Information represented by JSON is a string as it is text-based data that is meant to be lightweight. That's why to work with the data we receive in the form of JSON we need to convert it to an object first.

JSON.parse

To convert JSON to JavaScript objects we can use a built-in method parse. This helps to "parse" the data and convert it into an object so we can do whatever we want with it using JavaScript. We might want to show this data on the website, convert it further into another object, update some data, or delete something from it. Very often you will find JSON when working with APIs however you can also create one yourself and store it locally.

Let's imagine we work with API and we receive a JSON that contains information about a person. We are going to use the JSON we created earlier. When we receive this data it's going to be represented in a string form. To convert it to a usable object we need to convert it to an object like so:

What will be the result in the console? It's going to be a JavaScript object.

What if we don't convert JSON? We will simply see a string that won't let us use object methods on it.

JSON.stringify

Sometimes we also need to do vice versa and convert a JavaScript object to JSON. To achieve that we can use another method stringify that converts an object to JSON. We use this when we want to send the data back to API. Another use case is localStorage or sessionStorarge where JSON is used. This time, let's create an object with the same data a convert it to JSON. Try to do it yourself first and remember the difference between JSON and JavaScript objects.

What will be the result in the console? A string representation of JSON that is ready to be sent to the database.

One thing to note here is that JSON doesn't have built-in date data types so be aware that when we convert Date type to JSON it will be converted to a string. The same applies to functions that will lose their "functionality" as strings so be careful with that.

JSON Array

When working with APIs we mostly work with objects however JSON can also be a simple array. Arrays are used when you need to use some order of elements and preserve the positions of these elements. JSON arrays can contain the same data types as JSON objects and can be parsed or stringified the same way.

How to use JSON with HTML?

When you are working with some data you most likely also need to display this data on the website. It can be done variously depending on what language you use or what framework or library but let's display some JSON data using Vanilla JavaScript. In this example, we are not going to work with any APIs but use a JSON file we have locally.

First, create two files - index.html and app.js. In the index file, we are going to display the data and in the app file, we will be working with this data. Usually, it's better to separate data from the functionality but let's add this data straight into the app file. Inside the HTML we will add the header and an empty section which will serve as a container for future data. Inside the JavaScript file, we can add the JSON data, parse this data, and log it to the console to make sure it's working.

Check your console and make sure that the data is correct and there are no errors. As you noticed, we used the parse method to make sure that JSON is converted to the JavaScript object so we can work with it. Now we can iterate over this data and show it in the HTML. To show it, we also need to create some additional elements that will hold this data and display all of it in the section that we have already created in the HTML file.

To target this section tag, we need to use an id of this element and in the JavaScript create a reference to this section.

In the console, you should be able to see our section HTML reference.

Next, we are going to start creating elements. For each person's data in the JSON, we are going to have an unordered list of the data. This means that we will iterate over each person, create a list of the data they contain, and add these items to the ul tag that we created.
First, we will iterate over the JSON array using forEach and then we will use for…in loop to iterate over the keys of an object of each person.

We need to remember that our object keys can be various data types including objects and arrays. In order to display the data properly, when we iterate over each key we will have to work with some values differently. You can directly display a string or number but if the key value is an object, you need to iterate over this object again as you cannot display an object directly. In our case, we will have three case scenarios. We will check if the key value is an array or if the value is an object to make sure we display the data properly.

Finally, we set all the values using innerHTML, append the created li tags to the ul tag, and then add it to the section tag.

As a result, our HTML page should display a list of all the keys and values.

For better results, you can also add names of your choice to the keys instead of using the original key names. You can also add other values conditionally if the key value is true or null, for example. You can also display only some parts of the data or display only specific objects that meet some criteria.

JSON versus others

JSON is obviously not the only popular data format and others are used just as much. Understanding how JSON compares to other data formats can help you to understand in what situation you need JSON or whether there are better options.

JSON vs XML

XML(Extensible Markup Language) is another data interchange format that is just as popular as JSON.

Syntax

While JSON has a similar syntax to JavaScript objects and uses key/value pairs, XML is more similar to HTML tags. It also has a hierarchy and may include more complex nested tags.

Data structure

JSON is mostly used when working with objects and arrays - APIs, configuration files, or the states for our application. XML however is used for more complex structures like document markup, more complex data interchange, or scientific data. However, you can of course use it for APIs as well, it's not forbidden.

Readability

JSON is considered to be more simple and more human-readable compared to XML as its syntax seems to be more complicated especially if it's very large. For every opening tag, you also need extra closing tags and this makes the text so much longer. On the other hand, if you have been using it for a while you might not notice that much complexity compared to very beginners.

Metadata

Metadata is an additional information or attribute that describes the main data. Things like origin, creation date, version, author, and so on. We can write metadata with JSON however it doesn't provide native mechanisms to embed metadata.

XML provides a possibility to add metadata structure and use additional data structure validations like Document Type Definitions (DTD) and XML Schema Definition (XSD). These are the methods to define the structure and validation rules for the XML document.

JSON vs CSV

CSV stands for comma-separated values and is another popular data interchange format.

Syntax

CSV is even more plain compared to JSON but this has its downsides as a result. CSV uses plain text of several lines. Each line represents a row of data while the first line represents the row name.

The columns can be separated by various delimiters like commas, tabs, semicolons, and pipe symbols. But note that the default delimiter is a comma and at times you might need to add additional logic if you want to use something else.

Data structure

CSV data is less useful for nested data like objects and arrays and is more suitable for flat data. We often use CSV for tabular data that is organized in rows and columns. Examples of such data can be employee information, product catalogs, or transactions. So if you want to use something more complex and nested, then CSV is not always the best choice.

Readability

Even though CSV might seem less complex it might also be a bit harder to read when there are a lot of rows and columns and it solely relies on delimiters.

Metadata

CSV does not support metadata either and it's also harder to implement it like it is in the case of JSON. That's why metadata is often managed separately.

JSONP

JSONP stands for JSON with Padding and is a special technique we use to transfer data while avoiding the same-origin policy limitations. The same-origin policy is a security feature used by web browsers that prevents making requests from any other places (domain, port, protocol) but the original one that serves the website. So, a page from abc.com cannot directly request data from def.com website using client-side JavaScript scripts. This protection helps to protect websites from malicious attacks and vulnerabilities. The origin is considered a URL combination of protocol (HTPP or HTPPS), domain, and port.

There are several ways to enable cross-origin requests and JSONP is one of them. What it does is that it runs the data as a script which makes data avoid the cross-origin restriction due to the fact that script tags are not restricted by cross-origin policy.

Usual JSON code uses a so-called "XMLHttpRequest" object when requesting files from another domain while JSONP uses a script containing a function call.

How to use JSONP?

For example, you want to retrieve data from https://website.com/api/data. You create a function which is a callback function to process the data you will receive in the future. Then, you create a script tag and for the value of the src tag you set the endpoint we mentioned above. At the end of this value, you add a query which is a callback function and this tells the server what function to use. Next, you append this script to the document that is executed when the document loads and the server returns the data wrapped in the callback function we wrote.

Why JSONP is a bad idea?

Even though it might sound tempting, JSONP is not recommended for use at all that's why I decided to cover it anyway. When there were no other workarounds it might have been a solution to something back in 2005 however in the modern world we have better solutions hence JSONP should be avoided. It makes our code vulnerable to XSS attacks as well as lacks proper error handling.

JSONP alternatives

There are several alternatives that you can use instead of JSONP.

CORS(Cross-Origin Resource Sharing): Server-side configuration that helps to control access to resources from different domains by specifying which origin is permitted.
Server-Side Proxies: You can set up proxies on the server that communicate with the requested resources on behalf of the client hence bypassing same-origin policy and offering more security.
JWT (JSON Web Tokens) and OAuth: When sending data across various domains tokens are used to avoid exposing the user's credentials and grant access to third-party applications. This is another modern way to securely pass the data around. There are much more better alternatives so forget about JSONP.

Conclusion

Understanding JSON and its methods like parsing and stringification is important for effective data exchange and manipulation. Its simplicity and resemblance to JavaScript make it a very good choice especially when you're a beginner.

The comparison of JSON with other formats like XML and CSV is just as important as they have better usage in different situations. While JSONP used to be a workaround for cross-origin restrictions, there are more modern alternatives like CORS or server-side proxies, and token-based security mechanisms like JWT and OAuth.

How did you switch from JavaScript to TypeScript?

Ekaterine Mitagvaria — Fri, 06 Oct 2023 07:36:52 +0000

How did you switch from JavaScript to TypeScript? I really would love to hear how other people did it.

Why did you do it, what techniques or ways did you use to make it painless and smooth? 😁

I have used TypeScript several times however in React. I was preparing my portfolio for the job hunt and I thought I might need something more. I didn't enjoy it and then didn't use it anymore.

Recently I have seen TypeScript almost everywhere and while planning to hop back to the job hunt again (after trying to find my first job with 300 resumes sent), I decided to take TypeScript more seriously.

I see TypeScript in many job listings, in my country (Georgia), as well as in many European countries and America, not sure about Asia. Seems like I do need it.

So, I decided to start with Vanilla JavaScript, instead of React because I have been targeting Vanilla first to strengthen the fundamentals. Also, I can write code but sometimes have a hard time really explaining it theoretically and that's what I need for interviews.

First, I spent 2-3 days reading the official documentation and making notes about everything. Then I re-read these notes several times and somewhere at 80% of the documentation I got bored. I am that person who falls asleep when reading. I usually learn faster from practice so I prepared some theoretical knowledge and started converting my JavaScript to TypeScript.

It was horrible! I hardly could use whatever I learned from theory, I forgot everything I wrote down and read and I got stuck. My goal was to try to read, remember, and then try to use that in knowledge. Nope.

In the end, my plan didn't work, I just started learning while fixing all the red lines and googling here and there. The first Vanilla project (very small) took me almost a day to convert to TypeScript because I had to google a lot but also read why I was doing this. I also used ChatGPT a lot to increase the time spent on coding instead of googling and filtering information. Seems like writing 2023 doesn't work for search anymore.

On the next day, I continued doing the same but then realized most of my projects were on React. So I found random projects on Github and started converting them to TypeScript. And started to become better and better.

My main idea was not to code from scratch and try to come up with all possible case scenarios for TypeScript but instead take the projects already made with Vanilla JavaScript and convert them to TypeScript. And working on other people's projects also could be an additional plus because I learned to read other people's code.

Today is going to be my 3rd day of practice and I was trying to analyze whether it is working or not.

Surprisingly, the case scenarios never end. I learned how to create interfaces but didn't create aliases yet, not sure why haha. Then used a lot of type assertions to work with the DOM, optional parameters, and of course, generics. Getting stuck with asynchronous functions at times but I do feel like it did get better. I am thinking of continuing this way and then switching to React in a similar way.

So, how did you learn TypeScript? Maybe you plan to and you have some great ideas?

JavaScript for Beginners: Classes

Ekaterine Mitagvaria — Wed, 04 Oct 2023 10:17:21 +0000

JavaScript, compared to many other programming languages is a prototype-based language. The creation and behavior of objects are based on prototypes that are objects themselves. Compared to other class-based languages, JavaScript doesn't have any class system and relies on objects. With the addition of classes in JavaScript, it's now possible to use more traditional class creation and inheritance. Classes are templates for objects. You create a single template which is used to create various objects.

Before reading further, I recommend you get familiar with objects as well as functions first. It will make this reading much easier.

How to create JavaScript classes?
Class declaration
- Class constructor
- Creating instances
Class expression
Class methods
- Instance methods
- Static methods
  - Why do we need static methods?
- Private methods
Fields
- Private fields
- Static fields
- Private static fields
Getters and Setters
Inheritance
The super keyword
Inheriting fields
Evaluation order
The instanceof operator
- Why do we need instanceof?
Conclusion

How to create JavaScript classes?

We can define classes in two ways:

Class declaration
Class expression

Class declaration

To declare a class we use a keyword class, name this class starting with an uppercase letter, and create its body with curly braces.

This way we declare a class that will be a template for our future objects. Separately, it is not going to do anything right now, it's useless until we use this template to create objects from it.

But before we do that, let's quickly examine it in the console.

In the console, it shows the whole class, a reference to the class. It's not finished yet but can you guess the type of the class? Is it an object considering that it's a template for objects?

To check the data type we can use a typeof operator.

The type of a class is a function. Why? Because behind the scenes, classes are built with constructor functions. Constructor functions in JavaScript are functions that create objects. Constructor functions are also skeletons, and templates, which will later be used to create instances (objects) that inherit everything from this constructor.

Make sure to read the constructor functions sections in my post about functions in JavaScript.

Once we create the user class, we will be using it as a template for future users who will register on the website, for example. We will have many users and we need to think, what would these users have in common? A username and an email, right? Also a password but let's skip the password for now. For every user that registers, we want them to have a username and an email.

Imagine we don't have any options and we need to create a new object from scratch every time someone registers. This is how it would look like if I had to manually create every object when someone registers.

I created three various users manually. But if I had to do that for a thousand users? Or million?

All these users have a username and an email. The only difference is the value. Instead of repeating it many times, we can create a template, which has the username and email. What if we were able to create users with fields like user and email all the time, without the need to repeat all the code?
To achieve this goal, we can add properties, a data in the form of key/value pairs. In our case, we can add a username and an email property. This can be done with a method constructor.

Class constructor

A constructor inside a class is a special method where you can create initial values. These values will be used in the future objects that we create with the help of this class. The objects we will create are called instances. The constructor can have parameters, just like functions, and the values of these parameters will be saved in the corresponding key.
In the example above, whatever argument we pass to the username, will be a value of the key username. Same for the email.

The keyword "this" that we use, refers to the instance created from this class and helps to understand which instance the values are coming from.

You can create only one constructor per class, otherwise, it will throw an error.

Let's summarize the information above and add a few more details to it:

To create a class we need to use the keyword "class" along with the class name.
Class names should start with an uppercase letter. It's not mandatory, it's a convention that helps us to differentiate classes from other objects or functions.
Classes are not objects, they are functions, and templates that create an object.
To create properties and potential key/value pairs, we need to use a method constructor. A method is the same as a function but methods are not functions because they are attached to other functions or objects. Constructors are not mandatory but we usually need them as we create default data.
Property names should be descriptive and indicate what the possible value can be. If you expect an email, you would name a key an email, not something like "valueOne", for example.

Creating instances

We created a constructor which means we can add users now. Remember how we created 3 users? Let's create them again with the help of our class.

We are going to create class instances (objects) with the keyword new and the class name while saving it in a variable. When you create an instance, the constructor method is called and accepts the arguments you have passed.

This code looks so much cleaner and easier compared to the previous way of creating users.
Let's inspect these users in more detail to see what they contain.

Each user has the key/value pair of a username and an email, as expected. As you can see, if we expand the first user, it also contains some [[Prototype]].

As we mentioned earlier, the instances of the class that we create are objects. The class is a template to create objects and the instance of the class will be an object.
We can check this with the help of the typeof operator.

Each object in JavaScript comes along with a property called Prototype which is an object and which also has its prototype. This is called a prototype chain. Every prototype will have its own prototype until it reaches null. Null doesn't have its prototype and this is when the prototype chain ends.
So the useOne prototype chain would be the prototype of the user we created that inherits properties from the user class, then the prototype of the user class where there are inherited properties from the built-in object which then leads to null.

Class expression

Instead of creating a class declaration, a named class, you can also create a class expression. A class expression allows us to create a class without naming it directly. The class expression cannot be created if it starts with the keywords class. That's why we need to save the class expression inside a variable and refer to it later.

Let's re-create our previous class of the user. Even if we are saving it in a variable, it is recommended to start the variable name with an uppercase letter so we can differentiate it.

We can also create a named class expression but the name will be available only inside of the class.

Class methods

As I mentioned earlier, methods are functions that belong to the objects, they don't exist on their own. The constructor is a built-in method that already exists automatically however we can also add any other methods on our own. If we want to create a method that will be inherited by every new user, we need to create it inside the class body.

The methods you write can be various. You can write a casual function, an async function, and even a generator function.

Let's inspect our user and find the method.

We cannot see the sayHi method right now because we need to search for it in the second prototype, this is where the inherited things are located.

The user inherited this method and we can use it. To call the methods, we need to use the class instance name and call the function with the dot notation.

As a result, we can see "Hello there" in the console. We didn't have to re-create the method for a new user. Every new user will have this method.
We can also create a method for this instance only but it will not be shared across other users anymore. That's why usually it's not recommended as it doesn't align with object-oriented programming unless you have a specific usage for this target object.

As you see in the example above, if we create a method for one instance it does work but it will not be shared across other users and it's not something we need.

In classes we can differentiate several types of methods:

Instance methods
Static methods
Private methods

Instance methods

Instance methods are the methods we have covered earlier. They work with instance-specific data, are defined in the class prototype, and are inherited by all instances.

Static methods

Compared to instance methods, static methods are not inherited and belong only to the class. To define a static method you simply need to use a keyword static in front of the function.
Let's convert our previous method sayHi() into the static method and see what happens.

We converted our instance method to a static one and when we try to call this method from the instance, it throws an error. Why? Because this method is static now and is only available for the class, it's not shared across instances of this class.
To use this static method we need to call it directly from the class.

This time, it works and logs the results successfully.

Why do we need static methods?

Static methods are used in scenarios when you don't need to do anything with the values of the instances but you do need to have some values saved in the class. For example, some mutual information is not about specific instances but general ones.
Even though they are not mandatory, of course, static methods are a great way to encapsulate functionality in one place, not pollute a global scope, and make the code more organized, reusable, and easier to debug. Such functions are often called utility functions, operations, or helper methods.

There are several scenarios where we can use static methods:
Handling date and time: We can add various date or time-related functions that parse dates, format or calculate date or time.

HTTP requests: You can implement GET or POST requests inside classes and make them reusable while using various endpoints.

Mathematical calculations: Another situation where we can implement static methods are math operations like add, multiply, divide, and so on.

General purpose: Often mentioned as utility functions, you can add static methods for general purposes like conversion to string, some form validations, number conversion, and so on.

Private methods

You can also create private methods that will remain private for this class. Private methods are available for classes only. Before the existence of classes, making things "private" was possible with the help of closures.
To create a private method, you simply start the method name with a hash (#). Let's re-create our class one more time.

In the example above, we created a private method however compared to a static method, you can notice that we cannot use it not only in the instance of this class but we cannot even use it in the class itself. Why do we need them then?

Private methods can be useful when we want to change something internally, inside the class, and have it fully hidden. One of the usages can be situations when we work with some data we do not want to expose - passwords or any personal information, or any data validation logic that you don't want to expose. You can also write some type of authentication methods, that you don't want to be exposed, some payment operations, some API requests you want to keep private, and so on. Private methods still work inside the class itself however you need to use additional logic to make use of them.

Let's see how we make use of private methods. Here is a very primitive example:

In this example, we create a private method #saySomething() however to use it we call it inside the response method.
The main idea is that whatever happens inside the saySomething will not be exposed and cannot be affected or reached anywhere.

Fields

Fields is a concept introduced for classes that are very similar to properties and methods. In many sources, both fields and properties are used interchangeably.
Considering that classes appeared in JavaScript a little later, the concept of fields comes along with classes in an attempt to switch from prototyped-based programming to object-oriented programming.

Classes are often mentioned as a syntactic sugar, which means that the way code is written and read, is more similar to object-oriented programming but the actual functionality behind the scenes doesn't change. The way you write code creates an expectation that it has a new functionality but behind the scenes, functionality does not change.
Let's consider an example of fields from other programming languages.

For example, in C# properties expose fields while fields are meant to be private to the class and accessible via getter or setter methods. Fields are not supposed to expose how the class works internally. Properties however are a way to access these fields and do some actions with them, at the same time not exposing the implementations.

When classes were introduced, we could create property values in constructors, just like we did earlier:

In order to simulate object-oriented programming, we also need some privacy for properties, right? To achieve that, the option was to use a convention to add an underscore before the property to indicate that this is supposed to be private. This means that it wasn't some feature of JavaScript and didn't have actual functionality. It was just "an agreement" between developers that underscore (_) means it's supposed to be private.

Let's illustrate how the private property of the password should be added:

However, if you create a new user and try to access this property, you will be able to access it anyway. So it's not really private. Such properties are often mentioned as pseudo-private properties.

Next, there was a proposal to add fields inside of the class body. This would make fields different from regular properties that we know of. Let's move our password to a class body. You can initialize a field with a value right away but it's not mandatory. I will make a password empty string.

If we try to access the password field, it will be available again but into play comes a private field, and this time it's not a convention with underscore.

Private fields

To create a private field, we use a hash(#) before the name of the field.

What if we try to access the password along with the hash?

We cannot access it anyway. Now this sounds more like fields we needed, just like in object-oriented programming. The private field becomes a little harder to access, kind of.
In order to access the password outside the class you can use methods.

You can also simply pass them to the constructor but then you are just creating a regular property so instead maybe it's better to pass an updated value.

Obviously, one should not expose passwords like this and it's just an example. Usually, if there is a possibility or even a need to expose some sensitive data, the methods are not as simple as in the example above. Usually, such exposure includes additional authorization, authentication, and access control logic before one can access private fields that easily.

Static fields

Remember the static methods we mentioned earlier? Besides the methods, you can also create static fields. They serve a similar purpose and are used to store the information inside the class itself. They are shared across instances of the class but it's static data that can be accessed without the need to create an instance.

For example, let's create a class for an online store product. In this store, I want to monitor all available products.
Every time there is a new product, I will create an instance of the product but inside the class itself, I will also add a static field for product quantity.

In this quantity, I want to save the total number of unique products. So the product class is like a template for future products with various attributes. Instead of creating new objects manually, I will use this class to create product instances that already have properties like id, name, and amount.

Note, that the static quantity is different from the amount. Amount is the total number of the product while the quantity is the amount of all unique products, not the combination of the amount of the products.

Below is a simplified example for learning purposes.

In the example above, I created a class named products which has attributes like id, name, and amount as well as a static field called quantity. Every time I create a new product, I increase the quantity by one. If I try to access the quantity I can access it through class.

Technically I can also access it through the prototype of the instance as it's still available across instances but the main point is that the values of quantity don't need to change or depend on the instance of the class.

Private static fields

In case you have a static field that has some sensitive information, you can make this static field private as well.
To achieve that, we keep the keyword static but add a hash(#) in the front of the field name.

Let's make our quantity static field private and see what happens. We are not going to change anything but the field privacy.

As you can see, we see some other behaviors. When we check the quantity via product class, it is NaN because we tried to increment quantity while it was not a number. It was not a number because it is undefined. And in the second case, it's undefined as it's not inherited across instances.

How can we make use of it? Let's re-create our class again. To access a static field we are going to use a static method. But to do something with this field, we need to write a public method (regular method). This method will be shared across all instances and we will update quantity with the help of this method via instances. Check this out:

Let's analyze the console log and understand why we have such outputs.

In the first console, we see undefined because the static private field is not available publicly. In the second example, we receive a TypeError because we try to call a method on the class that is not static. Public methods need to be called via class instances. Next, we call the static method directly on the class which gives us the result we need.
The static method belongs to the class so we can call it. Finally, we see undefined again because we try to access property in the class instance which is available only for the class.

Getters and Setters

When it comes to classes, we can create two additional types of class properties called a getter and a setter. The getter starts with the keyword get + the method written in the usual way. The same for the set method, it's written exactly like a regular method but with the set keyword at the start.
The setter always needs to have at least one parameter otherwise it will throw an error "SyntaxError: Setter must have exactly one formal parameter".

As the name suggests, the purpose of get is to get a value while the set method sets the value.

The purpose of setters and getters is to get and set values of encapsulated data inside the class and encapsulated data is usually private. We might expose it later after manipulating it in one way or another.

Even if we expose it, most likely we will hide the way we manipulated it and return not the original value but the result of manipulation.

Let's expand our getter and setter and imagine that we work with a password that needs to be encrypted. The example below will be very minimalistic not the real-life usage for password encryption.

In this example, we created a getter that gets the password field which is private. We also create an encryption private method, to keep the encryption process secret. Inside the encryption, we refer to the password. In the set, we set the password to this newly encrypted value.

Pay attention to the fact that when I pass the value to the setter via the user, I don't pass a value like we usually do. I don't pass it by calling it as a method user.setPass("qwerty123456"). Because even though they do look like methods, they are not the methods we know of.
To be more precise, both getter and setter are property accessors which is why they are called "accessors" not methods.

They are attached to the object as properties which help to control the properties and can read or change them. But when we use the getter or setter properties, behind the scenes there is still a function being called by JavaScript which does all the operations.

These methods bind the properties of an object to a function that will be called whenever we try to get them or set them.
Getters and setters are more in line with object-oriented programming when it comes to accessing properties.
As a result, that is why, when we set a method, we do not call it, we assign a value just like we usually do with properties.
Several things to be aware of. When working with setters, compared to regular methods that set the values, if we misspell the name of the setter, it doesn't throw any errors. Here is the example below:

Did you notice anything unusual and realize why the result didn't update and we got the empty string? It's because when setting the value, we misspelled the name of the set property and wrote setPas instead of setPass.

What would happen if we used a regular method instead? Let's add a method that acts similar to a setter.

In the example above, we created a method that does the same as the setter but as you see, when we misspelled it, we received an error right away.

So does this mean that setters and getters are useless and we shouldn't use them? They're various discussions about it and I didn't find any perfect answers.

We all know how many problems JavaScript has and because of some small mistake like misspelling, we shouldn't stop using getters and setters.

The most modern and simple solution that you can use, is Typescript which would throw an error in such cases and make your life easier. This is how in modern reality many JavaScript issues are solved.

There are some other quick fixes to avoid mistakes like this. On the other hand, there are downsides to these fixes as well.
One of the things we could do is use an object method called freeze. What it does is that it makes an object immutable, so if you misspell a property name and it doesn't exist, it throws an error, as immutability doesn't allow you to add new properties.

As you see, we froze the object and our misspelled property throws an error. Note that we froze the user instance, not the class itself, that's why if we use the proper spelling the setter method will work.

Another similar method is seal, used exactly the same way but compared to freeze it allows changing property values.
Both methods also restrict adding or updating new properties. But what if we need that functionality?

Instead of freezing or sealing the entire object, we can do so only with the property.

Let's change the example above a little and try to freeze the password property instead of the user object.
Before freezing the property right away, we want to allow the encryption first and then freeze it.

As you can see, when we first encrypt the password it works because we check whether the password field is empty. This is the situation when the password is set for the first time.
The !this.#password in the if statement returns an initial value of a password, an empty string, which is a false value. So we say that if it's false, then encrypt the password and freeze it.

Next, we try to update the password again and it doesn't update because it is not an empty string anymore so the block in the if statement doesn't work anymore.

To summarize, I found mixed opinions about getter and setter accessors and whether they are bad however I have not found enough to prove that they are very bad and you shouldn't be using them. I didn't get to use them much for personal use, that's why I will leave this alone for now.

Inheritance

Inheritance is the attribution of something from someone you are closely connected to.

When it comes to humans, we inherit various genetic attributes from our parents, for example. Or we inherit some things from grandparents and so on. When it comes to classes this term doesn't change its meaning.

With the help of inheritance in classes, we are able to create subclasses of classes that inherit properties, fields, and methods from the superclass (the parent class). Let's create a general employee class.

As you can see, we have an employee class that has properties like firstname, surname, salary, and a method which is an intro of the employee.

Next, we have various departments and they have different requirements, a job, or opportunities. They don't always share everything. They do share the firstname, surname, or salary.
We can create a subclass and extend our superclass of employees. Instead of rewriting the same properties, we can create one more class that includes the exact same properties but also has some other properties. To extend an existing class, a parent class, we can use an additional keyword extend.

In the example above, we created a new class that extends the employee class and adds a new property of stack. The stack will include the programming languages the employee knows and we want only this employee to have this property, that's why we extended it. We copied the employee class but added a stack as we didn't want to add a stack to the employee class.
Let's use our previous knowledge and create a developer class instance. We have a new property stack and we are going to pass a value of that.

But something goes wrong and we receive an error.

When we try to create a new property and use the keyword this in the constructor of the extended class, it warns us that we need to use some keyword super.

The super keyword

The keyword super is used in extended classes (subclasses) in order to initialize the parent constructor as well as inherit any properties from the parent. Let's fix our error above then and use the keyword super which needs to be written inside the constructor method.

There you go, the error is gone and we created a developer class instance. Let's take a look at what it consists of.

And looks at this, the properties like firstname, surname, and salary are also available but they are undefined for some reason.

To use the properties the super keyword isn't enough, we need to retrieve these properties. Let's add a bit more code.

Notice what we added? We added firstname, surname, and salary inside the super as well as the constructor.

Seems like we forgot that we also need to provide some values to these properties. If we want to use them we also need to give them some values. To add the values, we simply need to pass them when creating the class instance.

We added values to our new class instance and now it finally works as intended.

What else did we miss? Correct, we never saw the method intro. The method intro was supposed to be inherited from the superclass aka parent class employee. How to access it?
To access parent class methods, you can once again use the super inside another method that belongs to our subclass - developer class.

As a result, we will see the expected intro message with the respective property values. We can also add our new property of stack to this message:

This feature in object-oriented programming is called method overriding, which allows us to implement the same methods in subclasses and override, and replace the existing methods.
However, note that it will not override the method in the parent class. It will belong only to the class instance where we did this override.

This means that if we create a class instance right now, after the developer class instance where we change the intro method, the into method in the employee, the parent class, will remain original.

Inheriting fields

An interesting question, do subclasses inherit fields? Let's find out by creating an address field in a parent class and checking if it can be used in a subclass.

Let me help you understand what I did here.
I added a field address to the parent class called the employee and added a default value of "Unknown". Next, I created a subclass developer where I try to inherit a field via the super in the constructor and then create a new class instance as well as provide a value for the address. Let's check the output.

The value we see for the address did not change. But it did inherit this field because we see the value "Unknown". Well, it's because it's not part of the constructor and it's part of the class so the value remains unchanged. We could change the address field by directly targeting the address field.

But this makes no sense anymore and as if the class lost its purpose. We don't really want to update a single class instance like this and separate the logic from other objects. Now only this object can have such value and we would have to manually do this all the time for new objects.

Evaluation order

Now that we covered some basics, let's understand how classes are created and what the evaluation order exactly is behind the scenes.

The first thing that is checked during class creation is an extend keyword to understand whether the class creation needs to refer to the parent class or not. In other words, this is done to understand who the main initiator of class creation is.
Next, it's checked whether there is a constructor present, and if not it's created by default.
The properties are being checked (variables and functions) that we declare inside the class. If there are any calculations, the values are calculated and saved for later use. The code inside properties is not executed yet.
Methods (functions) and accessors (getters, setters) are being installed. Class instance methods go to the special list "prototype", and static methods go to the class itself. Private methods are remembered but not installed just yet.
After this, the class is being initialized, preparing to be used very soon. If there is any extend it's looked at again to check whether it is related to any other class as well as the constructor method where there are kind of instructions on how to build this class. In other words, we are at the point of the class where if we tried to find it by its name, it would throw an error because it's not ready yet.
Next, properties that needed some calculations are looked at again in the order they were written and the evaluation of these values takes place. The values for fields will be assigned depending on whether it's happening in the parent class or a subclass. In the parent class, it will happen at the start of the constructor function and for subclasses immediately before the super call returns results.
In the final stage, the class is initialized and ready to create instances.

The instanceof operator

The operator instanceof checks whether the object is an instance of a class or a constructor function. Classes are constructor functions behind the scenes but the constructor functions are not classes.

This operator checks whether the object we are checking was created using the class or constructor function or any ancestors of the prototype chain.

When you create an object with a class, it inherits its properties and methods from its prototype. So instanceof doesn't just check the class but also the prototype chain.
To check whether the object is an instance of a class, you target the object with a name, use the instanceof operator, and then write the class you are checking it against. The return result is either true or false, depending on the result.

Let's use the classes we have created previously and check if the developer object that we have created is an instance of a parent class or its subclass.

In the first console, we see that the developer object is indeed instanceof the developer class as well as the employee class. It's also an instance of an Object. Object is the root of all prototype chains in JavaScript where all the built-in properties are located. On the other hand, the class developer is not an instance of the employee class because classes are not instances.

If you want to find the direct and the exact class the object is an instance of, instead of the instanceof operator you can use the constructor of the object and compare it to the class.

Why do we need instanceof?

When working with more complex data and many classes or objects, sometimes you might want to ensure that you are working with the correct data.

Similar to the example above, we had a property stack in the developer class but didn't have one in the employee. You might try to do something with the property which is not even available.

Also, the same method might change its form a little bit, just like we did in the intro method for the developer class. It can be handy to check if we are working with the correct instance.

Additionally, you can create various conditionals by using the instanceof operator and change responses depending on the instance. On top of everything, it also helps to make the debugging process easier because we can check the original source and look for potential errors there.

Conclusion

In conclusion, we covered some basics and important topics in JavaScript classes and their various features some of which might be a little confusing. We covered the class creation process, the constructor method, properties, fields, and methods that can be static and even private.

Understanding these concepts is crucial in order to work with classes in JavaScript and create well-structured, maintainable code. Classes are something not everyone loves as it is an attempt to switch to object-oriented programming when it's a prototype-based language in the background.

Whether to use it or not and like it or not, it is something up to you but in any case, I hope I provided enough so you can try it out yourself.

What is Strict Mode in JavaScript?

Ekaterine Mitagvaria — Thu, 21 Sep 2023 19:37:21 +0000

Strict mode is a JavaScript feature that makes the interpreter more strict with JavaScript syntax reducing the likelihood of mistakes in your code. If you are not using a strict mode then you are in a sloppy mode.

In this post, we are going to cover the basics of strict mode and cover the most important features of it. Here and there, I might recommend some additional readings to ease your understanding of strict mode.

Creating Strict Mode

In order to enable a strict mode in your script, you simply need to add “use strict” at the very first line of your script.

On the other hand, strict mode and sloppy mode can coexist. You can use both in the same file.

To use both strict and sloppy modes, you need to write the code that you want in strict mode after the “use strict” while the rest before the “use strict”.

Additionally, you can use strict mode inside the function body which is often mentioned as function-level strict mode.

On the other hand, you cannot use strict mode inside the function if it is using default parameters, rest, or restructuring.

Default parameters example

Rest parameters example

Destructured parameters example

Automatic strict mode

There are various situations when strict mode is enabled automatically and you don’t need to enable it yourself.

Strict mode is automatically applied in:

Classes

In all parts of the class, strict mode is enabled automatically.

Modules

When using ES6 JavaScript modules, the entire module works in strict mode. Modules are reusable functions that can encapsulate code and separate some functionalities.

JSON (JavaScript Object Notation)

JSON is a data format often used to transmit data between servers and web applications. It always works in a strict mode and you cannot turn it off.

What exactly does Strict Mode do?

When struct mode is enabled, the syntax of JavaScript changes and so does the runtime. Let’s cover every change that takes place when going from sloppy mode to strict mode.

Undeclared variables

In strict mode, you cannot re-declare a variable without using var, let, or const. This feature prevents us from creating global variables.

If you are not familiar with variables, I recommend you read my post about variables.

Object property assignment

There are 3 situations where you cannot assign property in strict mode.

Non-writable property

In Objects, properties have their attributes, one of which is writable. Writable defines whether the value can be changed.

When in a sloppy mode, if you try to assign a new value even if the writable is false, it’s not going to throw any error. It will not rewrite the value but the error will remain “silent”.

In the strict mode, however, you are going to receive an error and won’t reach the console.log line.

Getter-only property

In objects, we have a special method that starts with a getter which retrieves a property value, and also a setter method that sets/modifies a property.

A getter-only property means that it provides only a way to get the value. Getter-only properties automatically become read-only.

Read-only means that the object property attribute writable is set to false - it cannot be modified.
In a sloppy mode, we will have a similar situation to the above example. There will be no errors thrown.

While in the strict mode, we will receive an error.

Non-extensible object

In JavaScript, we can make objects non-extensible which means they won’t be able to receive any new properties.

In this example, we aren’t going to receive any errors. But let’s enable strict mode.

And that is when we receive an error.

Object property deletion

Object properties that have an attribute configurable set to false, cannot be deleted. This attribute controls whether an attribute can be deleted. Similar to the examples above, if we try to delete an unconfigurable attribute, it will not delete it but will not throw an error either!

In strict mode, however, we will see an error:

Duplicate parameters

In sloppy mode, if we repeat the parameter names, we will not see any error again!

It might seem so easy but when you have many parameters or more complex code, you might miss this error.

Leaking eval

Eval in JavaScript is a function that can execute a code written as a string. So if I write a function in a string, I can actually execute it even if it’s a string.
If we use it in a sloppy mode we will be able to declare a variable with var in string.

In a strict mode, however, it’s not allowed:

Eval and arguments assignment/binding

Besides restricted usage of eval strings, we also cannot assign any value to eval as well as arguments object.
Without a strict mode, it will work perfectly:

In a strict mode, it will not reach the console.log:

If you are not sure what arguments are, I recommend you to read about the arguments object section in a post about objects.

Properties on primitive values

In JavaScript, you cannot add properties to primitive values.
Primitive values are data types that represent one value — undefined, null, boolean, string, number, and symbol.
If you try to do so anyway, in a sloppy mode it won’t warn you about anything.

Once we enable strict mode, we will see the error:

Parameter and argument indices synchronization

Before going further, make sure you get familiar parameters and arguments in my post about functions.

When we don’t use a strict mode, parameters and arguments can lose synchronization and act unexpectedly.
Let’s inspect the example below where we use a sloppy mode:

Take a closer look at each console and guess why we have such results from your own experience.

We have a parameter “a” where we passed an argument 1. In the function body, we try to reassign a value to a parameter with a value of 12.

Next, we also assign a value with the help of arguments object by targeting the value with the index.

In other words, in both cases, we tried to change the value of the “a” parameter — first via the parameter name and then via the arguments object and index. As a result, we get the value 13 everywhere as it was the last value we assigned.

Now look at what happens in the strict mode!

What is going on here? We try to do the same but we have some weird results. The attempt to reassign the value to the “a” parameter failed.

Why?

Because in a strict mode, the arguments object and parameter do not sync and because variable assignment works differently in this case.

What happened is that the “a” we wrote inside the function body shadowed the parameter and now is acting like a separate variable not connected to the parameter.

But the argument object acts as expected and plays the main role now of controlling the parameter value.

This keyword

The this keyword in JavaScript refers to various scopes depending on where and how it’s used. When we use it globally, outside any functions, object, or block, this refers to the global object (window).

However, when we use a strict mode it becomes undefined which helps to avoid extra errors in later usage of this keyword.

Stack-walking properties

Functions in JavaScript have a property called caller. It returns a reference to the function that we call the target function. Here is an example:

It will return a function reference from where the function was called, in our case, we called the function from the callerFunc:

However, in a strict mode, it’s not possible as such access to the caller might cause vulnerability issues.
Here is what happens in a strict mode:

We also have another property called callee. This property used to be useful for recursive functions when a function needed to access/refer to itself. A recursive function is a function that calls itself until meets specific criteria.
Here is an example of a recursive function with a callee property that calls itself until it reaches one and returns the sum of each number from 1 to the number we passed to it:

We can no longer do this in a strict mode:

More reserved words

On top of everything, strict mode enables even more reserved words in JavaScript. Reserved words in JavaScript are the words that already have some usage in JavaScript syntax so you cannot name anything with these words, they are already in use.

For example, you cannot create variables with names like const, try, this, true, and so on.

Strict mode adds even more reserved words:

interface
implements
let
package
private
protected
public
static
yield

Pros and cons of a strict mode

Do we really need a strict mode or it’s an extra layer of complexity?

I believe that these days everyone should be using a strict mode. Even if you are a senior and have years of experience, we all are human and might make mistakes. A strict mode is a helping hand in avoiding some errors. Its features help to identify issues at the very start of the project instead of piling up many problems at the later stage.

On the other hand, if you have a complex project built with older JavaScript and you decide to enable strict mode, it might take some time to switch and update the code. The existing codebase might not be suitable for the strict mode and it will make things even harder. But it’s a modern world and I think everyone should start adapting to new things.

Conclusion

In conclusion, a strict mode in JavaScript is a powerful feature that improves the language and makes it more reliable at the very start.

It prevents unintentional global variable creation, doesn’t silence the errors, and shows us right away where we need to make corrections exactly.

It also helps to control the this keyword and doesn’t refer it to the global object.

Even though it’s not very easy to adjust an old codebase when switching to a structure mode, it’s still a huge step toward cleaner and safer code.

The Complete Guide To JavaScript Functions

Ekaterine Mitagvaria — Tue, 19 Sep 2023 12:17:41 +0000

One of the most important features of JavaScript is functions and today I will cover the vital topics about it starting from the beginner’s level up to more advanced things.
Functions can be flexible, reusable, and modular but if you don’t know their key features, you might miss out on using functions at their fullest potential.

What is a Function?
How to Define a Function?
Function Declaration
- Calling Functions
- Function Parameter
- Function Argument
  - Arguments Object
  - The Rest Parameter
  - Default Parameter Value
- Return Statement
Function Expression
- Anonymous Function vs Named Function Expression
  - Function Expression vs Function Statement
- Saving Function Expression in a Variable
  - Reasons to Save Unnamed Functions in a Variable
- When to Use Anonymous Functions
  - Higher-Order Functions (HOF)
  - Closures
    - Closures in Loops
- Downsides of Anonymous Functions
Direct and Indirect Function Execution
Asynchronous JavaScript
- Callbacks
IIFE (Immediately Invoked Function Expression)
- Why do we need IIFE?
Methods
- Built-in methods
Constructor functions
Arrow function expressions
- Cons of an arrow function
Generator function
- Generator methods
- Pros and Cons
- Usage of Generators
Unary functions
- Currying functions
  - When to use currying?
Pure functions
Top-level functions
Nested functions
Recursion
- When to use recursion?
Conclusion

What is a function?

In simple words, functions are actions or processes that receive an input and return an output. They can perform various tasks and calculations.

For example, if I want to calculate something when the user clicks the button, I will write a function for that action. If I want to close the image modal, I will write a function. If I want to remove something from a shopping cart, I will write a function to achieve that. I can even write one function that can run another function. I can control functions with other functions.

How to define a function?

To start using functions, you need to define (create) them. You can define functions in various ways.

Common ways to define a function:

Function declaration
Function expression
IIFE (Immediately invoked function expression)
Arrow function expression
Function constructor
Generator function
Methods

We are going to go through each of these topics in more detail and expand on a lot of interesting features of JavaScript functions.

Function declaration

One of the ways to define a function is a function declaration. When you create a function with a name, it’s called a function declaration (aka function definition or function statement). This is the most standard, basic way of writing a function and what you will use very often as a beginner.

Here is an illustration of a function declaration:

The function declaration above consists of:

A function keyword
A name of this function
A parenthesis that holds the parameter(s)
The body of the function, enclosed in curly braces with statements that define the function

The function named sendMessage receives a parameter of a message and then logs this message to the console. When will this function or how will this function do it? We will cover this very soon.

Function keyword: To create and use functions you always need to use the keyword function as it’s a part of JavaScript syntax that helps JavaScript to identify what you are trying to create.
Function name: A function name is a way to identify the function. When you have various functions you need to differentiate which one does what for later use.
Function parameter: It’s the name of a potential value that we can pass to the function. Imagine, you have a function that console logs a name every time you click a button. I can pass inside the function the parameter that will have a value later. This function will receive this value and then log it to the console. Function parameters are not mandatory.
Function body: This refers to the block of code inside curly braces ({}). This is a place where we can provide function instructions.
Function statement: Inside the body, we can have function statements and expressions that are the tasks or processes we expect the function to perform.

How to call a function?

Once you create a function you also need to call it. When you call the function, it performs the tasks you write in the function body. There are functions that don’t need to be called.

Functions can be also called differently but it’s a special function that we will cover later.

The basic that you need to understand right now is that to call a function you use its name followed by parenthesis. Just like with people. To call someone you use their name, so in the case of functions, it’s the same.

As an illustration, here is a function hello:

This function is not going to show us anything in the console right now because we didn’t call it.

That’s why we need to add one more line:

And only now we will see “How can I help you?” in the console.

What is a function parameter?

A function parameter is a name that we include when creating a function. This name will potentially be a value that the function receives and later performs some operations on/with it.

The name that you come up with can be any, it’s up to you what the name will be and doesn’t affect the result. The parameter names are needed to associate them with future values we plan to pass to the function.

There are several rules to remember when it comes to parameters:

The names cannot be repetitive. If you use one name, the next one needs to be different.
You don’t always have to use parameters. They are not required.
The order matters. If you want to pass parameters of a name and surname, the values you plan to pass, need to match the order. If your second parameter is called last name but you pass a name as a second value, the value of the last name parameter will be the name value.
You don’t define the data type of the possible value. JavaScript is a dynamically typed language meaning that you don’t have to write in advance what data type the parameter is going to be. If you have not already make sure to read about data types in JavaScript.
Parameter names need to be descriptive and it’s recommended to use camelCase (lastName, firstName) but not a must.

The must-know along with parameters are arguments.

What is a function argument?

A function argument is a value that we pass to the function. The value will be represented by the function parameter. When I use parameters like name and last name, the values that I will pass, will be called arguments.

Here is some visualization:

According to the image above, the name msg is the parameter but the actual value, “Hello! :)” is an argument.

Arguments Object

An arguments object is a built-in object available inside the body of the function. It represents all the arguments that we passed into the function. This object is more similar to an array but it’s not a regular array we know of.

If you have 4 parameters in the function, for example, but you pass 5 arguments (values), the arguments object will read all the arguments you have passed, even if there is no parameter to read it.

You can use an argument object and combine it with array index functionality.

An index is the location in the array. The index of the very first item in an array is 0, so its position (index) is 0. The next one is at the index 1 and so on.

Here is an example:

In this function, I used only one parameter but passed two arguments. With the help of the arguments object I targeted the argument at position 0, then at position 1 (the second one). Finally, I targeted the argument with the parameter name.

The arguments object can be a powerful tool but considering that it lacks some functionalities, in the modern world you can simply replace the arguments object with the rest parameter.

The Rest Parameter

Instead of using the arguments object, we can also use a rest parameter which treats one parameter as an array of several arguments.

For example, if I wrote one parameter name but passed several arguments, I can actually retrieve all these arguments by “spreading” my parameter. To “spread” the parameter name, you can use the three dots (…) before the parameter name. The name can be anything you wish as it is something created by you, all the other previous rules don’t change.

Here is an example based on the previous function:

In this function, instead of writing one parameter name, I added three dots. These three dots will retrieve all the existing arguments and combine them into an array.
Here is another example if I pass one argument:

The result remains similar.

Let’s see what happens if I don’t pass any arguments:

It will return an empty array because there is nothing to save in the array. As a result, this is a better way to access all arguments compared to the arguments object as we can manipulate it as a regular array.

Default Parameter Value

Sometimes there can be a situation when your function has two parameters but doesn’t always receive two arguments.
First, let’s remember what happens when we pass both:

Next, let’s see what happens if we don’t:

Instead of the last name, we see undefined because the parameter wasn’t given any value.

When you have a real website and users, it might be not very good if the user of your website saw something like this, right?

How to solve this? We use a default value!

As the name suggests, the default value is a value we can assign to the parameter that will be a default. If we don’t pass anything the starting value will be this default value.
What value can we give? Any value you like!

In this case, we can add a default value “Anonymous” which will be used in case we don’t have a last name:

If the function doesn’t receive the last name value, the default value Anonymous will be used.
On the other hand, there are other ways around this.
You can check if the last name is undefined and show different results conditionally but I think the default value is more convenient.

A default value can be any parameter at any position and even several of them.

Return Statement in Functions

In a function body, we often use a return statement. A return statement returns one specific value and stops the function execution. Any code you have after the return statement is not going to execute. That’s why the return statement should always be the last one.
The value returned can be any data type. It’s also not mandatory to write a value after the return statement. If you skip the value, the function will return undefined.

The value you want to return always needs to start from the same line where the return statement is located. If done otherwise, this line break will be automatically considered as a semicolon. JavaScript automatically inserts a semicolon after the return statement even if you don’t do it yourself and this new line will be closed.

To avoid this issue but use a new line anyway you can simply wrap a parenthesis around the value you want to return:

Now it should be working properly again.

What does the return statement do:

In regular functions, the return says “ I am done, here is the answer”, stops doing anything and gives you the value you asked for from the place where you called the function.
In the asynchronous function, it says “I promise to answer you later when I am done” and remembers that it will answer later.
In generator functions it says “I will give you right now this part of the answer but I might have more as well”.
In the asynchronous generator, it says “I promise to give you some part of the answer later but I might also have some more answers but I also promise I might give them later on”. If you don’t understand some terminologies, don’t worry, we will cover it very soon. Before we continue further, let’s remember the function declaration structure one more time and move to a function expression:

Function Expression

Another way to define a function is a function expression. In function expressions, you have two options:

You can create a function expression without a name (aka anonymous function) or
You can create a named function expression. The main difference is that in function expressions you can have an additional perk of not naming the function. In a function declaration, you always name the function.

Anonymous Functions (Unnamed Function Expression) vs. Named Function Expressions

As the name suggests, the anonymous function is a function that doesn’t have a name, here is an example:

I am mapping through the array of fruit and I use a function without a name. This function is a function (specifically a callback function) that runs for every element in the array.

At the same time, you can optionally use a name for this function. BUT in this case, it will be a named function expression, not an anonymous function. As anonymous means that it doesn’t have a name, it’s anonymous.

Let’s try this out:

As you see, the result is the same. In this situation, we would not need to use any name because this function runs only once and we don’t use it outside of the code block.

We can take the function declaration we created earlier and transform it into an anonymous function:

In this example, I created the exact same function however it does not have a name anymore. I omitted the name which was supposed to be written after the function keyword but there is nothing right now.

However, a function written in such a way is going to throw an error:

> 🚨 Function statements require a function name.

This code will be treated as a function statement and that’s why it requires a name.

Function Expression vs. Function Statement

A function statement and a function expression are slightly different things in JavaScript. A function expression means that we are able to create functions in the middle of expressions, so that’s why it’s called a function expression.

What exactly is a function expression? Expression in JavaScript is a block of code where you ask a question in a way that gives you a specific value.

Let’s say you make a calculation and you want to check how much is 1 plus 1. The value given back will be a summary of 1 and 1. And this 1 plus 1 is an expression. Expressions usually produce specific values. While statements, that are very similar produce specific actions. For example, declaring a variable, or doing something with an if statement. So you are making a kind of statement.

In JavaScript, you can use expressions when a statement is expected but you cannot use a statement when an expression is expected.

For the function to be a function expression you cannot start it with a keyword function and not use a name if you aren’t calling it. In such a case, you need to save it somewhere. The keyword function can be treated differently depending and where and how it’s used.

To avoid this error and make a function expression usable, we need to:

Save a function expression in a variable
Or use a function as an IIFE (Immediately Invoked Function Expression)

Saving a Function Expression in a Variable

Let’s fix the error above by saving it in a variable:

In this example, we saved the function in a variable and left it without a name. On the other hand, if I try to check the name of this function right now, it will tell me that the name of the function is sendMessage even though I did not name it.

Why? This type of behavior is called name inference which helps to find the function with the help of the variables where we saved it. So what I did is that I saved an anonymous function (a function without a name in a variable) and JavaScript gave a name to it anyway, specifically the variable name where I saved it.

Practical Reasons to Save Unnamed Functions in a Variable (Besides the Technical Reasons)

When we write regular functions, function declarations that have a name, we can use their names to invoke (call) them. For the function to work and give you a result you need to call it by its name. The naming of the function helps you to identify it, that’s why the name is also called an identifier in programming.

Just like with people, when they are called by their name, they know that it’s them being called. Imagine you wrote 10 various functions that do absolutely different things. How would you make that one specific function do something if doesn’t have a name? If we decided not to name a function expression and omit the name, we would have to save it in a variable so we can refer to it later on.

On the other hand, if you are 100% sure you will never need to re-use the function then you have other options to skip the name. It doesn’t mean functions always need a name. As many say, “names are a good thing” so let’s try to understand more benefits of named functions.

Readability

When naming a function, if done appropriately, it helps to make a code more readable as names are usually kind of a short explanation of what the function does. When you work on a project where there are a lot of functions and there are different people working on it, it makes it much easier to understand faster and more clearly what the function does. On the other hand, one can add additional comments or documentation to understand what is going on so maybe it’s all about the preference.

Tracing Errors

when a function doesn’t work properly and it throws an error, without a name it would be so much harder to understand where exactly or why there is an error. When you see errors, you trace the reasons for the error with the help of a name. That’s why names make debugging much easier. There are other ways to make debugging like name inference — finding an unnamed function with the help of the variable where we saved it.

Recursion

Recursion, which we will cover in more detail very soon, is a technique when a function can call itself. It executes code and then calls itself again which can be stopped if it meets specific conditions. And to make a function call itself it needs to have a name, an identifier.

To finalize, if you have a function you want to use later without a name it’s more complicated. There are some disadvantages for sure but this doesn’t mean that anonymous functions are useless.

When to Use Anonymous Functions?

There are several cases when you can use anonymous functions without having the need to name them and save them anywhere. Defining functions without a name reduces your code and time as long as you use them correctly.

Situations When You Can Use Anonymous Functions Are :

Higher-Order Functions (HOF)
Closures

Higher-Order Functions (HOF)

Higher-order functions are functions that, as arguments, can receive a function and manipulate it or even return a function as a result. Functions in JavaScript are treated on a similar level as data types like numbers or strings. Functions are treated as values, which is what makes them more powerful.

The behavior of functions being able to be a value makes functions be called “first-class citizens” or “first-class functions”. A function is a first-class function if it is a first-class citizen. Rarely but sometimes it is also mentioned as a first-order function.

What Makes Functions a Value?

You can assign functions to variables and reuse them. We already covered this topic when it came to anonymous functions. Functions can be saved in variables and re-used as many times as you want.

Pass them as arguments. You can create a function that receives another function and performs additional tasks. Such functions are known as callback functions which I will cover later in this post.

In the example above, I have a function called calculate that has three parameters. The third parameter is a callback which will be a function. I have two various functions that I can potentially pass as an argument (value). It can be either a sum function or a multiple function. These functions on their own don’t do anything until I pass them. Inside the calculate function I create a variable named result and there I will be saved the result of the callback function. The callback is just a name but when I pass, let’s say the function named sum, it will be used as a value. The sum function will receive a and b from the calculate function and return me the sum. The same applies to another function, multiple.

Store them in data structures like arrays. You can also store functions in an array for later use because they will be treated like regular values. One of the use cases can be a situation when functions are used as scheduled tasks and you need to perform some calculations one after another.

Return functions from functions. Function can not only use other functions but they can also return functions. This usually takes place when it comes to closures or factory functions which we will cover shortly.

Here is a simple example:

#1 First I create a reusable function that receives a message and returns a new function that will log the message along with its argument.
#2 Next, I save the result of the createMessage function in the variables receivedMessage. If you log this variable to the console, it will be a reference to the function. Try it out yourself!
#3 Next, I call this variable like a function, because it has a function value and I pass an argument “Nina”.

Create them dynamically. You can also create a function dynamically because they are just as dynamic as other values. To create a function dynamically you can use a Function constructor. A function constructor is a built-in object in JavaScript that can create a function from a code represented as a string.

To create a function with a function constructor:

Save it in the variable
Use the keyword “new” along with the Function constructor
Pass in any number of parameters
At the very end write the body of the function

Everything should be written in a string.

As powerful as it may seem, this is not the best practice and you need to use a function keyword to create functions. Currently, it’s not the best way to create functions.

More Examples of Higher-Order Functions

In JavaScript, we have many built-in functions(methods that I will explain very soon) that are higher-order functions. All these functions use other functions as an argument. Higher-order function examples are:

map()
filter()
sort()

map()

The map is used to transform each element in the array one by one and perform a callback function on each of them. As a result, it returns a new array with new elements and doesn’t affect the old array.

As you can see, I mapped through each element and performed an action on each of them. Considering that I am using an anonymous function, I can also omit the keyword function. But we will do this a little later when we reach arrow functions.

filter()

The filter does something similar to the map. It will perform a check on each element and return only the elements that pass this check.

sort()

The sort, as the name suggests, is used to sort items in an array. It can be used in various ways depending on whether you want to sort in descending or ascending order.

In this example, we are sorting an array of numbers in ascending order. These are several examples of higher-order functions that perform a callback function every time each element is called. As you see, each callback function I used was an anonymous function. There are many other similar examples, like reduce(), forEach(), every(), and so on.

I mentioned callbacks many times and the functions above depend on callback functions. But before I expand callbacks, let’s cover closures real quick that will help us to understand the callbacks even better. If you got lost, let me remind you why we started discussing this topic.

Situations when you can use anonymous functions are:

Higher-order functions (HOF)
Closures

Closures

Whenever we create a function inside another function, the inner function receives access to the scope of an outer function. An ability to access and remember the variables of the outer function is called closure.

If you are not familiar with the scope in JavaScript, make sure to read my posts about Visualizing Execution Context in JavaScript and Variable Declarations in JavaScript to understand closures much better.

In the function messaging, I created a variable name. The name variable will belong to the scope of messaging (it’s available only inside the body of it). Then, I create another function called sendMessage which has its own local scope.

However, I am able to access the name variable anyway from the parent function messaging. This is called a lexical scope.

Learn more about lexical scope here.

This is the ability of the nested function to access the scope of its parent scope. But parent functions won’t have access to the scope of the functions nested inside of them. Lexical scope refers to the context (the place in the code) in which a variable or function was declared.

Lexical scope and closure might seem very similar and even the same. The closure doesn’t just have access to the outer scope but it’s an ability to preserve it. It can access this variable even if the outer function finished execution.

The lexical scope defines when the variable will be available but the closure is the ability to retain access from the outer scope even when the outer function finished execution. In other words, the inner function encloses and captures the variables from the outer function.

What do you mean by the outer function finished execution?

The reason the outer function finishes execution first is how JavaScript works. I definitely recommend you to read my post about Visualizing Execution Context in JavaScript because it will answer your question, but let’s try to understand better why the outer function can finish execution earlier than the inner one.

Take a look at this example:

For the browser engine to read JavaScript it creates an environment called execution context where JavaScript code can be translated and executed in machine code.
We have two types of execution contexts — global execution context and function execution context. The difference is that function execution context is created every time there is a new function and global is global for all variables outside functions and is created only once.
When the code is being read, the first things that the engine wants to find are variables like const, let, and var. But it will target the variables located outside the function first (available globally). If you keep reading the code line by line, you will see that the first variable found is closureFunc. When it’s found, it’s saved in the global execution context but it’s the name saved, the value doesn’t matter yet. It’s saved somewhere in the memory for later use. This name will be used to refer to its value later.
When there is nothing to save in the memory, the engine will go back to the start. What is noticed next is the function declaration. Function declaration will also be saved as if it’s a variable and will be created in another separate function execution context. Remember why functions are first-class citizens? If not then I recommend you to go back and re-read about HOF.
All the execution contexts pile up on top of each other. The first is the global execution context, next, we have a function execution context on top of it.
Everything there was to be saved is waiting in the memory now and comes the phase of execution. During the execution phase, the values are assigned.
Next, according to our code, we are trying to call the outer function and save the result inside the variable closureFunc. It’s the only variable we created. This means we are at the phase where the values need to be assigned now. The value we saved in closureFunc is calling the outer function. So once the value is assigned, JavaScript will know what to do next.
The outer function will execute for the first time and this is where it’s going to finish execution. Don’t look at the last line of code yet (closureFunc()). You need to look at the line when we assign the outer function. This is where the outer function is called for the first time. Inside the outer function, we declared a variable innerVariable, and created a function inner. In other words, we didn’t call the inner function, we returned the inner function.
When the outer function returns the inner function, this inner function is saved inside the global execution context variable — closureFunc.
Finally we called the closureFunc that holds the inner function we never called. Now when we call the closureFunc, the inner function will be called and this will lead to the creation of another function execution context that is pushed to the call stack. As a result, it will log to the console the outer function variable, and its function execution context will be popped from the call stack.

Here is where closure comes into play. If you were following, the outer function already finished execution earlier but the inner function that we called later, has access to the variable that was created outside of it. I hope it makes a little more sense now.

Closures in Loops

Another example to understand closure better is loops. A loop is an execution of code repeatedly until a specific condition is met. Let’s say, a console log that logs the number until the number reaches 5.

Let’s understand how closures work when it comes to loops:

This function is going to the console log “This is” and the current count number that will stop after 5. What exactly is going on here?

countIt is a function that holds a count at 0 in its scope. The inner function increment captures the count variable from the count function, increments it by one, and then logs it to the console.

When we call the function named countIt for the first time, we also save it in a variable incrementbyOne. Next, we have a for loop where we start from 0 and end the loop when it reaches 5. It keeps executing the increment function, and this inherent function holds the count value even though the countIt function has already finished execution. We keep looping, and the count variables are still captured inside the increment function.

Downsides of Anonymous Functions

When there are good sides, there are always some bad sides, and anonymous functions are no exception.

Hard to Debug

One of the bad sides of anonymous functions is a fact that they are harder to find and identify as they have no names, so obvious. When you have issues with the code and something is not working, you can identify these issues with names. Instead of using a name, you might have to add additional comments or explanations in the documentation, so it can be clear for future reference.

When you have a very small amount of code, it might not be that hard, especially when it’s your personal project. However, when you work on something much more big and complex, especially if there are a lot of people involved, anonymous function can be more problematic.

Performance

Anonymous functions are also defined and created at runtime, which makes them unavailable during the compilation phase. Every time a new anonymous function is created, it creates a new function object in the memory. Even if it’s the same, it will re-create a new object that can lead to too much memory usage and bad performance.

Transition to New Topics

I know, we have to jump from one topic to another once in a while because many concepts are tightly connected to each other. Let me remind you where we stopped. For the keyword function to begin an expression (something that produces a value), it needs to be used in a context (a place in a code) where JavaScript doesn’t expect some statements (commands, actions). Otherwise, the keyword function will start a statement, and we need to make sure that we are writing a function in the correct way to receive a function expression.

To achieve this, we need to:

Save a function expression in a variable
Or use a function as an IIFE (Immediately Invoked Function Expression)

We discussed how to save a function expression in a variable and that function expressions can be named or they can be unnamed, which results in an anonymous function.

Next, we discussed the situation when we could let the function stay anonymous.

Situations when you can use anonymous functions are:

Higher-order functions (HOF)
Closures

We covered both higher-order functions and closures.

Now, we are going to move to callbacks.

After callbacks, we will discuss IIFE so we make use of functions expression and JavaScript doesn’t throw an error thinking it’s a function statement.

Direct and indirect function execution

When we execute functions we can divide them into two groups — direct and indirect execution.

Direct

Direct execution refers to the synchronous execution of the code. When we call one function, then another, and then another, they are not executed all at once. They follow each other synchronously.

A quick example:

The result will be one, three, two. Because we called them in such order. If I call the third function first, then the first result will be three. Even if I declared it the last. This is called synchronous, direct execution.

Indirect

When it comes to indirect execution, we associate it with asynchronous execution.

Functions are able to go outside the sequence and not depend on the order of execution.
Imagine, a restaurant where we have various functions. You ordering the food, the waiter accepting the order, the cook preparing the food, other people ordering the food — all these are various functions.

Imagine, if all these functions had to execute synchronously.
First, you make the order, the waiter takes the order, the cook prepares the food, you take your order and only then the other person can make an order.

Now, let’s move to the online restaurant where you order food.
On the website, you add food to the cart and send a request for the order. In many applications, when you order food it’s not confirmed right away. It all might happen very fast but when you send the order it’s sent to the server and might take some time to be confirmed. You will either receive a confirmation or a decline, for example.

Orders also have various steps, accepted, preparation status, then sent out, and so on.

While these functions and updates take place you can still interact with the application and do some other staff.
If everything had to be synchronous you wouldn’t be able to do anything until one function is complete.

All this happens thanks to asynchronous JavaScript.

Asynchronous JavaScript

In order to implement asynchronous flow, there are several ways:

Callbacks
Promises
Async/await
Timers
Event loops
Non-blocking I/O (input/output)

Right now we are going to cover only callbacks.

Callback function

The callback is a function that is an argument of another function.

Due to the nature of JavaScript, you cannot call all the functions at the same time. If you remember, for each function we have a separate function execution context and they are piled up on top of each other.

Functions do not execute at the same time. They execute depending on where and how we call them. Can you guess the result here?

I created functions in one order but called them in a different one.

What is going to happen?

It will log to the console numbers two, one, and three because I call them in such order.

But what happens this time?

I call all the functions before I even create them.
Will this throw an error?

No, it will have the exact same result: two, one, and three.

If you don’t understand why, I recommend you go back to the execution context explanation.

The main takeaway here was not the execution context but the fact that the results are provided according to the order I called the functions.

But what if there is a situation when you want to call the function only when the previous function was triggered?

Imagine a real-life example, a restaurant.

You go to the restaurant and the cashier takes your order
After the cashier takes your order, you are given an order number
You take a seat and wait for the order
When the food is ready, the cashier calls you by your order number

Image all these actions are functions. For every customer, the cashier produces actions like taking an order, passing the order so it’s prepared, and calling you when the order is ready.

For the cashier to call you, they depend on another function, which is the preparation of the order. So they wait for another person.

While the food is being prepared and you are waiting at the table, this process is called asynchronous action. While you are waiting there is an order being prepared and this doesn’t prevent the other customer from placing the order.

If all these actions had to be synchronous then when you ordered, the order would need to prepare right away without you waiting, you would need to take the order you made and only then the next person would be able to place an order.
They cannot call you right after you make an order but while you are waiting they are preparing the order. On the other hand, they also need to know how to get back to you while you are waiting at your table. That’s why you have your order number, it’s a way to get back to you.

A callback is a way to call back. So, when the order is ready they use this callback to get back to you and tell you to take the order.

The food preparation function is executing and when it’s done it’s automatically ready to use your order number to get back to you and tell you to take your order.

In short, you are attaching one function to another function. Here is a minimalistic example:

To make it easier to understand, start reading from the very last line.

When the customer approaches, I call the function order that has 3 arguments: pasta which is a food parameter in the very first line of the code.

987 is the value for the id and callback is the callCutomer function.

Inside the order, first of all, I wrote that I received the order for the specific meal, pasta in this case.

Then we imagine there was the food preparation and a waiting process.

Then we call the function callCustomer and pass the id. This is what the callback function does. It waits for the preparation of the food and when it’s ready, calls the customer.

Yes, I could write the functions in a specific order and only then add callCutomer in the correct order. But every time I receive a new order, I would have to constantly call the callCutomer function again and again.

Instead, in the order function, I attach functions and I don’t have to control it myself anymore.

Along with the callbacks, often comes an issue with a so-called callback hell which I recommend reading about later on.

IIFE

An immediately invoked function expression is a function that is called the moment it is defined. This time, we don’t have to save it in any variables and it will remain an anonymous function.

Previously, we had to use a name because we also needed to call it later on but this time we can make it invoked right away without using any names.

Let’s re-create my send message function one more time:

To write an IIFE, you simply write a function without a name but not to receive an error like before, you enclose it in parentheses so it’s treated as an expression and then you immediately invoke it by passing the argument.

This function will get called right away and we don’t have to do anything anymore.

You don’t have to use any parameters in the function, it’s not mandatory. It depends on what you are trying to achieve.

You can also write the function invocation inside, at the end of the function which is just a preference. There is no right or wrong way.

On the other hand, for IIFE you can use named function expressions as well. Technically they do behave like anonymous functions because they are hidden inside IIFE block but at the same time, it’s not an anonymous function anymore.

Why do we need IIFE?

There are several reasons why IIFE is useful.

Private scope: Variables that we create will be kind of “stuck” inside the IIFE because it isn’t available in the execution context. It’s not saved in the global execution context or a function execution context. This gives you a guarantee that variables won’t be re-used or affected in any way. This is especially important when it comes to var. When we declare variables with var they can be accessed even outside the function, compared to const, and let that appear much later.

But when it comes to IIFE even var won’t be able to slip away:

In this example, when in the usual function var would be logged twice, this time in the outer console log it will throw an error because it’s closed inside IIFE.

Encapsulation: Besides the variables, you can also create modules that have both private and public information available in one place. Instead of separating everything, you just save everything in one IIFE.

In the example above, even though I have declared a variable and a function inside IIFE, it returns me an object that will be saved in the messageModule.
In other words, I assigned a return value to the messageModule variable.
This is a way to encapsulate private and public information together.
The way I define variables and a function inside the return statement is also a little different than we have seen before but this topic will be covered later, in the methods section.

Passing parameters: In addition, you can pass global variables to IIFE and perform operations on them in private.

We pass the answer from the global scope but whatever happens inside stays private.

Let’s imagine more real-life examples.

For example, you are working with a weather API that is fetching data.

You want to create a reusable block of code that also encapsulates this API request.
Doing so can lead to several benefits.
Separating API functions from others can make the code more sustainable and easier to understand. So when you need to find it fast and debug it, the process is much easier. You can also re-use such functions because if you need to make the same API request from different places instead of writing the same request you can create a reusable function instead of repeating a huge piece of code.

This also makes it easier to make updates. If something changes in the API request, for instance, instead of rewriting all API calls, you can only change this modular function that will affect the result everywhere.

When you write reusable functions, they receive input that changes depending on the situation.

Let’s continue with the weather API.

Image that we want to create an IIFE and we are going to pass an API key to it.

By passing this key we are going to initialize the function.

I will create an IIFE step-by-step.

First, let’s create the basics:

What did I do here?

I have an IIFE that I am saving in a variable apiRequest. Whatever is in the body of the function will remain private and won’t be accessible outside. Whatever I write in the return statement, will be exposed.

As the argument, at the end of the IIFE, I am passing an imaginary API key so I can make an API request.
Inside this function, I have another function named findCountry that is supposed to receive a country name and log to the console the capital of this country.

This will be done by the imaginary API request.

Next, I expose the same findCountry function inside the return statement and it becomes exposed.

As a result, when I call this function outside IIFE, it will log to the console the result of its body.

Next, inside the IFFE beside the findCountry function I will create another one but this time I am not going to expose it in the return.

What this function does is it receives a country, makes an imaginary API request, and returns some data.

Then, we return the country we searched for and the capital that was returned thanks to the API request.

In the findCountry function, we will call this fetchCountries API, which is currently private, and try to retrieve the information that it returns.

What should happen when we try to fetch countries? The function fetchCountries receives the country information, then it looks for the country and in return gives us the data with the country name and the capital that is saved in the data variable.

Here is the full code:

This way the API request inside the fetchCountries remains private and at the same time we can reuse this function for other APIs.

Please note, this is not a realistic way of making API requests and it’s very minimalistic just to understand how you can use IIFE, not how to use API itself.

This example illustrates how you can make an API request private and safe as well as separate it from other code which will make it much easier to debug it later.

Time to remember where we left off. We started all this when it came to the function definition.

Common ways to define a function:

Function declaration
Function expression
IIFE
Methods
Function constructor
Arrow function expression
Generator function

Methods

Methods are also functions. A function is a block of code that is supposed to perform a specific task(s). A method is also a function that is supposed to perform a task(s) but it’s associated with an object. In other words, methods are also functions but they are properties of an object.

What is a property?

Property is a key-value pair of an object, in other words, objects are collections of these properties.

Another difference between a function and a method is that functions can exist on their own, they don’t have to be attached to something else. The only thing they are attached to is the global object.

Methods however cannot exist on their own and they need to be a property of something else, in this case, objects.
They define the behavior of the object they are located in and operate on the other properties within this object.
That’s why calling functions and calling methods are also different.

To call a function you simply use the name of the function however to call the method, you need to use the object name along with the dot notation.

Built-in Methods

Now, that we understand what methods are, time for built-in methods.

Built-in methods are pre-written methods that are part of JavaScript.

These methods perform regular tasks without the need to write everything from scratch.

Built-in methods save a lot of time and provide guaranteed functionality.

When you create a function yourself, you might miss out on something but the built-in methods are already there, ready to do the job for you.

On top of that, these methods are pre-compiled and optimized meaning that they have better performance. In JavaScript, there are various built-in objects that provide various functionalities and they also come along with their built-in methods.

There are a lot, really a lot of objects that you can read more about on MDN.

We are not going to cover them all today but for better understanding let’s go through several basic ones which you will 100% encounter with.

String built-in method

There are a lot of built-in string methods which have various purposes but let’s say we have a string and we want to find at what index a specific letter is located. Instead of creating a function ourselves, we can use a built-in method indexOf().

Here is an example:

There you go, it’s so simple. We took the string name and with the dot, a notation used the method name as well as passed whatever we were searching for.

Number built-in method

There are tons of useful methods that work with numbers.
One of them can receive a number and return a fixed amount of fractional part. So if I have 9.9 it should return 9, if 1.145 it should return 1.

You simply indicate the number you want, add the method, and receive the result. No need to create any logic yourself.

If you want to read more about other methods I recommend you to read my String methods cheatsheet and Number methods cheatsheet.

Constructor functions

A constructor function, also known as simply a constructor, is a special function that creates an object.

You can create multiple instances (objects) of a specific type where each instance inherits properties or methods that were defined inside a constructor.

To differentiate regular functions from constructors, you should start the name of a constructor with an uppercase letter.

In this example, we created a constructor function Person that accepts two parameters and then assigns them as properties.
The function above is just a skeleton, a template for our future objects. With the help of it we can create new objects by using the keyword new and the constructor function name.

This way, we created two new customers by using the template. We do not have to repeat many times the same parameters or repeat the properties every time we create a new customer.
The keyword this will refer to the object when we create it. If you are not familiar with what this does, I will come back to it during arrow functions.

As properties, you can also add various methods that perform any logic you need. Anything defined within the constructor function will be inherited by newly created objects and they will have their own copy.

In this example, when we created customerOne we didn’t create any methods for it. But considering that it was created with the help of the constructor Person, it should inherit its methods.

What will happen if we try to call the sayHi method for the customerOne?

It will log to the console “hi” because it was inherited automatically.

After you have created a new object, you can also add new properties to it, however other objects, even if created from the same constructor, are not going to inherit this property.
To create a new property you can use a dot notation, the name of the new property, and equality to the value.

In this example, we added a new property called age to the customerOne. However, this property will belong only to the customerOne and will not be inherited across other objects created from the same constructor.
To create a method for new objects, you can follow a similar structure.

If you want all the objects to inherit the properties, then the property needs to be added to the constructor function. On the other hand, you cannot add properties like you can with regular objects. You need to write it inside the construct function directly.

Let’s add the age to the constructor:

Every object will have an age property now.

An interesting question — what happens if I don’t include age value when I create a new person?

Let’s imagine a new customer registered and the age field is not required so the customer skipped it. Will the customer be able to register or what will they see in their profile?

If you try to log to the console cutomerOne, it will show that the age is undefined.

So, this might be good because we didn’t receive any error.
But when a customer goes to their profile they will see in the field of age a value undefined. This is not what we want. It would be better if we could make it more clear. Instead of undefined we can give it some default value so it’s less confusing. Options are endless but let’s just make it “-“ if the field ends up being empty.

This time, in case the customer skips the age field, the default value will be set to “-“. This is a more modern way but alternatively, you can also conditionally check if the value is undefined and set a default value if so.

What we did here is that we set the default value conditionally. The age property will equal to age parameter if age doesn’t equal to undefined. If it does then the value will equal to “-“.

As a result, constructor functions are reusable object templates that share the structure and make it easier to create objects of similar “type”. The real-life examples can be accounts of customers in the bank or e-commerce website where the structure is the same across all customers.

Time to remember where we left off. We started all this when it came to function definition.

Common ways to define a function:

Function declaration
Function expression
IIFE
Methods
Constructor functions
Arrow function expression
Generator function

We already covered function declarations, function expressions, and IIFE. Time to understand arrow function expressions.

Arrow function expressions

Now that we know what function expressions are, it will be much easier to understand what an arrow function is.
An arrow function is a more modern alternative to traditional function expressions.

The benefits of the arrow function are:

Readable, simple, one-liner syntax: You can omit the keyword function, braces, and even return.

It’s important to note that you cannot always avoid braces and it can be done only when you have one statement in the function body.
Otherwise, you have to use braces.

When it comes to arguments, you can avoid wrapping an argument around curly braces. But you can do this only when there is just one argument.

Lexical “this” binding: Arrow functions don’t have their own “this” context and inherit it from the scope they are located in. This eases the usage of “this” when it comes to callback functions. Here is an example of an arrow function we use in a class:

We have a class Counter that has a method counter.
In this method, the count is increased but 1 every time it’s called and we log the current count to the console.
It executes with the help of an interval function that is called in the constructor all the time.

The interval has a callback function that runs only after 1 second. In this case, both interval and counter are arrow functions and they use the “this” keyword.

Traditionally, this refers to the context it is used in. In the case of arrow functions, this refers to the context it is surrounded by, the Counter class context, simple as that.
What happens if we transform the interval function and a callback function inside it to the regular function?

I changed only the interval function and it’s not an arrow function anymore.

For the purpose of understanding, I am going to change the code a little bit.

First, when the interval function runs, I log to the console the this, so we can understand what it refers to.
Then, I log to the console another this keyword inside the callback function that runs after 1 second.

Would this return different results?

The first this:

The second this:

As you can see, the first this refers to the Counter context but the second one to the global object (window).

But why?

When it comes to functions, this keyword can act differently depending on how the function was called. In this case, our concern is callbacks which we used in an object.
When JavaScript is read by the browser engine, it creates an execution context like a global execution context, and then for each function, there is a function execution context.
All this is piled up on top of each other creating a call stack.

If it’s a regular function and you call it in a regular way it will execute according to the order you wrote it.
In every execution context, we have various information about the function, one of which is the information about the this keyword as well as where this function was called from.

Callback functions are the functions passed into the regular functions that are also called higher-order functions.
They have priority just like variables, they are first-class citizens.

But the callback function is a lucky friend who was invited to this special party. And how the party will go depends on the higher-order function, not the callback function.
And the THIS party is no exception.

Meaning that in order to understand what this keyword refers to we need to understand who the main character is.
In our case, the callback function is called inside a function called interval. The interval is called in the constructor. The this keyword in the constructor refers to the instance of the Counter class.

The this will be automatically bound to the Counter so that’s why the first this refers to the Counter.
When we call the setInterval callback function it doesn’t have its context and when there is no context. As a result, a default context will be set to a global context.

If we use strict-mode then instead of global context the value will be set to undefined.

Let’s write the same class again but this time I will try to implement the counter like before but again without an arrow function:

What will happen?

It will throw an error because this refers to the global object and it cannot find a counter function.
When the execution context of the interval function has ended, the callback function comes with a little delay so it cannot associate itself with the context of the function it is located in.

When we use an arrow function, the this keyword would bind to the lexical scope, the scope it is surrounded by.
But what did people do before the arrow functions?
Obviously, there are other solutions.

Some people don’t want to use the arrow function even now and prefer other options.

To solve this issue you can simply use a bind() method. This is a method that can manipulate what this refers to.

Considering that our main goal here is to cover functions, I recommend you to read more about bind methods where I also expand objects.

No arguments: Arrow functions don’t have their own arguments as they inherit them from the surrounding scope.

This helps to avoid any issues with variable shadowing.

Cons of an arrow function

Even though we discussed some benefits of arrow functions and how the “this” keyword works, it can also be problematic at times.

There can be scenarios when we need to access the function’s this keyword.

Before going further, make sure you have read about the callbacks, methods, and constructor functions.
In what scenarios do we need to access function’s own this?

Object methods When it comes to methods, we usually have the need to access other properties of an object where this method exists. This means that when we attempt to use the this keyword, the arrow functions will cause an issue.

Why?

Because this keyword will not refer to the surrounding scope of this object but to the global object instead.
As a result, using arrow functions isn’t a good idea when it comes to the methods.

Here is an example for better understanding:

Constructor functions A similar issue with this keyword takes place when it comes to the constructor function. That’s why we don’t use arrow functions in constructor functions as the reference of this keyword is very important.

If we try to use an arrow function in the second example it will throw a TypeError that “Customer is not a constructor”.
We can rewrite the function and keep it an arrow function. We can make it look like a constructor however it won’t have all the key features of a constructor.

Callbacks Just like in methods, similar concerns apply when we use callback functions. As long as a callback function is surrounded by a function declaration, it will work fine. Even if the callback function itself is an arrow function. But if we wrap a callback function with another arrow function, it will not give us the result we need.

Event handlers Events in JavaScript are various operations that take place under specific conditions like the page loaded, the user clicking a specific button, the user scrolled, and so on. When we work with events, we use a callback function, a function that follows the operation (click, load, scroll). During the this keyword usage, we need to be sure that its reference doesn’t go outside the context. We need to be sure that this refers to the scope it is surrounded by.

That’s why using an arrow function isn’t the best idea as this keyword will refer to the global object instead.

In this example, we are targeting a button with the id root.
The first event is implemented using a regular function and the second one an arrow function.

What will be the output?

The first click will show the button as this keyword refers to the button.

In the second case, it will return an object Window because it went outside the scope.

Generator function

A generator function is a special function that allows you to control the execution process — you can pause and resume it while generating values one by one!

To create a generator function you need to add an asterisk(*) after the function keyword and inside the body you use a keyword yield which pauses the execution process to return the “yielded” value.

Next, the function can be resumed to yield the next value.
The syntax is a little different but overall very similar:

This doesn’t make sense much but let’s go further.

When you call the generator function it doesn’t execute right away like a regular function.

Instead, it creates an iterator object aka a generator object which is going to control the execution of our generator function.

Iterator is kind of a tool or feature in JavaScript that enables us to go through each value, one at a time, across various collections of data.

Iterator object has various methods that help us to control the execution process of the function.

Let’s save the generator function and inspect what it creates:

Once we check the console, this is what we get:

When we call the function it simply creates this generator object but we need to use methods to make the function do something.

So it doesn’t execute the function, it’s a tool to execute the function in the future.

Generators can have several statuses:

Suspended: A generator is created but hasn’t executed anything yet, it’s paused.
Closed: The generator got terminated. There can be several reasons: we finished yielding all the results, we used a return or we threw an exception. Keep reading further to understand better what all this means.

Generator methods

Generator methods are actions that help us to execute the function and yield a result from it.

First, let's save our generator in a variable:

Next, let’s start yielding results using one of the methods called next().

This method will yield the first yield only, not all of them.
After we yield the first result, the execution will pause.

As a result, we will receive not just 0 but an object with two key-value pairs:

The value property is the result we need to receive. In case there is nothing to yield and we try to use the next method anyway, it will return undefined.
The done property is a boolean that indicates whether the function finished execution and if there are more results to yield. If the done property is false, this means we have more to yield, otherwise, it’s true.

The next method

Instead of logging it to the console let’s save every yield and show them all:

As a result, we will see the following:

Similar to regular functions, we can pass arguments and return some calculated values. You don’t always need to return just one static value like in previous examples.

In this example, we passed a number and as a result, returned the double amount. You can pass as many arguments as you like.

Yield or Yield*

You can also use yield in different ways. When we use simply yield, it stops execution and returns one value that was written after this keyword.
When we add an asterisk(*) at the end of the yield, it will iterate over the data we wrote after it and return each value until it’s done. Usually, we add data that can be iterated through.

As a result, you will see 1, 2, and then 3.

Another way you can use yield* is to delegate the yield of other generators. This way you can combine several different generators that bring one result or just make a structure more organized:

As a result, we will receive “hello” and then “there”.

The return method

The next method that you can use is a return which terminates the execution and if you try to use the next method again, it will always return an undefined value. The done property will be set to true.

Let’s add a bit more code to our previous generator:

I added a new variable where I used a return method. As a result, you will see the following:

Additionally, we can pass a value to the return method and instead of returning the value of undefined, we can pass the final value we want to be returned.

Let’s try it out:

What do you think will be the result?

As you see, when we returned the final value, it is now replaced with terminate however the next ones remain undefined.

The throw method

The throw method is used to terminate the execution and throw an exception.

An exception is an event that is unexpected, most often it’s an error that we didn’t expect.

To handle such errors we need to use try…catch block. This block is a statement in JavaScript where in the try block we place the code we suspect might throw an exception and in the catch block we handle the error.

There are also other blocks we can use, for example, finally. In this block, we do something that will execute no matter if there is an error or not.

As a result, it’s a great idea to use the throw method along with try..catch because we can handle the flow of the situation and handle the errors.

Let’s implement the throw method:

In this example, we yield the first result after which we throw an exception.

By using a new Error we create an error object and add a custom message.

Next, we try to yield the result again.

What will happen?

We indeed successfully yield the first result and then we throw an error. Due to this error, the execution is terminated and the second yield is undefined.

Why?

Because the execution has stopped and the rest cannot be revived anymore.

Pros and cons of generator functions

Pros

“Lazy” execution: This means that these functions are executed only when you call the next method. This can be useful when you don’t need all values.
State: Their state remains the same while you keep calling your next value and this eases the process of creating your own iterators. This way it’s easier to control the flow.
Dealing with infinity: Considering that you are controlling when to get the value and when to stop, this makes it easier to work with infinite sequences like natural numbers, Fibonacci sequences, or randomly generated numbers, for instance.
Memory-efficient: Instead of retrieving tons of data, you save a lot of memory by yielding only the part of values instead of storing the whole collection of data.

Cons

Hard to reach: You cannot perform several iterations in parallel which we might need sometimes. You also cannot retrieve just any random element and we cannot start at any part of the code.
Complex: Though it seems like we have a lot of control, at the same time it adds an extra layer of complexity. We have to expand our logic with a lot of code and extra yield, yield, yield.
No usage in callbacks: In callbacks, we are able to use generators however it’s not the best idea. The main idea of generators is to make asynchronous code look like it’s synchronous. When asynchronous functions are harder to control, generators may be handy at times. Incorrect usage might lead to callback hell and more complexity. Instead, better to use modern async/await.

Usage of generator functions

I think even after considering the pros and cons of generators, it can be hard to understand if we even need them.
I noticed that not much is written about them and as if they are useless. There seem to be a lot of modern solutions.

Let’s take several use cases and try to understand if we really need generators.

Loops that we can pause and resume
One of the reasons I found about the usage of generates is the ability to control loops much better, especially when it’s complex loops or asynchronous.

One of the reasons is said to be the internal state management. This means that when you pause the loops with yield, you can continue the loops exactly where you left off.
Does it mean only generators can do it? Absolutely not.
There are a lot of other ways to achieve this.

The async/await with a custom iterator
First, let’s define a custom iterator object that acts as if it’s asynchronous.

Then inside it, we will create a property current that defines the current state.

Next, we will add a method called next that awaits 1 second before proceeding further. This will simulate the asynchronous operation and artificially delay responses.
Finally, we will return an object similar to the generator response.

Time to implement the next method.

We will create an asynchronous function that interacts with our iterator and returns the result object.

It will be asynchronous because we don’t want it to block the other asynchronous operation that we made artificially in the iterator.

We will also use await to pause the operation and wait for our Promise to be resolved.

We also add a for loop that will run five times, this way we say that we want to call the imaginary next() method 5 times.
Next, for everything to work, we simply need to call the function:

As expected, we received a similar result and we can control how to run the loop:

Let’s compare this to the generator function and re-create everything above to a generator:

In this example, we created an array, similar to our for loop. Then we added a generator function where we loop through an array and yield each item.
Here are the results:

Exactly the same as it was in the previous case.
Visually, in means of the amount of code, I personally think that it’s almost the same, you can count the characters if you will.

Also, the generator function seems less complex and as if it’s easier to understand it.

The main question I had about generators is in what real-life case can I use them?

I found several answers what real-life examples of generators:

Processing big data or working with big data, one at a time, when you don’t want to affect the memory. One of the examples is working with APIs when you implement pagination. Instead of fetching the whole data, you can fetch only part of it and show this partial data depending on which page you are on. Working large databases, working with data formats like JSON, where you can pass or receive data row by row, and working with an image editor for instance, where you do batch updates like applying a filter.
Streaming data is data that you keep receiving endlessly, let's say the same real-time analytics, currency exchange rates or stock market data, real-time social media feeds, and so on. Generators in such situations should process and analyze everything step by step to avoid overload.
Task scheduling is another reason why generators might be useful. Situations when you need to manage and control several tasks that need to be done in sequence. Some examples are backup and restoration processes, building pipelines where you need to control several steps, database, migration processes, and so on.

Can you replace generations for such functionalities?
Yes.

You can use async/await and promises just like we did before.
You can use additional queries for API calls to retrieve filtered or partial data. If there are no queries supported you can also retrieve the data and cache it for later use.
If it comes to streaming data there are a lot of alternatives like Node.js streams, Websocket API, and message queues like Apache Kafka, there are also many streaming libraries.
For task scheduling, we also have many alternatives like task queues and various schedulers.

In the end, it’s really hard to prove that without generators you can’t do anything. That’s why I decided not to dig too deep for now.

Unary functions

In JavaScript, an unary function is a function that takes only one argument and transforms its value.

Though this is a very simple example, there are many various situations where we can use unary functions.

Built-in methods
One of the examples where we often have unary functions is built-in methods. There are methods that accept one value and perform some operation on this value.

These are several examples of unary functions that receive just one argument — converting string to an integer, converting string to a floating-point number, or parsing JSON and converting it to an object.

Besides the functions, we have a lot of unary operators that are very similar to functions.

The main difference between functions and operators in this scenario is the fact that operators existed in JavaScript earlier than functions as its design consisted of operators inspired by C-style languages. Operators in such programming languages are symbols or keywords that perform operations, just like functions do.

That is why we have many unary operators in JavaScript right now.

Let’s cover some examples of unary operators:

These are a few examples for a basic understanding.
The increment operator increments the number by one, then decrements by one, negation can convert a number to a negative value, and the plus operator is often used to convert a value to a numeric value.

When are unary functions useful?

Unary functions can be useful in two situations:

Currying
Higher-order functions

As we already covered higher-order functions, are the functions that receive functions as an argument and/or return other functions.

This is also a good example of where we can use currying:

As you can see, we used a high-order function that receives an array and another unary function that doubles each item in an array.

Currying functions

The reason we discussed unary functions is that they are often used in a functional programming technique called currying.

Currying is a series of unary functions, specifically a chain of functions where one function returns another function until the final result is received.

In other words, instead of passing several arguments to one function, you can divide it into several parts where each function receives only one argument.

The topmost function receives one argument and returns another function that expects another argument.

The next function expects and returns the same until the innermost function collects all of them and returns the final result.

Let’s get the results:

As you see, the first step is the upper-most function, then I passed another argument to the second function, and finally one more time I received the final result.

The amount of arguments a function takes is often called arity.

If a function takes 2 arguments it’s a two-arity function, if 3 then three-arity, and so on.

We can also convert the same function currying to an arrow function:

Everything remains the same, we simply used less code, and looks much cleaner now.

When to use function currying?

One of the best places where we can use currying is a function composition.

A function composition is when you combine several functions to create a new function.

Function composition is the best place where we can use function currying.

Imagine, that you want to perform two various operations.
-In one case, you want to take the value, increment it by one, and then double it.
-In another operation, you want to take the value, square it, and then subtract two from it.

Instead of writing a lot of functions for each operation, we can compose several functions together!

First, we can make a composition of increment and doubling.
Then, we can compose squaring and subtraction of two. If you notice, we also have similarities between these two options.

They both are going to take one value and both perform two actions.

As a result, instead of writing many functions, we can first write one function that will receive two functions and perform actions on the value it receives.
In our case, we need a function that receives two functions, right?

The function above is a reusable function that is going to receive two functions — func1 and func2.
The parameter “a” is the value our function is going to receive.

As a result, it will first perform an operation on a function one, func1 and the result of the func1 will be passed to the second function, func2.

So the function composition result will be the result of a second function argument which performs an operation on a result of the first function argument.

Let’s understand what is going on in the code above.

The function composition expects two functions.

We are going to achieve the first goal — increment the value by one and then double it, so we need two functions. These two functions we need are add and double.

Next, we need to pass these functions to our function composition.

But as you see we didn’t pass any arguments yet. Let’s check the value of the addThenDouble:

The value is a function reference, it doesn’t do any calculations just yet.

The value we save right now is only the function reference. We need to call this function.

That’s why in the console we call the function addThenDouble and pass a value we want to work with.

As a result, we will receive 6.

Why?

Because func1 will add 1 to the argument with the value value 2. As a result, we have 3, and then func2 will double the result of the function. The calculation will be 3 * 2 = 6.

One more example:

Don’t get confused and remember that the very first function, the composition is created just once.

We only re-created the functions it will receive.

Alright, what is going on in the code above?

Our second goal is to square the value and then subtract two from it.

Accordingly, we create two functions which we later pass to the function composition and save it in a variable named squareThenSubtract.

Next, we pass the value and as a result, receive 7.

Why?

Because the first function will be a square of 3 which is 9 and then we subtract 2 which makes it 7.
You might ask, is this the only solution for a function composition?

No, there are other ways to handle such functions.

One of the ways to implement function compositions is a utility library called Lodash that provides various functions to perform different tasks one of which is the compose.
This function works just like the function currying we wrote ourselves.

Whether it’s better or worse, I personally THINK that it depends on various factors — your preference, company preference, the goals, and the structure of the code.
If you use the library for only this functionality, do you really want it to occupy the extra space? Or maybe you prefer to have more control over the function composition and prefer to create it yourself? I have not really used currying much myself and don’t have one strong opinion about it right now but I believe it depends on many things.

Let me know in the comments what you think about this.

Pure functions

Pure functions in JavaScript are functions that always return the same output for the same input and don’t have side effects.

What is a side effect?

In Javascript, a side effect is a block of code that does something other than producing the result. It’s a code that works and affects something outside the scope. Let’s say you have a button that is supposed to update a specific number but beside this number, it also updates something else. In such a case, we say that this function has a side effect.
In other words, side effects produce something more than they are supposed to produce.

Any function that doesn’t have a side effect is a pure function. If a function has a side-effect it's an unpure function, hence, as long as you understand side effects, you understand pure functions.

One of the most common side effects takes place when a function depends on a variable that exists outside of its scope.

In this example, the function called add updates the variable count which cannot be controlled by this function. This also means that the output depends on this variable and if it’s not available anymore or something else updates it, the result will be different. Basically, you will never know what the output might be, you can’t always control the logic.

Another common side effect is using a console log in a function. Why? Because the console is an external object as well, similar to the count variable.

Another side effect that we often come up with, is DOM manipulation. DOM (Document Object Model) is an interface that you see when a webpage is displayed. With JavaScript, we can perform various operations that can manipulate DOM. You can add, update, or remove various elements, whether it’s a div, header, or footer. You can also change the content of paragraphs. All this is a side effect because you are changing something outside the function that doesn’t belong to this function.

Working with APIs is another common side effect. It’s because working with external resources is beyond our control and that is what side effect is all about.

When working with an external API you send a request and wait for the response, you parse the data you received and transform it, and you handle the responses and the errors you might receive. The whole process is full of side effects. Similar situations take place when we work with databases that cannot be controlled with our code.

Finally, timers, like setTimeout, that cause asynchronous code, and event listeners that also can be asynchronous and cause external change are considered side effects.

Top-level functions

In JavaScript, you will, from time to time, hear a term top-level function. It’s not very popular but good to know. The top-level function is simply a function that is located in the global scope. It’s the topmost function. It’s not wrapped by other functions, it’s not located inside any objects, classes, or any “interface”. In other words, they are directly located in the global object aka window object.

Nested Functions

Nested functions are functions that we create inside other functions. In other words, nested functions are the functions nested inside other functions.

This helps to encapsulate code and functionality in function blocks.

In the top-level function example above, the nested function is the notTopLevel function.

This nesting helps to create more scopes and can be useful when you need to encapsulate some operations. The nested functions have their own scope and the outer function does not have access to the nested function scope.

If you already read everything above, this should be very easy to understand. Otherwise, I recommend you go back to the function scope discussion.

Recursion

Recursion in Javascript is a technique where a function calls itself in order to perform a specific task.

The function might keep calling itself until we give an indication that it reached the endpoint. To avoid endless recursion we provide a so-called Base Case. Base Case is a condition(s) that stops the recursion.

Recursion is often used in more complex calculations that break down large problems into smaller ones.

Let’s create a simple recursive function to illustrate how it works. This is a simple example, as recursion is often used in more complex calculations.

Image, we want to calculate the sum of all positive numbers from one to the number we provided.

If the number provided is 4, I want the sum of 1, 2, 3, and 4.
To achieve this, we can pass the number to the function and calculate the sum by taking the number plus this number minus one, so it will be the previous number.

If we pass 4, we will take this 4 and to add the previous num, it will be 4–1 so it’s 3, then 3–1 makes it 2, and so on.
If it continues this way, we might go into minus. That is why, when creating recursion we need to think of a base case that will stop this recursion at some point.

As we decided to work with positive numbers, it means we simply need to stop the recursion when we reach the number 1. We don’t want 1 to go below one.

Let’s understand the process above.

-The function getSum receives a number 4. Checks if it equals 1 and if it doesn’t we move to the else block.
-The function returns 4 + a result received in the getSum where we pass 4–1.
-What will be the result of 4 + the result of getSum? It will be 4 + 3 + again the result of the getSum. The number in the if block is not 1 yet, so we still move to the else block.
-What will be the result of 4 + 3 + getSum result? It will be 4 + 3 + 2 + again the result of getSum.
-We finally reach the point where the passed “n” parameter equals 1 so the getSum returns 1 and ends there.
-As a result we have 4 + 3 + 2 + 1 which makes it 10.
The function keeps calling itself recursively until we reach the base case of 1.

When to use a recursion?

There are several use cases for recursive functions.

Mathematical calculations: Factorials, Fibonacci sequences, and exponentiation are examples of recursion usage.
Divide and conquer: Algorithms known as divide-and-conquer like quick sort or merge sort are examples where you can use recursion.
Tree traversal: Binary trees, DOM trees or file systems are examples of data structures where we can perform depth-first search or in-order traversal with the help of recursion.
Graphs: Detecting cycles, finding connected components, or graph-related problems are often solved with recursion.
Backtracking: Sudoku, Hamiltonian cycle, Word search, or similar maze-like problems can also be solved with recursion by using a backtracking technique.

Conclusion

You finally reached the end, congratulations! We covered a lot of topics like function declarations, expressions, higher-order functions, closures, and callbacks. Various functions are useful in various situations and sometimes it’s hard to understand which one is better. I didn’t cover everything in even more detail as some topics go further than functions but I hope to expand these topics layer. For the beginner, I believe it’s a great starter and will ease the process of understanding the power of functions in JavaScript.

JavaScript Collections Guide

Ekaterine Mitagvaria — Mon, 26 Jun 2023 19:39:39 +0000

In JavaScript collection is a collection, a group of data that can consist of various types of data that have different behaviors. The collection of the data can have various data types or this collection itself can be a specific data structure.
If you have not yet, after this post, I recommend you to read my post about data types in JavaScript and then data structures.

There can be 3 types of collection in Javascript:

Indexed collections
Keyed collections
DOM collections

Indexed collections

The indexed collection contains data that is ordered by index and can also be accessed using this index. An index means the position of data. For example, imagine people in a queue. The person closest to the counter has an index of 0, so they are at position 0. The next person has an index of 1, then the next one is 2, and so on. In JavaScript, the index always starts with 0.
Indexed collection can be an Array or TypedArray. Let's go through each of them.

Array

The most popular and well-known collection of data is an array. An array is an index collection of ordered elements that have their own index and can be accessed by this index. Arrays can contain any data type and even other arrays. Regular arrays are not type-based. This means that you don't have to define what data type you are going to use inside the array. You can use everything together and anytime you want.

Creating arrays

There are several ways to create an array. The easiest and most modern way is to create a variable with a value of empty square brackets. Later on or right away, you can place there any data you need.

Accessing array elements

To excess an array item, you can use an index (position) of the target item. Just don't forget that index starts with 0 so the first element is index 0, not 1.

Destructing arrays

Destructing is a way of extracting data from an array in the most efficient way. Arrays can be very complex at times and even have several levels.
The most simple way to retrieve elements from an array and very easy for beginners to understand is targeting the elements by index. For example, if you need a specific item, you can count its index and retrieve this element.

Looks easy, right? But let's say I want to retrieve more.

But what if I have 100 elements? You are going to spend so much time retrieving everything one by one. By using a destructing we can minimize the code and time.

It looks so much shorter and easier now. As you can see I placed new variable names in an array and each variable matches the value in an array by its position. My first variable is apple and the first element was assigned to an apple. There are many tricks and this is not the only thing you can do with destructuring.
Image that you want to retrieve only the first value and save the rest separately. It is absolutely possible!

I repeated almost the same logic with a little difference. The first element is saved accordingly, just like before. However in order to save the rest of the elements I am using a rest parameter (the three dots) and a desired name of the variable.
What happens if we don't use the rest parameter? It will not save the rest of the elements from the array but save the one according to the position (index) and the rest will be simply ignored. Let's use the exact same example but without the rest parameter.

Another trick that you can use is skipping the specific index. For example, you want to retrieve the first and the third element. To do so, you can write an empty space a comma, and the next variable name.

As you can see, we skipped an orange and moved on to the last element.
Arrays can often be flexible and change a lot. What happens if you add more variables than there are elements in an array? Nothing, it will simply be undefined.

However, it might not be convenient because you don't want the website users to see any values they don't understand. Until they are reading my post haha. To solve this issue you can also add a default values which will replace this undefined until there is an actual value.

Array methods

Arrays have various methods that can perform fast operations on the array without having to write everything from scratch. Methods are something similar to functions (not the same) that already exist in JavaScript so you don't have to create anything yourself. You can read more about the array methods here.

TypedArray

Typed arrays are not arrays. It's an array-like object, specifically a buffer. A buffer in JavaScript is a memory space (usually RAM) that stores binary data. This buffer, a typed array, stores integers in a specific order that is very similar to an array. Compared to arrays, typed arrays cannot be altered once created. Even though arrays and typed arrays are different, they do share several methods but not all of them.
You might ask, if they are so similar why does a typed array exist in the first place? As we already discussed, regular arrays can hold any data which we can manipulate at any time. However, the web keeps developing and there is more usage of heavy data like videos and audio. Such data is much harder to work with for the browser so it needs more time and effort! Of course, this is more complicated than this behind the scenes but all you need to know right now is that typed arrays store raw data that works much faster in the browser hence improving the performance which is vital for heavier and more complicated data.

TypedArray architecture

The typed array is split into two parts - buffers and views. A buffer contains just data (memory) and nothing else while a view turns this data into a typed array by providing a data type of context (a data type that turns data into a typed array), a starting offset, and the number of elements.

Creating TypedArray

In order to use a typed array you need to create an ArrayBuffer and then view it. When creating one you can either create a view first by indicating the desired size and type or you can create an array buffer and then the view that points to it.
The views can be various and a single array buffer can have different views.
Let's create a view for a typed array with a specific size and type.

We created a view with the type Uint8Array and a size of five. We are going to cover the view types very soon so it's fine if you don't understand what it means right now. Let's see what it shows in the console.

Pay attention to zeros. The five zeros you see is the size we have set previously. But they are empty right now and there is no data yet. Time to save some data there by using an index just like in an array.

Let's see the console again. Can you guess what will change?

As you see, there is now the number 10 at the index 0 and 20 at the index 3, just as we set it.
Time to create an array buffer first and then the view, so it's a revered way of a typed array creation.

Looks very similar, right? As you understand, the result is exactly the same.

TypedArray views

Typed array views can be different as they can view different numeric types, for example, Int8, Uint32, Float64, and so on. It all depends on what you are working on and what type of data you need to process.

When to use TypedArray

Typed arrays are often used with web APIs. An API is a middleman between the application and the server. For example, when you are registering somewhere and then logging in, all the information is sent back and forth. By using a website you ask an API what you want from the web server.
Browsers have various built-in APIs that use the typed arrays.

WebGL

WebGL(Web Graphics Library) was the first API where the typed arrays were used. It is an API that renders interactive 3D and 2D graphics without having the need to download or install anything. In our case of JavaScript, we can render it in HTML Canvas.

Canvas 2D

This API also works along with HTML Canvas and uses typed arrays. It provides various methods, objects, and properties to draw and manipulate the canvas element in real-time.
XMLHttpRequest Level 2
The XMLHttpRequest2 API allows JavaScript to make HTTP requests in the browser. Before it, you had to parse a string into a typed array but now you can directly receive a typed array response.

FileReader

FileReader is a method of reading the content of a blob or a file. A blob is a file-like raw data read as binary data or text. A file is a specific kind of blob. This is where typed arrays come into play as we have to work with binary data.

Converting TypedArray

You can convert typed arrays from one type to another by using ArrayBuffer and you can also convert a regular array into a typed array.
To convert an array into a typed array you can use a built-in method typedArray.from() that accepts three parameters typedArray.from(source, map, arg). The source is a target array, the map is an options parameter for a function that is called on each element and the arg is the optional value used in the map function.

Converting from one typed array to another works just as simply. You simply target the desired typed array view and pass the typed array you want to convert.

Keyed collections

A keyed collection is a data collection ordered by keys instead of an index and consists of key-value pairs. In JavaScript, we have two types of keyed collections - Map and Set.

Map

A map is a simple key-value pair object where you can iterate through elements in insertion order. Keys always need to be unique just like an index. To create a map you can use a map constructor and then add the desired elements by using a set method. The key name needs to be a string and a value can be any data type.

In order to access the key, you can use a get method and the key name. If you use a key that doesn't exist, it will return an undefined.

Map methods

Maps have various built-in objects including the set and get which are the most used ones.

Map.prototype.clear()

This method removes all existent key-value pairs and resets the map.

Map.prototype.delete()

The delete method returns true if the key existed and has been removed and false if it doesn't exist.

Map.prototype.entries()

Returns a new iterator object with all key-value pairs. Iterator means that you can iterate over it, and loop over each key-value pair.

Map.prototype.keys()

This method is very similar to the previous one and also returns an iterator object that includes only keys.

Map.prototype.values()

The same works for this method but instead of keys it returns the values of the object.

Map.prototype.forEach()

This method works similarly to the forEach method in arrays. It executes a function for each key-value pair in the map in insertion order.

Map.prototype.has()

The has method checks whether there is a value associated with the key that we are passing into this method. So it returns either true or false. Note that you need to pass the key, not the value.

Iterating over maps

To iterate over maps you can use a for…of loop. To target both key and value, a very easy way to do so is the usage of destructuring.

The same can be achieved using an entries method on the maps object. Compare them and find the difference.

If you want to work only with the keys, you can use another method for keys.

And the similar for working only with the values.

WeakMap

A weak map in JavaScript is also a key-value pair collection. They look very similar however they are not exactly the same. Before we go further, let's create a simple weak map.

Difference between maps and weak maps

In weak maps, the keys can only be objects (or non-registered symbols) while values are more flexible.
However, what is the reason that it's called weak? The reason behind it is the fact that these key objects are a target of so-called garbage collection.

Garbage collection

Garbage collection in JavaScript is automatic memory management. It monitors the memory allowance aka memory allocation and determines whether a specific block of memory is needed or not and gets rid of it if so. When the object keys are collected, their respective values are also collected unless they are strongly referred to something else, an object in this case.
In weak maps, you also don't have methods to access the keys as they are weak. Weak maps hold the reference to the key, not the key itself.
You cannot iterate over the weak map like you can with the map but they do share some similar methods like get, set, delete, and has.

Why do we need weak maps?

One of the main uses of weak maps is a memory leak. A memory leak in JavaScript is a process when JavaScript keeps allowing the specific block of memory and doesn't release it. The unused memory in the system keeps piling up, there is less memory and as a result, an application might crash.
Unused memory can take place in different situations. For example, unused event listeners that are attached to specific elements. An element might be removed but the unused event listener is still there. Now imagine a lot of event listeners like that that use a memory but we don't even need them. Other causes of memory leaks can be callbacks, timers (e.g. setTimeout), closures, and large data structures.
For instance, imagine that you want to track how many times a user clicked the ads on your website.
First, we will create a regular map where the user will be the key and the value will be how many times they clicked the ad. When the user leaves the website, we don't need the information about the clicks anymore.

Once the user object is gone, the object will remain in the map as a key so we manually would need to clear that map because it is not garbage collected and takes up the space in the memory. If you have a bad website maybe hardly anyone visits it but imagine if you had a lot of visitors. To test this, let's log the map to the console and see what it contains.

As you see, even though we said that the object of the user is null ("empty") the map still holds the information about the user.
This is where a weak map comes into play. A weak map is going to "weakly" refer to the user object which will allow the process of garbage collection. We are simply going to replace a map with a weak map and then see what happens to the information about the user once we try to clean it.

As you can see, there is no more user object and a weak map got garbage collected! So awesome, right?!?!

Set

Set is another keyed collection that consists of values. What makes this collection special is the fact that you can have only unique values and it's impossible to add any repetitive data. When you try to add a repetitive value, it will keep the one you added first.
Let's create a simple set to understand how it works.

Next, I am going to try to add the repetitive value apple. What will happen?

Nothing. There is not going to be added anything. The repetitive value is not going to be added and the old one removed. It will be ignored. The apple result you see is the old value, not the new one. Because elements in the set are placed in the insertion order so if it was the new value it would be the last, not the first.

Set methods

Just like maps, sets also have various methods. Compared to maps we use add instead of set to add new values.

Set.prototype.clear()

This method removes all existent values and empties the set. But when you check an empty set it returns undefined. Instead, you can use a size property and it will show 0 when it's empty.

Set.prototype.delete()

As the name suggests the delete method removes the value that we indicate.

Set.prototype.entries()

This method creates an iterable object of key-values where keys are equal to values in this case. So it becomes something similar to a map

Set.prototype.keys()

This method returns an iterable object containing values. Set.prototype.values() is exactly the same.

Set.prototype.has()

Just like in a map, has returns true or false depending on whether it has a value we passed to the method.

Set.prototype.forEach()

This method executes a function for every single value in their insertion order.

Iterating over sets

You can iterate over sets using a for…of loop.

WeakSet

A weak set compared to a regular set is a collection of objects while sets can contain any data type. A weak set, just like a weak map holds information "loosely", for the purpose of temporary storage. Just like a set, a weak set also has unique elements and they are not repetitive. The weak sets just like weak maps are also used for garbage collection so make sure not to skip the topic about garbage collection that I have mentioned earlier.

A weak set also supports methods like add, has, and delete however it cannot be iterated over and doesn't have a size property. A weak set usage is very good for the yes/no situation when let's say you are tracking your users and you check how many people are online right now. But when they log out you don't want to save the objects of the users. Just like with the weak maps, similar logic works with the weak set as it's garbage collected.

DOM collections

If you already had a chance to work with HTML and Vanilla JavaScript together, you most likely have already worked with DOM collections. The skeleton of the website is built on HTML that consists of various tags. For a button there is a button tag, for a header there are various tags depending on the size, and so on. All these tags are objects. When you want some action to be done by clicking on the button, you target the button object with the help of JavaScript. You can target any HTML tag and you can do whatever you want with them.
Sometimes, you might want to target all the buttons on the current page. The collection of these buttons becomes a DOM collection which is an array-like collection. It's more similar to an index collection though it looks like an array.
Let's check how many span tags there are on the main page of Amazon. To achieve that we can target span elements by using document.getElementsByTagName("span"). This will target all the spans.

Wow, so many spans!! And here we got all the spans in just one line.

Conclusion

Congratulations! You reached the end of the JavaScript collections and this is a great start if you are a beginner.
I hope you learned or re-learned something about indexed collections that are based on index values, keyed collections that consist of key-value pairs, and DOM collections that are simply groups of HTML tags. Of course, there is much more to learn about collections however if you are just getting started I believe this is somewhat enough for the start!

Type Casting in JavaScript

Ekaterine Mitagvaria — Sat, 13 May 2023 19:35:18 +0000

Typecasting in JavaScript is the conversion of one data type into another data type, for example, a number to a string. Typecasting is often also known as type conversion.

What is data type?

JavaScript has 8 main data types:

String
Number
Boolean
Null
Undefined
Bigint
Symbol
Object

The object can be divided into more data types or to be more precise there are data types that are also objects:

Array
Object
Date

JavaScript is a dynamic language with dynamic data types because variable types are defined the moment they are assigned the value. Check out my post to learn more about data types if you don't have prior knowledge.
There are two types of typecasting - implicit typecasting and explicit typecasting.

The implicit typecasting

The implicit type conversion takes place automatically by the interpreter or the compiler when there is an internal requirement for that.
To understand what I mean exactly, let's go through several examples.

The implicit typecasting of strings with plus to strings

When you try to add any data type to a string, JavaScript will convert anything to a string. A string plus anything else even if not a string, will be converted to a string automatically. Note that this works like this only with a plus because any other math operation will return a NaN(Not a Number).

The implicit typecasting of numeric strings to numbers

When you have a numeric value in a string but you perform a math operation (specifically subtraction, multiplication, or division) with another numeric value, the numeric string will be converted to a number. Note that this does not work with a plus.

Also, both values can be a string with a numeric value as well and as a result, you will still receive a number.

If there are any other types with such math operations rather than a number or a numeric string, there are some other behaviors that we will go through shortly.

The implicit typecasting of booleans to numbers

If you use booleans in math operations with numbers then true is always converted to 1 and false is always converted to 0. Note that if it's a numeric string (a number in the string) then plus will convert the boolean to a string but anything else will convert the numeric string into a number.

Number + boolean

Numeric string + boolean

A number - boolean

Numeric string - boolean

Number/boolean

Numeric string/boolean

Number * boolean

Numeric string * boolean

The implicit typecasting of null to numbers

When used with numbers, null is converted to 0 whether it's a plus, minus, division, or multiplication.

The implicit typecasting of undefined

Performing operations with undefined always returns NaN whether it's a boolean, number, or null. Although an undefined plus string will convert it to a string as we learned earlier.

Undefined with numbers

Undefined with null

Undefined with boolean

The explicit typecasting

Opposite to implicit typecasting, explicit typecasting means data type conversion manually. This can be achieved via various built-in methods. Built-in methods are functions that already exist in JavaScript and you don't create them yourself.

The explicit typecasting to number

To convert a data type to a number you can use the method Number(). However, the results will be various depending on the data type and not always a number.

String to a number

Numeric string to a number

Boolean (true) to a number

Boolean (false) to a number

Null to a number

Undefined to a number

Empty string to a number

Date to a number

Note that the date itself is an object, not a number and the output will be different for you because the new Date() returns milliseconds elapsed since the start of 1970 in UTC, which hopefully has changed ever since I wrote this code.

The explicit typecasting to string

To convert any data type to a string you can use a String() method or toString(). Mostly we use toString() but it might give a different result in some situations. toString() does not convert null and undefined to string however String() does. toString() is often better to be used with objects and in the situation when you are sure there won't be any null or undefined.

Number to a string

Null to a string

Undefined to a string

Boolean (true) to a string

Boolean (false) to a string

Date to a string

The explicit typecasting to boolean

To convert a data type to a boolean we can use the method Boolean(). This conversion can be divided into two parts to make it easy to remember.
First, we will group those that return true and next, those that return true.

The explicit typecasting to false

The data types that confer to false using the Boolean() method are undefined, null, and 0. Additionally, NaN, '' (an empty string without space).

The explicit typecasting to true

Strings, numbers, and strings that have space convert to true if we use the Boolean().

Converting arrays to objects

There are several ways to convert arrays to objects. Let's go through each of them.

The spread operator

A spread operator is an easy way to spread an array inside the object.

A for loop

Another way to create an object from an array is a for loop. We create a key using the array item index and add an array item at a relevant position to the value.

A forEach loop

A very similar way will be looping through an array via forEach loop.

With the Object.assign()

Next, you can use an object built-in method Object.assign() to merge an array with an object

With the Object.fromEntries()

Finally, you can use another object method Object.fromEntries(). However it will only work if you have a 2-dimensional array, otherwise, it will throw an error.

Converting objects to arrays

To convert objects to arrays there are several built-in methods that we can use. Let's check them out.

With the Object.entries()

We used a similar method to convert arrays to objects and we can do the same by using entries. It will return a 2-D array with 3 arrays from each key-value pair.

With the Object.keys()

Next, we can use a keys method that retrieves only the keys of the objects.

With the Object.values()

Finally, we can do the same but with the values of the object this time

Type conversion vs Type coercion

Both type conversion and type coercion do sound and seem similar however they are different things. When we say type coercion it always is an implicit typecasting. If you remember, implicit means that it's done automatically so to remember it easier consider coercion and implicit kind of synonyms because coercing means 'persuading someone to do something by threading or force'. So it does kind of associate with the implicit because it's done automatically, 'by force'.
Type conversion however refers to the general process of typecasting whether it's an implicit or explicit one.

Summary

Typecasting in JavaScript refers to the conversion of one data type to another data type, such as a number to a string. JavaScript has eight primary data types, including string, number, boolean, null, undefined, bigint, symbol, and object. The object type can be further divided into additional data types, such as array, object, and date. JavaScript is a dynamic language with dynamic data types because variable types are defined when they are assigned a value. Typecasting in JavaScript can be done explicitly or implicitly. Implicit typecasting is automatic when the interpreter or compiler requires it. Explicit typecasting is performed manually using built-in methods. The Number() method is used to convert anything to a number, and the String() or toString() method is used to convert anything to a string. The Boolean() method is used to convert a data type to a boolean. In addition, arrays can be converted to objects using the spread operator or a for loop.

JavaScript for Beginners: Objects

Ekaterine Mitagvaria — Thu, 11 May 2023 11:11:21 +0000

What is an object in JavaScript?

An object in JavaScript is something similar to a real-life object.
For example, an object can be your computer. It has various properties like color, screen size, and many methods (functionalities) like internet browsing. Computers can vary though, for example, they can have a different operating system, like macOS or Linux.
Just like other data types, objects can contain various values. The values are written in a key-value pair saved inside curly braces. These key-value pairs are called properties of objects. Functions which are also properties are called methods.

Table of Contents:

Properties
Methods
Prototypes
Prototype chain
Prototypal inheritance
Constructor
The this keyword
Accessors
Iterating
Destructuring
Aliases
Built-in objects

Properties

Properties are key-value pairs that exist inside an object. The objects consist of a collection of these various properties that you can add, delete or change (not all of them though). Properties are written in key-value pairs where a key is the property's name and a value is one of the attributes containing the information about our key. Properties have other attributes besides the value which you don’t need much right now but it’s good to know. You can check them using Object.getOwnPropertyDescriptor(objectname, “key”).

Methods

Methods are properties of objects that hold a function. Functions are actions that can be performed on objects. Functions and methods seem very similar so I recommend you to read my post to understand the exact difference between them.

Note that when it comes to objects you can either use a function inside it as a method (call it) or you can use it as a property (not calling it). In order to call the method (make it perform the action) you need to use () and to use it as a property simply write it without ().

Prototypes

In JavaScript, objects are able to inherit features from one another with the help of prototypes and each of them has a property called prototype.
The prototype is an object itself so it also has its own prototype.
Objects have other built-in properties with various functionalities besides the ones that you can create yourself.

Let’s create a simple object to visualize the process.
I will create a simple person object that has a property of name with the value “Catherine” and a method sayHi that will console log a greeting when called.

As you see, to check the property value or call a method you simply write the object name, dot, and the property you need.

In the browser’s console log you can try to write the same but after the dot don’t write anything just yet. What it will do is that the browser will suggest to you the existing properties. And these are the ones I mentioned earlier! The built-in properties along with the ones you created yourself.

As you see in the list, we have various properties and one of them is sayHi that we created.
Now guess which one is the prototype property? It's the one called proto, so yes, it’s not called exactly a prototype. On top of that, you can also find the prototype by doing so Object.getPrototypeOf(person). Both ways return the same result.

You can also console log the person object and when examining the object you will see a propriety of prototype written like [[Prototype]]: Object. This is the reference to the prototype object.

When you expand it, it will show you various properties of this prototype because the prototype is an object itself and has various properties.

Prototype chain

To remind you, objects have a property prototype which is also an object so it has its prototype property as well. This is called a prototype chain and it can end when a prototype’s prototype is null.

Here is how the prototype chain looks in the console.
By using the same object as previously, let’s console log the person object and as a result, this is what we see.

Expand the object person to see what we have here. You will notice the [[Prototype]] that is an object.

Once you expand it, you will see various built-in properties of the object.

If you look down, at the end you will see a property proto that will direct us to the prototype. Click it and you will see built-in properties again.

Then again you will see another proto of the proto. If you expand it again, this time it will show null because the prototype chain has ended.

All this already exists in JavaScript by default but if you create objects and then construct more objects from the main object, you will get this type of chain.
I will get back to this in more detail but here is a quick example of what I mean and why the prototype chain is interesting.

Let’s keep using the same example of an object person but add some improvement. Please ignore the this keyword if you don’t know what it means, I will also get back to this later.

Imagine that this object person is the main object and we can create other objects from it while it will serve as a parent object. The name, age, country, and intro function we added to the person object will serve as default settings. To create a new object from the person object you can use Object.create().

Once you copy the person object, you will change the existing properties like name, age, and country. If you don’t it will just stay the same but we want to create a new person, right?

Now here is the tricky question. If I don’t add the sayIntro function to this new YOU object, will I be able to console log the same thing as with the object person? I didn’t add this method to our new object so can I use something I didn’t even add?

Thanks to the prototype chain, yes you can.

Let’s inspect the object you and understand what’s going on.
If you console log the object you and expand it, you will see the properties we have added like the name, age, and country. And of course, the prototype is always there when we have an object.

There is no sayIntro method available. But if you expand the prototype you will see all the properties of the person object, the one that we copied. So what happened is that the object you inherited everything from the parent object - the person. And that’s why we are able to use the sayIntro method, as it’s inserted from the main object.

Prototypal inheritance

Prototypal inheritance is a linking of a prototype between the child and parent objects. JavaScript already has a default object where built-in methods reside. But you can also create more parent-child objects. If you copy any object, it will inherit everything from its parent and it will be available inside the proto. This means that you don’t have to re-create the same method for every child as it will be inherited automatically.

How JavaScript is searching for a property

Imagine we are doing the same we did previously when searching for an object’s (person) property and called for sayHi. When we search for a property the first place where the search starts is the object itself. If nothing is found the search is not over and it moves to the prototype. If no property is found again the search continues to the prototype’s prototype. In the end, if nothing is found it returns undefined because nothing was found.

Constructor

A constructor is a regular function that we use in order to create an object from scratch or to be more accurate an instance of an object. Along with the instance you can add properties of your choice. Considering that JavaScript is a prototype-based language, constructors appeared much later and their main goal is the possibility for JavaScript to handle work as an object-based language.

In order to distinguish a regular function from the constructor there are some basic rules to follow:

It’s important to start a function name with a capital letter.
Constructors are not supposed to return any values but define properties.

Remember that object person example? Let’s re-create the same object but in a more modern way with a constructor!
First, we will create an object with a constructor function with properties like name, age, and country. Then we will create a new instance of this object.

You can change or add properties as we did previously by separating the object name and key with a dot and adding a new value.

On the other hand, changing properties as above is not always a good decision because what if you have an object with tons of various properties? It would take a lot of time to manually add it.
What if you created an object of a user with a username and email, for instance? Every time someone registers you are not going to manually write every detail. Or what if I have 20 or 30 various fields of information? That’s why, we can extend a constructor and add some arguments to the function.
Arguments are values that we pass to the function. I am going to re-create this code one more time but with arguments this time.

Looks so much shorter, faster, and nicer! Let’s understand what is going on here.
In the function Person, I added parameters like name, age, and country but they are not actual values just yet. Parameters are like empty boxes waiting to receive a value. When I start creating an instance of the ME, I also pass arguments to the function but this time with specific values. The constructor function will receive this information and create a new object with these specific values! Now you can simply use this constructor and pass values of newly registered users instead of manually adding each piece of information.

The this keyword

This is one of the hardest concepts to understand especially when you have no technical background whatsoever. And it’s also hard to figure out the best time to start learning it. I recommend you to come back to this once you finish the article and re-read the article once you read about the this keyword.

The this is not a variable and it’s called a keyword that cannot be altered or changed in any way. It’s hard to understand or explain it because it changes its value depending on where and how we use it. The most basic explanation would be that the this keyword refers to the object depending on how and in which object it is used in.

The this in a method

If you have read through, you noticed that I have already used the this keyword in an object’s method. When we use this in an object’s method, it refers to this object (where the method is located).

If we don’t specify where this method is getting the value from and it’s not located inside the method, it will simply throw an error of undefined.

Another good way to check which object the this refers to is by simply logging it into the console. If you do it in the method, it will show you the object where the method is located.

The this in a function

When we use the this keyword in a regular function (not a method) it refers to the global object. The global object is the object that exists in the global scope. To say it simply, global scope is created when your script file runs in the browser to read whatever you have in this file. It is the upper-most box that holds all the information. For example, if you create some variables at the very start of your script file, they will be located in the global scope.
I recommend you read this post to understand how the scope works.

The this in a function (strict mode)

A strict mode in JavaScript is a more strict way of processing JavaScript which is very sensitive to errors if you don’t know 100% what you are doing. To enable a strict mode you simply need to write ‘use strict’ at the very top of your script file. I am not going to cover what exactly it does but you can read about it here.
In the strict mode, the this keyword doesn’t refer to the global object anymore but returns an undefined instead.

The this alone

Using the this keyword separated from any object or function will refer to the global object that I mentioned earlier. As long as you place it globally, in the main script outside of any functions, blocks, or objects, it will return the global object.

Why would you even need it then separated from everything? Because the window object has various built-in properties that you can use.

The this in event handlers

Events in JavaScript are interactions captured on the HTML element that we can use in order to manipulate them. Let’s say someone clicks a button, we can capture that action and do something in response to this click. When using this with an event handler, the this keyword refers to the HTML element that was clicked.

The this with the call, apply and bind methods

In JavaScript we have three native methods call, apply and bind that can change the way the this keyword behaves.

The call method

The call method can call the object to which we want the this keyword to refer to. This also means that you can call a method on one object and this method can belong to another object.

If you have read everything with attention, you remember that this in the methods refers to the object where it’s located. The object person has its name and surname but when we use call the this keyword will refer not to the person object but to the one we pass to the call method.

Using arguments with the call method

The call method also works great with arguments. If the main object where you are getting the method from has some arguments, you can also pass updated arguments. Let’s update the exact same object a little bit.

If there are some arguments you need to pass but you don’t, it will show you the result string anyway but the unpasted arguments will become undefined.

The apply method

The apply method does exactly the same thing as the call method. Let’s check it out.

Using arguments with the call method

Although there is a slight difference when it comes to the usage of arguments. Instead of passing the list of arguments you need to pass an array instead. Simple as that, that is the only difference.

If you don’t use an array, then it will throw an error. It’s very useful if you have data in the type of array so instead of trying to retrieve every single item from the array, for instance, you just pass an array.

The bind method

Just like in the call or apply methods, the bind also helps to change which object the this keyword refers to. However, the bind does not execute the function but returns this function without executing it. In other words, we bind the function first and then we need to execute it separately.

Losing the this in callbacks

Did you know that you can use the this keyword in callbacks? If you have not yet make sure to read about callbacks first if you don’t know what it is exactly.

Here is a simple example.

The this loses its context and shows undefined instead.
To solve this issue we need to go back to the topic about the this behavior in a function: “When we use the this keyword in a regular function (not a method) it refers to the global object. The global object is the object that exists in the global scope. To say it simply, global scope is created when your script file runs in the browser to read whatever you have in this file. It is the upper-most box that holds all the information. For example, if you create some variables at the very start of your script file, they will be located in the global scope”. And on top of that the this behaves depending on how the function is called. When JavaScript is parsed and executed the engine looks at the reference of the function that is calling this function and checks what object was used to understand what the this refers to in the first place. When we pass the function to the timeout function, it’s not called right away so the execution of that object’s method is not controlled the original object anymore. And when the timeout function calls our function it does not associate it with the object it belonged to any longer and considers it as an independent function. In other words, the method of the object is not a method but a function now.

One of the fast ways to solve this is to wrap the method in a function and call it. The function we wrapped it around doesn’t have any of its own this and it just executes the method we pass to it.

Another solution is to use the method bind and bind the method back to the object so that this doesn’t lose its context.

The third option you can use is almost the same as the first one but you can also use an arrow function to make it shorter.

Accessors (getters and setters)

JavaScript accessors like getters and setters are methods used to get and set values.
Before going further let’s quickly understand what encapsulation is and how it’s connected to these accessors.
In programming, encapsulation refers to saving and storing the data in a way that makes it more restricted or limited to access this data directly. It’s a way of hiding data in order to prevent its exposure. Sometimes there is a type of data that is too vital and easy access makes it more vulnerable to changes. That’s why encapsulation is a great way to protect this data.
This is when accessors come into play as they help to avoid overwriting important data as well as validation of data before saving it.

Creating getters and setters

To create a getter or a setter, you can simply create methods inside the object just like down below.

A more official way to use getters or setters however is usage of the keywords get and set. It is almost the same. You simply create a function but with the keyword at the start.

Both ways work fine however using the second solution is much better as it has less chance that you will assign a wrong value and lose the data completely. If you noticed in the first example, it’s just a regular function where you add value through a parameter. In the second example, you set the value as a property instead of calling the function.

If for any reason you decide to use regular functions instead of get or set keywords, there is still a way to decrease the chances of making mistakes.
You can make the properties inside the getters and setters read-only. A read-only property means that you cannot overwrite or reassign it, so it’s only readable. Remember I showed you the property attributes? The attribute writable is set to true by default which means that we need to set it to false to make the property read-only.

To achieve that, we can use Object.defineProperties.

Protecting data in getters and setters

Just because you decide to use getters or setters, it doesn’t mean that the data is protected and we are good to go. Here is a simple example of the previous object that I am going to change with ease.

To protect the data, you should use the knowledge of scoping in JavaScript! If you have not yet, make sure to read more about the context and scope of the execution until you continue further.

A function scope

To protect the data with the help of a function scope, you can keep the data inside a function (that creates a function scope) and return an object with getters and setters.

If we try to change the name variable outside the function it won’t change because it is ‘hidden’ inside the function scope.

A block scope

The same logic will work if we place the code in the block scope (encapsulate it in the braces). But in this case, I also define the person object with var so it can be accessible outside this block.

Note that in this case, we didn’t use any if or while statement to use the braces, it is done for a purpose to keep the data ‘hidden’.

Which one is the best way? I would say that the first but it really depends on the situation, who you work with, how the logic of code is built, and your knowledge if you are working on a new or personal project.

Iterating over objects

An iterable in JavaScript is a data structure that has a mechanism that allows accessing its elements in a sequential manner. In other words, it’s a possibility to loop over the elements.
When it comes to objects however you cannot just loop over them with existent loops like for or for..of. Instead, you can iterate over object properties using Object.keys or entries using Object.entries.

To loop through properties you can use a for...of loop where you will loop through the keys of the object first and then you can use this key to access the value just like I did down below. My key will be the variable id and the value will be accessed using yourObject[theKey], productId[id] in my case that I saved in a separate variable.

Another way is almost the same where we use Object.entries. It returns an array of key-value pairs. Note that the key returned will be a string instead of a number but the value will be whatever data type you use.

You can also loop through object values by using Object.values but it will return an array with values and you will need additional manipulations to find a specific key if you need it.

Destructuring

In JavaScript, destructuring means retrieving/extracting a value from objects (and not only), saving the values in variables, and on top of that you can do this with several properties at the same time. You can destructure JavaScript objects in two ways, an old way, and a modern way. There is no big difference but there is a reason why the modern way is much better that I will show you shortly.

The old way

Let’s say we have a recipe with some products and we want to have each of them in a separate variable. This is how it was done before ES6. We simply retrieve each property one by one.

The modern way

And this is how it should be done in a modern way where four lines are replaced just by one thanks to modern destructuring. You retrieve properties in one go without the need to repeat so much code. It’s important to remember that the key name should match the one you use during destructuring because if you don’t, it will return undefined. This doesn’t happen in the case of the old method though and you can use any name of the variable there.

As you see yourself, the second method is much cleaner, faster, and easier and that’s why it’s much better as well.

Aliases

As I mentioned above when using the modern way of destructuring you cannot use any name and it has to match the key name in the object. To avoid this you can create use an aliasing feature. Alias is an additional name for someone or something, it’s the same as the word aka (also known as). Here is an example of how to use aliases.

I replaced every single key name with a different name so if you do not have any of them, you can replace it with something else.

The rest operator

There is a method that you can use if you need to retrieve just several properties but you also want to save the rest of the properties separated from the ones you saved in a variable. This can be done with the help of the rest operator and as the name suggests, it bundles the rest of the properties into an object. To save the rest of the data into an object, you can simply write any name of a variable where you want to bundle them up and write three dots (…) at the start of the variable.

The rest operator can be used even if you have just one item left or if you have none. Then it will return an empty object.

Default values

During destructuring, if the property doesn’t exist it will return an undefined. However, to prevent an error you can also set a default value that will replace the undefined. For example, we have the same recipe and we want to retrieve a property that doesn’t exist there now and might appear later. To avoid errors we can set a default value for the new ingredient that doesn’t exist now but might appear later.

As you can see, I added an onion property in the destructuring even though it doesn’t exist in the recipe object yet. I added a default value of 100g so unless the onion appears with some value in the object, it won’t throw any error and the default value will be used.

Built-in objects

JavaScript has various built-in objects. Built-in means that it's a predefined object that already exists so you don’t create it from scratch. String, Array, or Date are all built-in JavaScript objects often mentioned as Standard built-in objects. I am not going to cover each of them in detail at this moment however if you are interested you can read more about it here.

Summary

We went through the concept of objects in JavaScript, which are similar to real-life objects with their properties and methods. Objects contain key-value pairs called properties and hold functions called methods. They are also capable of inheriting features from one another with the help of prototypes. Prototypes are objects themselves with various built-in properties. JavaScript objects can be chained with prototype references that lead to the parent object. The prototype chain ends when the prototype's prototype is null. The article also provides examples of creating a new object from the main object and explains the significance of the prototype chain.

👀 Here is the main question, how many this did I use in this article?

12 JavaScript Number Methods Cheatsheet

Ekaterine Mitagvaria — Thu, 30 Mar 2023 16:03:12 +0000

This post assumes that you already know what numbers are in JavaScript or in general.

In JavaScript, when you have different data you want to manipulate this data in different ways and numbers are no exception. Manipulations can be various like converting it to something else, reducing or changing how it is displayed.
What are the methods?

Methods are almost the same thing as function - they both act. The main difference is that methods are functions inside objects and they are attached to them. Functions can exist on their own while methods cannot.

JavaScript comes with a variety of built-in methods that are ready to be used as soon as the language is implemented. These methods are pre-written methods and perform specific tasks such as mathematical operations, data manipulation, and even manipulating the Document Object Model (DOM).
Methods can be used with objects, strings, and even numbers and they offer the possibility to work with data efficiently without having to write repetitive functions over and over.

Number Object

As I mentioned, methods are attached to objects but how come numbers are objects?
In JavaScript, number itself is a data type and this data type is called a number. Data types like numbers are primitive types and they are not supposed to have an object method (object is a complex type). However, just like with strings, a number literal is automatically converted to a Number Object so it can have methods.

Number Literals

Literal is a term that refers to a value of a fixed data value, a numeric value in the case of numbers. For example, const myAge = 50, where 50 is a number aka numeric literal.

Number methods cheatsheet

This is the cheat sheet for number methods you can refer to when you need to manipulate numbers. However, I am going to expand each of them further anyway as each of them has its special characteristics and behaviors. Also, not all results on the cheatsheet might make sense as it's hard to show shortly what the result means or where it comes from.

Number methods explained

Number.isFinite()

It's a static number method that determines whether the passed number is a finite number or not. A finite number is any positive or negative number that is not infinite and is not NaN (Not a Number). The retired value should be true or false.

Number.isInteger()

As the name suggests, it determines whether the number you passed as a parameter is an integer or not. An integer is a number that is a whole number that is positive, negative, or zero (1, -1, 0). Just like the previous method, it returns either true or false.

Number.isNaN()

NaN in JavaScript means Not a Number when the number does not represent a number value. This method checks the equality with NaN so return true is the number equal to NaN and false if otherwise.

Number.isSafeInteger()

The method checks whether the number passed in a parameter is a safe integer. A safe integer consists of all integers from -(253–1) to 253–1 (+/-9007199254740991). Safe means that these mathematical integers have an exact representation in JavaScript while the number beyond this range do not always have the representation of these numbers. The method returns either true or false depending on the result.

Number.parseFloat()

This method parses the string you pass to it and returns the very first number it finds. If you have whitespace at the start or end it will ignore it and continue parsing to find a number. If it does not find a number, let's say the first character found is a letter, then it will throw a NaN (Not a Number).

Number.parseInt()

The parseInt method parses the string value we pass and returns an integer of specified radix or base. An integer is a number that is a whole number that is positive, negative, or zero (1, -1, 0). The radix or base means is the number of unique digits, including 0 that represent numbers in a positional numeral system. For example, we have a decimal system and its radix is 10 because the decimal system uses numbers from 0 to 9 ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9). Or we also have a binary system and its radix is 2 because it consists of only 0s and 1s. As a second argument, you can also indicate a radix number.

Number.prototype.toExponential()

This method returns a string that represents the number we passed to it in exponential aka scientific notation. Scientific notation is a way to represent numbers differently in case they are way too large or too small. For example, instead of wiring 3 x 3 x 3 x 3 x 3, you can write (3)⁵. Optionally, you can pass a fractionDigits argument which indicates how many digits you want after the decimal point. A decimal point aka decimal separator is the dot (or comma) used between the digits).

Number.prototype.toFixed()

The method toFixed returns the number using fixed-point notation. The fixed-point notation aka fixed-point arithmetic is a method to represent a number by storing a fixed amount of fractional parts. The fractional part is the part after the dot. So if I have 1.23, the .23 is the fractional part. In this method, you can either not write anything as an argument and the default value will be 0 which means you want 0 digits after the dot. Otherwise, you can indicate any digit from 0 to 100 to specify how many digits you need after the dot.

Number.prototype.toLocaleString()

This method returns a language-sensitive string representing the number we passed to it. A language-sensitive string or locale in this case means the language setting set in the browser of the person. It can either detect the language automatically or you can also optionally as an argument add the language code. You can check the language codes here.

Number.prototype.toPrecision()

The method toPrecision returns a string that represents the number that is rounded to the specified precision. In other words, it formats the numbers to a specific length. You can pass the number to indicate the exact length however note that this length means the whole length of the number not including the dot.

Number.prototype.toString()

As the name suggests, this method converts the number value to strings. A string is another data type in JavaScript where value is held inside quotes. Meaning that when 6 is a number "6" is a string and it's not the same. You can optionally indicate a radix in the argument. The radix or base means is the number of unique digits, including 0 that represent numbers in a positional numeral system. For example, we have a decimal system and its radix is 10 because the decimal system uses numbers from 0 to 9 ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9). We also have a binary system and its radix is 2 because it consists of only 0s and 1s.

Number.prototype.valueOf()

If you have read my post about string methods, you would see there that in strings, just like in numbers, the primitive values are first converted to an object so they can have the methods. And just like in strings, the number also has a method to retrieve the primitive value from the number object. This is usually done automatically.

Conclusion

Congratulations! If you finally reached this part and read about all number methods, I hope they are much easier to understand now and you will be able to use them to manipulate the data!

DEV Community: Ekaterine Mitagvaria

Difference Between Data Type and Data Structure in JavaScript

How to Find the Symmetric Difference Between Two Arrays in JavaScript

Using Array.prototype.filter()

The plan

Let’s get started

The process

Final result

Equality Comparisons

Value comparison operators

Strict Equality (“===“)

Numbers, Strings, Booleans, Null & Undefined

NaN(Not a Number)

Arrays

Objects

Functions

Loose Equality (==)

Numbers, Strings, Booleans, Null & Undefined

NaN(Not a Number)

Arrays, Objects & Functions

Operand conversions

Object.is()

Equality algorithms

Why do we need equality comparisons?

Conclusion

What is JSON?

JSON syntax

JSON static methods

JSON.parse

JSON.stringify

JSON Array

How to use JSON with HTML?

JSON versus others

JSON vs XML

Syntax

Data structure

Readability

Metadata

JSON vs CSV

Syntax

Data structure

Readability

Metadata

JSONP

How to use JSONP?

Why JSONP is a bad idea?

JSONP alternatives

Conclusion

How did you switch from JavaScript to TypeScript?

So, how did you learn TypeScript? Maybe you plan to and you have some great ideas?

JavaScript for Beginners: Classes

Table of Contents:

How to create JavaScript classes?

Class declaration

Class constructor

Creating instances

Class expression

Class methods

Instance methods

Static methods

Why do we need static methods?

Private methods

Fields

Private fields

Static fields

Private static fields

Getters and Setters

Inheritance

The super keyword

Inheriting fields

Evaluation order

The instanceof operator

Why do we need instanceof?

Conclusion

What is Strict Mode in JavaScript?

Creating Strict Mode

Automatic strict mode

Classes

Modules

JSON (JavaScript Object Notation)

Using `Array.prototype.filter()`