7 native JS error types you should know

Overview

We see errors everywhere, from the browser console to the terminal where we run Node.js. The focus of this article is to provide an overview of the types of errors we may encounter during JS development.

Tip: Good bugs can make the difference between a fast and painless development experience and a slow and painful one. When writing reusable code, make sure you are writing clear and understandable error handling code.

1. RangeError

This error is thrown when a number is outside the allowed range of values.

For example

const l = console.log const arr = [90,88]
arr.length = 90**99

We have an array, arr with two elements. Next, try to expand the array to contain 90**99 == 2.9512665430652753e+193 elements.

This number is beyond the range in which the array size can grow. Running this throws a RangeError:

$ node errors

errors.js:4

arr.length = 90**99

^RangeError: Invalid array length

Because we want to increase the size of the arr array beyond the range specified by JS.

2. ReferenceError

This error is raised when a reference to a variable or item is broken. That is, the variable or item does not exist.

For example

const l = console.logconst cat = "cat"
cat
dog

There is a variable cat which is initialized to "cat". Next, the cat and dog variables are referenced. The cat variable exists, but the dog variable does not.

cat will return "cat", while dog will raise a ReferenceError because the name dog cannot be found in the Environment Record.

$ node errors

errors.js:3

dog

^ReferenceError: dog is not defined

Whenever we create or define a variable, the variable name is written to the environment record. Environment Records are like key-value stores.

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+

Whenever we refer to a variable, it stores the variable as defined in the program. When an environment value is found in the record and the value is extracted and returned, the environment record is searched using the variable's name as the key. Calling a function that has not yet been defined.

Now, when we create or define a variable without assigning a value. The variable will have its key written to the environment record as the variable name, but its value will remain undefined.

var catenv record

+-----------------+

| Key | Value |

-------------------

| cat | undefined |

+-----------------+

When a variable is later assigned a value, it is searched for in the environment record and when it is found to be undefined, the assignment is overwritten.

var cat

cat = "cat"env record

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+

So when a variable name is not found in the environment record, the JS engine will raise a RefernceError.

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+cat // "cat", yes, :) it's there

dog // :( what's this? can't find it

Note: An undefined variable will not throw a ReferenceError because the value in the environment record has not yet been set.

3. SyntaxError

This is the most common mistake. This error occurs when we enter code that the JS engine cannot understand.

The JS engine caught this error during parsing. In the JS engine, our code goes through different stages before we can see the result on the terminal.

• Tokenization
• Analysis
• explain

Tokenization breaks down the source of code into individual units. At this stage, numbers, keywords, text, operators are categorized and labeled separately.

Next, the resulting token stream is passed to the parsing stage, where it is processed by the parser. This is where the AST is generated from the token stream. AST is an abstract representation of the structure of code.

In the tokenization and parsing stages, if the syntax of our code does not conform to the grammatical rules of JS, it will cause the stage to fail and raise a SyntaxError. For example:

const l = console.loglet cat h = "cat"

What does the "h" in the code stand for? This "h" breaks the code.

$ node errors

errors.js:3

let cat h = "cat"

^SyntaxError: Unexpected identifier

See, Node.js has figured out the problem. It says that the "h" was unexpected and it corrupted the declaration of the cat variable.

Hence, we can say that syntax errors occur during parsing or compilation.

4. TypeError

TypeError is used to indicate that an operation failed when there is no appropriate indication of the cause of the failure in other NativeError objects.

TypeError occurs when an operation is performed on the wrong data type, for example:

If we try to convert the number to upper case like this:

const num = 123
num.toUpperCase()

This will raise a TypeError

$ node errors

errors.js:4

num.toUpperCase()

^TypeError: num.toUpperCase is not a function

Because toUpperCase function expects string data type. The toUpperCase function is intentionally generic; it does not require its this value to be a String object. Therefore, it can be transferred to other kinds of objects for use as methods.

Only strings are converted to upper or lower case. If we call toUpperCase function on Objects, Boolean, Symbol, null, undefined data types, we will get TypeError because it operates on the wrong data type.

5. URIError

This indicates that a global URI handling function is being used that is incompatible with its definition.

URI (Uniform Resource Indicator) in JS has the following functions: decodeURI, decodeURIComponent, etc.

If we call any of them with wrong arguments, we will get a URIError.

decodeURI("%")
^URIError: URI malformed

encodeURI is used to obtain the unencoded version of a URI. "%" is not a proper URI, so a URIError is raised.

URIError is raised when there is a problem encoding or decoding a URI.

6. EvalError

This is used to identify errors when using the global eval() function.

According to EcmaSpec 2018 edition:

This exception is not currently used by this specification. It is retained for compatibility with previous versions of this specification.

7. InternalError

This error occurs inside the JS engine, specifically when it has too much data to process and the stack grows past its critical limit.

This problem occurs when the JS engine is overwhelmed by too much recursion, switching cases, etc.

switch(num) {
 case 1:
 ...
 break
 case 2:
 ...
 break
 case 3:
 ...
 break
 case 4:
 ...
 break
 case 5:
 ...
 break
 case 6:
 ...
 break
 case 7:
 ...
 break
 ... up to 1000 cases
 }

Here is a simple example of excessive recursion:

function foo() {
    foo()
}
foo()

Summarize

As we said, everyone makes mistakes. As far as we're coding, this is a stable event. To overcome it, we need to know the types of native errors that can be thrown. This article lists them and provides some examples of how they are triggered.

So whenever an error is thrown in the terminal or in the browser, you can easily find out where and how the error occurred and be able to write better, less error-prone code.

The above are the details of 7 JS native error types you should know. For more information about JS native error types, please pay attention to other related articles on 123WORDPRESS.COM!