JavaScript Infinity PROPERTY

In JavaScript, Infinity is a special number with an intriguing property: greater than any finite number. We might be amazed at how infinite numbers operate in conditional statements and arithmetic operations. This operation works if we don't know the properties of Infinity beforehand.

Let's look at the Infinity number's properties in JavaScript, acknowledge the use cases, and avoid common pitfalls.

Positive Infinity and negative Infinity are two other special values. Note the program expressions "+Infinity" (Infinity) and "-Infinity" produce these two infinite Number values.

Positive Infinity

The number is the initial value of the Infinity. POSITIVE INFINITY is greater than any other finite number.

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 following example shows the POSITIVE INFINITY method.

Example

The following example shows the POSITIVE INFINITY method. We can use positive numbers and return values.

<!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 image shows simple infinity information as an output.

Negative Infinity

In JavaScript, there is also a negative Infinity (-Infinity) with the value Number. NEGATIVE INFINITY. -Infinity is 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 following example shows the NEGATIVE INFINITY method.

Example

The following example shows the NEGATIVE INFINITY method.

<!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 image shows negative infinity information as an output.

Checking for Infinity

The Number.isFinite() method checks whether the passed number is a finite number. It is a number that is neither positive Infinity, negative Infinity, or NaN.

Syntax

The following syntax shows an infinite value.

Parameters

The value that will be checked for finiteness.

Return Value

If the input value is a finite number, the Boolean value true is returned. Otherwise, it is 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 image shows negative and positive information as an output.

When Should We Use Infinity?

The infinity value is useful for starting computations that involve number comparisons.

For example, when looking for the smallest value in an array, we could initialize the minimum variable with Inifinity.

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]);

Because every finite value is less than Infinity, the minimum value will become the first item on the first for() iteration.

Pitfall of Infinity

We won't be dealing with Infinity values very often. However, it is important to understand when infinite attributes may appear.

There are multiple ways to get the infinity values.

Parsing numbers
JSON serialization
Max number overflow
Math functions

Parsing Number

Assume we have a form that collects information from users. We have a field on the form where users can enter their input_val.

Because the form field's value is a string, we must convert it to a number:

let input_val = parseInt('243');
console.log(input_val); // 120

This is working perfectly. If a string is entered that cannot be converted to a number, parseInt() returns a NaN:

let input_val = parseInt('Bigger than 243');
console.log(input_val); // NaN

If the input string is Infinity, parseInt() returns NaN because the infinite number is not recognized:

let input_val = parseInt('Infinity');
console.log(input_val); // NaN

Syntax

The following syntax applies the parseFloat() function.

let input_val = parseFloat('Infinity');
console.log(input_val); // Infinity

The parseFloat() function recognizes the Infinity, which returns an infinite number. When an input field contains the string ' Infinity,' it is best to practice generating a validation error.

Example

The following example shows the parseFloat() function. We can use the positive and negative infinity data. The function returns a finite and infinite value using the parseFloat() Function.

<!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 image shows all types of infinity information as an output.

JSON Serialization

JSON.stringify() converts an Infinity number to a null value.

Syntax

The following syntax shows the JSON Serializationmethod.

<script>
const student= {
 rate: Infinity
};
JSON.stringify(student); // => '{ "rate": null }'
</script>

Infinity is the rate property. However, the "rate" value becomes null when converted to JSON.

Example

The following example shows the JSON Serializationmethod.

<!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: "JavaTpoint",
 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

MAX VALUE is JavaScript's largest float number. When attempting to use a number greater than a number MAX_VALUE, JavaScript converts it to Infinity. We can operate mathematical operations like exponential, multiplication, and so on.

Syntax

The following syntax shows the maximum number overflows method.

<script>
let input_val = input_value * Number.MAX_VALUE;
let input_val4 = Math.pow(base_value, ex_value);
</script>

Example

The following example shows the maximum number overflows method.

<!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 shows all types of infinity information as an output.

Mathematical operations

In JavaScript, some functions in the Math namespace can return infinite numbers.

When a function works without any arguments, then Math.max() returns the "-Infinity", and Math.min() returns the "Infinity". We may be surprised if JavaScript tries to find the maximum or minimum of an empty array.

Syntax

The following syntax shows the mathematical operation for the infinity property.

<script>
const array_var = [values];
Math.max(?array_var);
Math.min(?array_var);
</script>

Example

The following example gives the infinity property using the 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 image shows all types of infinity information 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 or data handles in JavaScript for mathematical operations and large-size data. It is an easy and useful method for users and developers to handle infinite properties or data.

Next TopicJavaScript insertAdjacentHTML() method

← prev next →