How JavaScript works: Optional chaining and BigInt, new game-changer features for data analysts.

Published in

SessionStack Blog

9 min readJun 27, 2022

This is post # 66 of the series, dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a JavaScript tool for developers to identify, visualize, and reproduce web app bugs through pixel-perfect session replay.

Data analysis involves the process of inspecting, cleansing, transforming, and modeling data to discover useful information. And this is important because If you want to make informed decisions, you need data, but there’s more to it. The data in question must be accurate. Data analysis helps businesses acquire relevant, accurate information, suitable for developing future marketing strategies, and business plans.

Data analysts make use of large data that could involve numbers. The addition of the BigInt wrapper, allows developers to manipulate primitive BigInt values that are too large to be represented by the number primitive. For example, numbers above the max safe integer (2⁵³ — 1) will behave abnormally because JavaScript may not represent them exactly and correctly compare them. The optional chaining operator (?) is also useful in simplifying accessing values through connected objects when a reference or function may be undefined or null.

This article will explore optional chaining, Bigint, and how developers can utilize them for better data analysis.

What is Data Analysis

Data analysis is the process of cleaning and processing data, to extract relevant data and make informed decisions. To achieve this, successfully, data is first collected. Next, it’ll be processed, cleaned, and analyzed.

If you’re growing your business, you need to meet the expectations of your target customers. However, how would you know who your customers are if you don’t have data to prove that? For instance, if you’re building a private school, how’d you know your target customers if you don’t have data on the population count of children in the environment, their educational needs, and data on the parents who would afford the tuition fee?

And even if you get the general data, you would still need to process it and clear it out, in order to get the right insights for your target customers. This process is data analysis. And are three general steps in it. Let’s explore them:

Data Collection

This is the process of collecting the data required for analysis. Although this is the first step, it is crucial. And this is because the type of data collected determines the outcome of the analysis. Therefore, to successfully execute this step, the data analysts should ask the following questions:

Are we performing quantitative or qualitative research?
What metrics are we tracking
What data collection method is suitable for the type of data we’re collecting?

Data Processing

After collecting data, the next step is to process and filter unnecessary data. And this is done as a means of streamlining the data to the target audience. Here, the data scientist or analyst will purge and identify abnormalities, duplicate data, and other things that may skew the end result.

Data Representation or Visualization

This step involves the representation of processed data for easy visualization. For instance, the analyst can utilize data visualization software that provides easily readable dashboards or reports. The aim of this step is to represent the data properly to influence decision-making.

Why is Data Analysis Necessary?

Data analysis helps in decision-making and behavior prediction. Here’s a list of some advantages data analysis brings to your business.

Better Targeting

Knowing your target market isn’t all there is for a successful business. For instance, you will need to know what type of advertisement reaches your target audience effectively and make them buy your product.

This way, you would know how much it’ll cost to launch an advertisement and the number of new customer influx and closed deals it’ll bring. And this is because the costs you incur in making your products or business depend on the impact it will make and the lowest possible costs.

Product Development

Most businesses depend on user data to determine what comes next. For instance, movie streaming services need to know customers’ streaming history in order to suggest new movies for them. Some firms also need to rely on demographic or even purchase data to determine what will be appealing to their customers.

Innovations

With data analysis, businesses can predict future trends in their niche. For example, businesses can determine how their customers’ choices can change in the future. This way, you can make products that put you at the top of your niche, giving you an edge over competitors.

BigInt in JavaScript, What is it?

BigInt is a JavaScript primitive wrapper object used to represent and manipulate big integrals. Since data analysis deals with large data, let’s explore JavaScript’s BigInt type. This is because big integral values are very large. Consequently, they cannot be represented by the primitive number datatype.

For instance, the maximum safe number in JavaScript is (2⁵³ — 1) that is 9007199254740991. And this means that numbers that are larger than this can behave unexpectedly. To avoid this unexpected behavior, JavaScript has the BigInt wrapper object to handle numbers larger than the maximum safe number.

To declare a Bigint value, use the constructor BigInt(). For example, we can declare a BigInt value with a number as shown below:

The BigInt primitive wrapper has static and instance methods. These methods allow us to perform actions on BigInt.

Static Methods

Static methods are methods that are declared with a static modifier. These are methods that belong to a class rather than the instance of the class. In the case of BigInt, the static methods belong to the BigInt class. These methods are as follows:

BigInt.asIntN()

The asIntN() method is used for binding a BigInt value to a signed integer value. A signed integer value is a value that can store and return the positive and negative values of a number. An example of how to utilize this method is shown in the code below:

BigInt.asUintN()

The asUintN() method is used for binding a BigInt value to an unsigned integer value. Unlike a signed integer, an unsigned integer can only store and return positive integers. The example below shows how we can utilize this static method:

