JavaScript RangeError – Invalid array length

18 Jul, 2020
This JavaScript exception Invalid array length occurs when creating an Array or an ArrayBuffer of the array length either negative or greater than or equal to 232. It can also occur if the length property is set manually to a value either negative or greater than equal to 232.
Message:
RangeError: Array length must be a finite positive integer (Edge)
RangeError: invalid array length (Firefox)
RangeError: Invalid array length (Chrome)
RangeError: Invalid array buffer length (Chrome)

Error Type:
RangeError

Cause of the error: The length of an Array or an ArrayBuffer can only be represented by an unsigned 32-bit integer, which only stores values ranging from 0 to 232-1. While creating an Array or an ArrayBuffer, if the array length is either negative or greater than or equal to 232  then this error occurs. 
Example 1: In this example, the length property is set to 6, which is a valid value, therefore no error occurred.
HTML
<!DOCTYPE html><html>    <head>        <script src="https://code.jquery.com/jquery-3.5.0.js">        </script>    </head>    <body style="text-align: center;">        <h1 style="color: green;">            GeeksforGeeks        </h1>          <p>            JavaScript RangeError             Invalid array length        </p>          <button onclick="Geeks();">            click here        </button>        <p id="GFG_DOWN"></p>          <script>            var el_down = document.getElementById("GFG_DOWN");            function Geeks() {                try {                    let a = [];                    a.length = 6;                    el_down.innerHTML =                       "'Invalid array length' "+                      "error has not occurred";                } catch (e) {                                        // Show the error in console                    console.log(e);                    el_down.innerHTML =                       "'Invalid array length' "+                      "error has occurred";                }            }        </script>    </body></html>
Output:
Example 2: In this example, the length property is set to -1, which is an invalid value, therefore the error has occurred.
HTML
<!DOCTYPE html><html>    <head>        <script src="https://code.jquery.com/jquery-3.5.0.js">        </script>    </head>    <body style="text-align: center;">        <h1 style="color: green;">            GeeksforGeeks        </h1>          <p>            JavaScript RangeError             Invalid array length        </p>          <button onclick="Geeks();">            click here        </button>        <p id="GFG_DOWN"></p>          <script>            var el_down = document.getElementById("GFG_DOWN");            function Geeks() {                try {                    let a = [];                    a.length = -1;                    el_down.innerHTML =                       "'Invalid array length' "+                      "error has not occurred";                } catch (e) {                                        // Show the error in console                    console.log(e);                    el_down.innerHTML =                       "'Invalid array length' "+                      "error has occurred";                }            }        </script>    </body></html>
Output:
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Node.js | fs.writeFileSync() Method
Remove elements from a JavaScript Array
Form validation using HTML and JavaScript
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
REST API (Introduction)