In JavaScript, Infinity represents a unique numerical value characterized by a fascinating trait: it exceeds any finite number. It can be surprising to observe how infinite values behave within conditional expressions and mathematical calculations. This behavior becomes evident, particularly when one is not familiar with the characteristics of Infinity in advance.
Let’s examine the characteristics of the Infinity number in JavaScript, recognize its practical applications, and steer clear of frequent mistakes.
Positive Infinity and Negative Infinity represent two additional unique values. It is important to observe that the expressions "+Infinity" (Infinity) and "-Infinity" generate these two infinite numerical values.
Positive Infinity
The numeral represents the starting point of Infinity. POSITIVE INFINITY surpasses every other finite value.
It differs from mathematical Infinity in the following ways.
- If we divide a positive value by positive Infinity, we get a positive 0.
- If we divide any negative value by positive Infinity, we get a negative 0.
- 0 simply multiplied by positive Infinity equals NaN.
- NaN multiplied with positive Infinity equals NaN.
- If we start dividing positive Infinity by negative value, we get negative Infinity (except negative Infinity)
- If we start dividing positive Infinity by positive integer, we get positive Infinity (except positive Infinity)
- Positive Infinity divided by either negative or positive Infinity equals NaN.
Syntax
The example provided below illustrates the POSITIVE INFINITY technique.
Number.POSITIVE_INFINITY
Example
The subsequent illustration demonstrates the POSITIVE INFINITY approach. This method allows us to utilize positive values and produces return results.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript Global Properties </h3>
<h2> The Positive Infinity Property </h2>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<p id = "demo4"></p>
<script>
function checkValue(bigValue) {
if (bigValue === Number.POSITIVE_INFINITY) {
return 'Process number as negative Infinity';
}
return bigValue;
}
document.getElementById("demo2").innerHTML = checkValue(Number.MAX_VALUE);
document.getElementById("demo3").innerHTML =
checkValue(Number.MAX_VALUE * 3);
document.getElementById("demo1").innerHTML = Number. POSITIVE_INFINITY;
const result_data = typeof(Infinity);
document.getElementById("demo4").innerHTML = result_data;
</script>
</body>
</html>
Output
The illustration displays basic infinite information presented as an output.
Negative Infinity
In JavaScript, there exists a value known as negative Infinity (-Infinity), represented by the constant Number.NEGATIVE_INFINITY. The value of -Infinity is considered to be less than any finite number.
In the following ways, it differs from mathematical Infinity:
- When separated by any other number, negative Infinity yields -0 (different from 0).
- Negative Infinity returns NaN when divided by itself or by positive Infinity.
- When negative Infinity is divided either by a positive number (other than positive Infinity), the result is negative Infinity.
- Negative Infinity multiplied by any negative number (other than negative Infinity) equals positive Infinity.
- If we multiply the negative Infinity by NaN, the result is NaN.
- Nan is the outcome of 0 and negative Infinity.
- The sum of two negative equations always equals a positive infinity.
- Positive Infinity is always the product of both negative and positive Infinity.
Syntax
The subsequent example illustrates the NEGATIVE INFINITY technique.
Number.NEGATIVE _INFINITY
Example
The subsequent illustration demonstrates the NEGATIVE INFINITY function.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript Global Properties </h3>
<h2> The Negative Infinity Property </h2>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<p id = "demo4"></p>
<script>
function checkValue(bigValue) {
if (bigValue == Number.NEGATIVE_INFINITY) {
return 'Process number as negative Infinity';
}
return bigValue;
}
document.getElementById("demo2").innerHTML = checkValue(-Number.MAX_VALUE);
document.getElementById("demo3").innerHTML =
checkValue(-Number.MAX_VALUE * 3);
document.getElementById("demo1").innerHTML = Number.NEGATIVE_INFINITY;
const result_data = typeof (-Infinity);
document.getElementById("demo4").innerHTML = result_data;
</script>
</body>
</html>
Output
The illustration presents output data reflecting negative infinity.
Checking for Infinity
The Number.isFinite function determines if the provided value is a finite number. A finite number is defined as one that is not positive Infinity, negative Infinity, or NaN (Not a Number).
Syntax
The following syntax shows an infinite value.
Number.isFinite(value);
Parameters
- The figure that is subjected to a finiteness assessment.
Return Value
- When the input provided is a finite numeric value, the function yields a Boolean result of true. In all other cases, it returns false.
Example
The following example shows the INFINITY method.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript Global Properties </h3>
<h2> The Infinity Property </h2>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<p id = "demo4"></p>
<script>
document.getElementById("demo2").innerHTML = Number.isFinite(150);
document.getElementById("demo3").innerHTML =
Number.isFinite(Infinity);
document.getElementById("demo1").innerHTML = Number.isFinite(-Infinity);
document.getElementById("demo4").innerHTML = Number.isFinite(-150);
</script>
</body>
</html>
Output
The illustration displays both negative and positive data as its output.
When Should We Use Infinity?
The infinity value serves as a valuable tool when initiating calculations that require comparisons between numbers.
As an illustration, when attempting to find the lowest value in an array, one could start by setting the minimum variable to Infinity.
function findMinvalue(array_var) {
let min_val = Infinity;
for (const key of array_var) {
min_val = Math.min(min_val, key);
}
return min_val;
}
findMinvalue([4, 8, 7, 1, 6, 2]);
Since every finite number is smaller than Infinity, the smallest value will be identified as the initial element during the first iteration of the for loop.
Pitfall of Infinity
Although we may not frequently encounter Infinity values, it is crucial to grasp the circumstances under which infinite attributes can arise.
There are multiple ways to get the infinity values.
- Parsing numbers
- JSON serialization
- Max number overflow
- Math functions
Parsing Number
Let’s consider a scenario where we have a form designed to gather data from users. Within this form, there exists a field that allows users to submit their input_val.
- Since the value obtained from the form field is a string, it is necessary for us to transform it into a numerical format:
- This is functioning flawlessly. When a string is provided that cannot be transformed into a numerical value, the parseInt function yields a NaN:
- When the input string is "Infinity", the parseInt function yields NaN, as it does not acknowledge the concept of an infinite number:
let input_val = parseInt('243');
console.log(input_val); // 120
let input_val = parseInt('Bigger than 243');
console.log(input_val); // NaN
let input_val = parseInt('Infinity');
console.log(input_val); // NaN
Syntax
The syntax outlined below utilizes the parseFloat function.
let input_val = parseFloat('Infinity');
console.log(input_val); // Infinity
The parseFloat function is capable of recognizing the value Infinity, which results in an infinite numeric representation. When an input field includes the string ' Infinity,' it is advisable to implement a validation error.
Example
The example below demonstrates the use of the parseFloat function. This function allows us to work with both positive and negative infinity values. By utilizing the parseFloat function, we can obtain both finite and infinite results.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript Global Properties </h3>
<h4> The parseFloat() Function </h4>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<p id = "demo4"></p>
<script>
//infinity value
let input_val = parseFloat('Infinity');
//infinity value
let input_val1 = parseFloat(40018**7615);
//negative infinity value
let input_val3 = parseFloat('-Infinity');
//finite value
let input_val4 = parseFloat(40018**21);
document.getElementById("demo1").innerHTML =
input_val;
document.getElementById("demo2").innerHTML =
input_val1;
document.getElementById("demo3").innerHTML =
input_val3;
document.getElementById("demo4").innerHTML =
input_val4;
</script>
</body>
</html>
Output
The illustration displays various categories of infinity information presented as a result.
JSON Serialization
The method JSON.stringify transforms a value of Infinity into a null value.
Syntax
The syntax below demonstrates the method for JSON Serialization.
<script>
const student= {
rate: Infinity
};
JSON.stringify(student); // => '{ "rate": null }'
</script>
- Infinity represents the property related to rates. Nonetheless, when this "rate" value is transformed into JSON format, it turns null.
Example
The subsequent illustration demonstrates the process of JSON Serialization.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript Global Properties </h3>
<h4> The JSON Serialization Property </h4>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<script>
//infinity value
const student= {
rate: Infinity
};
var data_val = JSON.stringify(student);
//finite value
const student1= {
mark: 80
};
var data_val1 = JSON.stringify(student1);
//both finite and Infinity value
const student2= {
name: "Example",
number:2,
mark: Infinity
};
var data_val2 = JSON.stringify(student2);
document.getElementById("demo1").innerHTML =
data_val;
document.getElementById("demo2").innerHTML =
data_val1;
document.getElementById("demo3").innerHTML =
data_val2;
</script>
</body>
</html>
Output
The image shows the infinity value as an output.
Maximum Number Overflows
MAXVALUE represents the maximum float value that JavaScript can handle. If you try to use a number larger than MAXVALUE, JavaScript will convert that number to Infinity. You can perform various mathematical operations such as exponentiation, multiplication, and others with this constant.
Syntax
The syntax outlined below illustrates the method for determining the maximum number of overflows.
<script>
let input_val = input_value * Number.MAX_VALUE;
let input_val4 = Math.pow(base_value, ex_value);
</script>
Example
The subsequent illustration demonstrates the technique for calculating the maximum number of overflows.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript Global Properties </h3>
<h4> Maximum number overflows </h4>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<p id = "demo4"></p>
<script>
//infinity value
let input_val = 3 * Number.MAX_VALUE;
//negative infinity value
let input_val1 = Math.pow(-418, 2501);
//negative infinity value
let input_val3 = -3 * Number.MAX_VALUE;
//finite value
let input_val4 = Math.pow(418, 2501);
document.getElementById("demo1").innerHTML =
input_val;
document.getElementById("demo2").innerHTML =
input_val1;
document.getElementById("demo3").innerHTML =
input_val3;
document.getElementById("demo4").innerHTML =
input_val4;
</script>
</body>
</html>
Output
The image displays various categories of infinity information presented as an output.
Mathematical operations
In JavaScript, certain functions that belong to the Math namespace have the capability to produce infinite values.
In instances where a function operates without receiving any parameters, Math.max yields "-Infinity" while Math.min produces "Infinity". It can be unexpected for us when JavaScript attempts to determine the maximum or minimum value from an empty array.
Syntax
The syntax presented below illustrates the mathematical operation associated with the infinity property.
<script>
const array_var = [values];
Math.max(?array_var);
Math.min(?array_var);
</script>
Example
The subsequent illustration demonstrates the property of infinity through a mathematical operation.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript Global Properties </h3>
<h4> Mathematical operations </h4>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<p id = "demo4"></p>
<script>
//finite value
const array_var1 = [4, 1, 3, 2, 7];
var input_val1 = Math.max(...array_var1);
var input_val2 = Math.min(...array_var1);
const array_var2 = [];
//negative infinity value
var input_val3 = Math.max(...array_var2);
//infinity value
var input_val4 = Math.min(...array_var2);
document.getElementById("demo1").innerHTML =
input_val1;
document.getElementById("demo2").innerHTML =
input_val2;
document.getElementById("demo3").innerHTML =
input_val3;
document.getElementById("demo4").innerHTML =
input_val4;
</script>
</body>
</html>
Output
The illustration displays various categories of infinity information presented as an output.
Most Important Takeaway
- In JavaScript, Infinity refers to the idea of an infinite. Any finite number is less than Infinity, and no finite number is greater than -Infinity.
- In JavaScript, comparing infinite values is simple: Infinity === True Infinity. Number.isFinite determines whether the supplied argument is a finite number.
- When initiating an algorithm that requires a number comparison, we can use Infinite to initialize variables. Determining the minimum of an array is an example of a use case.
- When parsing numeric values from inputs, Infinity must be used with caution: The actual Infinity number is returned by number ('Infinity'), parseFloat('Infinity'). The infinite number is null when serialized with JSON.stringify.
Conclusion
The infinity property, along with data management techniques in JavaScript, is utilized for conducting mathematical computations and managing data of substantial size. This approach provides a straightforward and beneficial mechanism for both users and developers to effectively work with infinite properties or data sets.