The asUintN and asIntN methods are useful in specifying if you want to accept a signed integer or an unsigned integer. Therefore, instead of declaring a BigInt() value with the constructor, you can specify what type of data you want to accept.

Instance Methods

Instance methods are methods that correspond to their prototype methods. This method returns the prototype of a constructor. The BigInt wrapper object has the following instance methods:

BigInt.prototype.toLocaleString()

This method returns a language-sensitive representation of a BigInt value. For instance, we can represent thousands as periods using the German country code de-DE.

BigInt.prototype.toString()

This method returns a string representing the specified BigInt value.

BigInt.prototype.valueOf()

This method returns the wrapped primitive value of a BigInt object. For instance, from the program below, while Object(1n) is an object, the value of 1n is BigInt.

How does optional chaining in JavaScript work?

Optional chaining in JavaScript allows you to read the values of a property located deep within a chain of connected objects without checking if each reference in the chain is valid. With this operator, you can query the content of chained objects.

Although the ?. operator works similarly to the chaining operator ., they’re different. For example, the ?. operator doesn’t throw an error if a reference is nullish (null or undefined). Instead, the expression short-circuits with a return value of undefined. This is useful as it allows you to explore the content of an object when you’re not certain of which properties are required. For instance, if we try to access a property not contained in an object, it’ll return undefined rather than throw an error and unexpectedly bring the program to an end.

If we try to do the above without the optional chaining operator, it’ll throw an error since there’s no dog object.

In optional chaining, notice how the application continued running even though we tried to access an object’s property that wasn’t declared. To achieve this, the expression won’t be evaluated if the left operand is null or undefined.

Just like we can use optional chaining for objects to access properties, we can also use optional chaining in arrays and functions. For instance, in testing out the functionalities of an API, optional chaining allows you to test out depreciated methods without having to throw an exception or stop the program. Below is the syntax for utilizing optional chaining in functions, expressions, and arrays.

BigInt and optional chaining in data analysis

In recent times, JavaScript has been vetoed as one of the popular programming languages. For instance, according to a Stackoverflow survey, JavaScript is the most used programming language. Although Python is still widely used as the go-to language for data analysis, JavaScript libraries like d3js and the others are now most preferred. And this is because JavaScript as a language is versatile and can be used in web applications, mobile applications, etc.

However, data analysis involves the processing of data called big data. How do we deal with this large data set if the maximum safe integer in JavaScript is (2⁵³ — 1). Big data allows data analysts to reveal patterns, trends, and associations relating to their target audience. Therefore, when we try to process integers larger than (2⁵³ — 1), we’ll get unexpected results that’ll tamper with the outcome of our analysis.

Also, when processing large amounts of data, it’s not a good practice for the process to abruptly end. And this is because all the necessary data won’t be processed, thus, producing a skewed result. With optional chaining, this problem can be solved, and we’ll be sure that all data were processed. For better optimization, we can filter all values that return with null or undefined. That way, only data that return a specific value are processed.

For example, in JavaScript statistical libraries like science.js, you’ll need BigInt when dealing with large numbers.

We can also utilize the optional chaining operator to read the properties of chained objects.

Conclusion

As a business that wants to drive more usage, it is important that you understand your target customers properly. And this isn’t possible without data analysis. Data analysis is important in our everyday life. Also, data analysis involves dealing with large data. JavaScript has a safe maximum number for integers. Numbers above the safe maximum number act unexpectedly when you try to process them. And this is where Bigint comes into play in JavaScript. With this wrapper, you can process and manipulate large numbers accurately.

In this article, we explored BigInt and optional chaining and how they are changing how we view data analysis in JavaScript. For instance, with optional chaining, you can explore chained values in your data set without fear of an error or exception that will suddenly end data processing.

While BigInt is a welcome development, it has some useful recommendations. For instance, the BigInt value is not suited for cryptography as it can cause some security vulnerabilities. And this is because some are not constant-time, and are thus open to timing attacks. Also, there’s an incompatibility between BigInt values and JSON.stringify() as it’ll throw a TypeError since BigInt values aren’t serialized in JSON by default. Lastly, coercing between Number values and BigInt values can lead to a loss of precision.

While BigInt and optional Chaining are very useful JavaScript additions you have to ensure BigInt is used correctly for better code efficiency and security.

Even if you feel like the proper decisions have been made, it’s always necessary to verify that this is indeed true and your users have a great experience with your product.

A solution like SessionStack allows us to replay customer journeys as videos, showing us how our customers experience our product. We can quickly determine whether our product is performing according to their expectations or not. In case we see that something is wrong, we can explore all of the technical details from the user’s browser such as the network, debug information, and everything about their environment so that we can easily understand the problem and resolve it. We can co-browse with users, segment them based on their behavior, analyze user journeys, and unlock new growth opportunities for our applications.

There is a free trial if you’d like to give SessionStack a try.