Understanding Errors and Scope in JavaScript

Introduction

In our previous blog, we explored JavaScript Regular Expressions (RegExp) and Operator Precedence. These topics are important for pattern matching and understanding the order in which operations are executed. If you haven’t checked it out, be sure to give it a read to strengthen your JavaScript fundamentals. In this post, we’ll dive into two more essential topics in JavaScript: Errors and Scope. These concepts are essential to write efficient and error-free code. Let’s break down each topic step-by-step with examples to help you grasp the concepts easily.

JavaScript Errors

Errors are unavoidable in programming, and JavaScript provides robust tools to handle them. Understanding how to handle errors effectively can save you hours of debugging and make your code more reliable.

Throw, and Try…Catch…Finally

The try…catch statement is used to handle exceptions. It lets you test a block of code for errors (try), handle the error (catch), and execute code, regardless of the result (finally).

Errors Will Happen!

JavaScript code often encounters issues due to incorrect inputs, syntax problems, or unexpected behavior. Handling errors gracefully ensures that your application doesn’t crash unexpectedly.

JavaScript try and catch

The syntax of a try…catch block:

Example:

try { // Code that may throw an error let result = someUndefinedFunction(); } catch (error) { console.error(‘An error occurred:’, error.message); }

JavaScript Throws Errors

JavaScript throws errors when something goes wrong. For example, accessing a property of undefined or calling a non-existent function will throw an error.

The throw Statement

The throw statement allows you to create custom errors. The error can be a JavaScript String, a Number, a Boolean or an Object.

Example:

function validateAge(age) { if (age < 18) { throw new Error('Age must be 18 or above'); } return true; } try { validateAge(15); } catch (error) { console.log(error.message); }

Input Validation Example

Input validation is a common use case for throw and try…catch.If the value is wrong, an exception (err) is thrown. For example, validating a user’s input in a form:

HTML Validation

Here’s how to combine HTML and JavaScript for validation:

Example:

The finally Statement

The finally block executes code after try and catch, regardless of the outcome.

Example:

The Error Object

JavaScript provides an Error object to represent runtime errors.

Name and message are two useful properties that are provided by the error object.

Error Object Properties
●
message: Describes the error name.
●
name: Type of error or error message (a string).

Error Name Values

EvalError

RangeError

ReferenceError

SyntaxError

TypeError

URIErrorr

Example:

EvalError

Occurs when the eval() function is used incorrectly.

Example:

RangeError

Occurs when a number falls outside of the legal value range.

Example:

ReferenceError

Occurs when accessing a variable that is undeclared.

Example:

SyntaxError

Occurs when the code has a syntax error.

Example:

TypeError

Occurs when a variable or parameter is not of a valid type.

Example:

URIError

Occurs when an invalid URI is passed to a function. Example: Using an illegal character in a URI function.

Example:

Non-Standard Error Object Properties

Some browsers add additional properties like

fileName

lineNumber

columnNumber

stack

description

number

But these are not standardized. These properties should not be used on public websites. Not every browser will be able to use them.

JavaScript Scope

Scope determines the accessibility of variables.

There are 3 types of scope in JavaScript variables. They are:

Block scope

Function scope

Global scope

Block Scope

Variables declared with let and const have block scope. Variables declared inside a { } block cannot be accessed from outside of it.

Example:

Local Scope

Variables declared inside a function are local to that function.

Example:

Function Scope

Variables declared with var have function scope.

Example:

Global JavaScript Variables

Global variables are accessible throughout the program.

Example:

Global Scope

Global scope refers to variables that are declared outside of any function.When defined outside of a block, variables declared using var, let, and const are fairly identical.

Example:

Automatically Global

If a variable is assigned without declaring it, it becomes global.

Example:

Strict Mode

Strict mode helps avoid common mistakes by enforcing stricter parsing and error handling.

Example:

Global Variables in HTML

Global variables can be accessed as properties of the window object in browsers.

Example:

The Lifetime of JavaScript Variables

Variables have a lifetime based on their scope:

Global variables remain active as long as the application is in use.

Local variables are only present whilst the function is running.

Function Arguments

Function arguments behave like local variables within the function.

Example:

Conclusion

Understanding errors and scope in JavaScript is an essential foundation for beginners to write clean and efficient code. Errors act as guides to identify what’s breaking your program, while the concept of scope determines where variables and functions can be accessed. By grasping these concepts, you can debug effectively and structure your code logically, setting the stage for building reliable applications. In the next blog, we’ll explore Hoisting and “use strict” in JavaScript. These topics will help you dive deeper into how JavaScript handles variable declarations and strict mode’s role in enforcing better coding practices. Stay tuned to elevate your JavaScript skills further!

Request more information

Understanding Errors and Scope in JavaScript