Reference error js примеры

In JavaScript, a reference error is thrown when a code attempts to reference a non-existing variable. In this article, we will dive into the most common types of reference error triggers and how to fix them.

Common Reference Errors

According to JavaScript web docs, there are six different types of reference errors, with variations of each, that may get triggered in our code.This article focuses on five most common reference error examples for new developers.

Undefined variables

Forgetting to define a variable before referencing it may be the most common reference error trigger for new developers. This can also happen if the referenced variable has been commented out.

let firstName = "John"
let age = 23
 
console.log(lastName)
// Uncaught ReferenceError: lastName is not defined

let firstName = "John"
let lastName = "Smith"
let age = 23
 
console.log(lastName)
// returns Smith

Scope

Variables defined inside a function’s scope cannot be accessed outside of it. We can think of scope as laws that govern certain parts of land, let’s say in the United States. A law in the books for the city of San Francisco may not be okay to follow in the city of Miami. Residents of Miami living in Miami must follow Miami laws.

In the function below, we attempt to access the value of a outside of its lexical scope.

function nums() { 
    numA = 1
    numB = 2
  
    return numA + numB
  }
   
  console.log(numA); 
 
 
//   Uncaught ReferenceError: numA is not defined

We can fix this by defining our variables in the global scope.

numA = 1
numB = 2
 
function nums() { 
  return numA + numB
}
 
console.log(nums()); 
 
// returns 3

Strict Mode

Strict Mode intentionally has a different set of semantics than the regular defaulted, “sloppy mode” JavaScript code. A key thing to remember while coding in strict mode is that it eliminates silent errors by changing them into throw errors. A JavaScript statement will be using strict mode if “use strict”; is invoked before a statement.

function referenceErr(a){
    "use strict";
   foo = true;
 
   if(a == 0){
     return foo
   } else {
     return !foo
   }
 
  }
  
  console.log(referenceErr(1))
 
//   Uncaught ReferenceError: foo is not defined

As JavaScript developers we know to use var, let, or const in order to define a variable, but the above would have been a silent error if strict mode was not invoked. 

function referenceErr(a){
    "use strict";
   let foo = true;
 
   if(a == 0){
     return foo
   } else {
     return !foo
   }
 
  }
  
  console.log(referenceErr(1))
//   returns false

Redeclarations

Not full understanding how to redeclare variables can also trigger reference errors.

function redeclarations() {
    let declare = 1;
    if (true) {
      let declare = (declare + 1);   
    }
  }
  console.log(redeclarations())
// Uncaught ReferenceError: Cannot access 'declare' before initialization

To fix the code above, we must either change “let” to “var” or omit “let” inside our if statement completely.

function redeclarations() {
    let declare = 1;
    if (true) {
    declare = (declare + 1); 
  
    }
  }
  console.log(redeclarations())

Conclusion

In JavaScript a reference error is mainly thrown when a code is attempting to reference a variable that does not exist, but there are many ways we can write our code that may trigger this reference error to be thrown. Making sure the variable referenced is defined and is being called in the correct scope can be an easy fix for the majority of cases for new coders.

try {
  let a = undefinedVariable
} catch (e) {
  console.log(e instanceof ReferenceError)  
  console.log(e.message)                    
  console.log(e.name)                       
  console.log(e.fileName)                   
  console.log(e.lineNumber)                 
  console.log(e.columnNumber)               
  console.log(e.stack)                      
}

try {
  throw new ReferenceError('Hello', 'someFile.js', 10)
} catch (e) {
  console.log(e instanceof ReferenceError)  
  console.log(e.message)                    
  console.log(e.name)                       
  console.log(e.fileName)                   
  console.log(e.lineNumber)                 
  console.log(e.columnNumber)               
  console.log(e.stack)                      
}

Specifications

Browser compatibility

JavaScript

• RangeError

  The RangeError object indicates when value is not set of allowed values.

• RangeError() constructor

  The RangeError() constructor creates when value is not in set of allowed values.

• ReferenceError() constructor

  The ReferenceError object represents an when non-existent variable referenced.

• Reflect

  Reflect is a built-in object that provides methods for interceptable JavaScript operations.

Типы ошибок

Последнее обновление: 30.08.2021

В блоке catch мы можем получить информацию об ошибке, которая представляет объект. Все ошибки, которые генерируются интерретатором JavaScript,
предоставляют объект типа Error, который имеет ряд свойств:

• message: сообщение об ошибке

• name: тип ошибки

Стоит отметить, что отдельные браузеры поддерживают еще ряд свойств, но их поведение в зависимости от браузера может отличаться:

• fileName: название файла с кодом JavaScript, где произошла ошибка

• lineNumber: строка в файле, где произошла ошибка

• columnNumber: столбец в строке, где произошла ошибка

• stack: стек ошибки

Получим данные ошибки, например, при вызове несуществующей функции:

try{
	callSomeFunc();
}
catch(error){
	console.log("Тип ошибки:", error.name);
	console.log("Ошибка:", error.message);
}

Консольный вывод:

Тип ошибки: ReferenceError
Ошибка: callSomeFunc is not defined

Типы ошибок

Выше мы рассмотрели, что генерируемая интерпретатором ошибка представляет тип Error, однако при вызове несуществующей функции
генерируется ошибка типа ReferenceError. Дело в том, что тип Error представляет общий тип ошибок. В то же время есть конкретные типы ошибок для определенных ситуаций:

• EvalError: представляет ошибку, которая генерируется при выполнении глобальной функции eval()

• RangeError: ошибка генерируется, если параметр или переменная, представляют число, которое находится вне некотоого допустимого диапазона

• ReferenceError: ошибка генерируется при обращении к несуществующей ссылке

• SyntaxError: представляет ошибку синтаксиса

• TypeError: ошибка генерируется, если значение переменной или параметра представляют некорректный тип или пр попытке изменить значение, которое нельзя изменять

• URIError: ошибка генерируется при передаче функциям encodeURI() и decodeURI() некорректных значений

• AggregateError: предоставляет ошибку, которая объединяет несколько возникших ошибок

Например, при попытке присвоить константе второй раз значение, генерируется ошибка TypeError:

try{
	const num = 9;
	num = 7;
}
catch(error){
	console.log(error.name);		// TypeError
	console.log(error.message);		// Assignment to constant variable.
}

Применение типов ошибок

При генерации ошибок мы можем использовать встроенные типы ошибок. Например:

class Person{
 
    constructor(name, age){
		if(age < 0) throw new Error("Возраст должен быть положительным");
        this.name = name;
        this.age = age;
    }
	print(){ console.log(`Name: ${this.name}  Age: ${this.age}`);}
}
	
try{
	const tom = new Person("Tom", -45);
	tom.print();
}
catch(error){	
	console.log(error.message);	// Возраст должен быть положительным
}

Здесь конструктор класса Person принимает значения для имени и возаста человека. Если передан отрицательный возраст, то генерируем ошибку в виде объекта Error. В качестве параметра в
конструктор Error передается сообщение об ошибке:

if(age < 0) throw new Error("Возраст должен быть положительным");

В итоге при обработке исключения в блоке catch мы сможем получить переданное сообщение об ошибке.

Все остальные типы ошибок в качестве первого параметра в конструкторе также принимают сообщение об ошибке. Так, сгенерируем несколько типов ошибок:

class Person{
 
    constructor(pName, pAge){
		
		const age = parseInt(pAge);
		if(isNaN(age))	throw new TypeError("Возраст должен представлять число");
		if(age < 0 || age > 120) throw new RangeError("Возраст должен быть больше 0 и меньше 120");
        this.name = pName;
        this.age = age;
    }
	print(){ console.log(`Name: ${this.name}  Age: ${this.age}`);}
}

Поскольку для возраста можно ередатьне только число, но и вообще какое угодно значение, то вначале мы пытаемся преобразовать это значение в число с помощью
функции parseInt():

const age = parseInt(pAge);
if(isNaN(age))	throw new TypeError("Возраст должен представлять число");

Далее с помощью функции isNaN(age) проверяем, является полученное число числом. Если age — НЕ число, то данная функция возвращает true. Поэтому
генерируется ошибка типа TypeError.

Затем проверяем, что полученное число входит в допустимый диапазон. Если же не входит, генерируем ошибку типа RangeError:

if(age < 0 || age > 120) throw new RangeError("Возраст должен быть больше 0 и меньше 120");

Проверим генерацию исключений:

try{
	const tom = new Person("Tom", -45);
}
catch(error){	
	console.log(error.message);	// Возраст должен быть больше 0 и меньше 120
}

try{
	const bob = new Person("Bob", "bla bla");
}
catch(error){	
	console.log(error.message);	// Возраст должен представлять число
}

try{
	const sam = new Person("Sam", 23);
	sam.print();	// Name: Sam  Age: 23
}
catch(error){	
	console.log(error.message);
}

Консольный вывод:

Возраст должен быть больше 0 и меньше 120
Возраст должен представлять число
Name: Sam  Age: 23

Обработка нескольких типов ошибок

При выполнении одного и то же кода могут генерироваться ошибки разных типов. И иногда бывает необходимо разграничить обработку разных типов.
В этом случае мы можем проверять тип возникшей ошибки. Например, пример выше с классом Person:

class Person{
 
    constructor(pName, pAge){
		
		const age = parseInt(pAge);
		if(isNaN(age))	throw new TypeError("Возраст должен представлять число");
		if(age < 0 || age > 120) throw new RangeError("Возраст должен быть больше 0 и меньше 120");
        this.name = pName;
        this.age = age;
    }
	print(){ console.log(`Name: ${this.name}  Age: ${this.age}`);}
}
	
try{
	const tom = new Person("Tom", -45);
	const bob = new Person("Bob", "bla bla");
}
catch(error){	
	if (error instanceof TypeError) {
		console.log("Некорректный тип данных.");
	} else if (error instanceof RangeError) {
		console.log("Недопустимое значение");
	}
	console.log(error.message);
}

Создание своих типов ошибок

Мы не ограничены встроенными только встроенными типами ошибок и при необходимости можем создавать свои типы ошибок, предназначеные для каких-то конкретных ситуаций.
Например:

class PersonError extends Error {
  constructor(value, ...params) {
    // остальные параметры передаем в конструктор базового класса
    super(...params)
    this.name = "PersonError"
    this.argument = value;
  }
}

class Person{
 
    constructor(pName, pAge){
		
		const age = parseInt(pAge);
		if(isNaN(age))	throw new PersonError(pAge, "Возраст должен представлять число");
		if(age < 0 || age > 120) throw new PersonError(pAge, "Возраст должен быть больше 0 и меньше 120");
        this.name = pName;
        this.age = age;
    }
	print(){ console.log(`Name: ${this.name}  Age: ${this.age}`);}
}
	
try{
	//const tom = new Person("Tom", -45);
	const bob = new Person("Bob", "bla bla");
}
catch(error){	
	if (error instanceof PersonError) {
		console.log("Ошибка типа Person. Некорректное значение:", error.argument);
	}
	console.log(error.message);
}

Консольный вывод

Ошибка типа Person. Некорректное значение: bla bla
Возраст должен представлять число

Для представления ошибки класса Person здесь определен тип PersonError, который наследуется от класса Error:

class PersonError extends Error {
  constructor(value, ...params) {
    // остальные параметры передаем в конструктор базового класса
    super(...params)
    this.name = "PersonError"
    this.argument = value;
  }
}

В конструкторе мы определяем дополнительное свойство — argument. Оно будет хранить значение, которое вызвало ошибку. С помощью параметра value конструктора
получаем это значение. Кроме того, переопреляем имя типа с помощью свойства this.name.

В классе Person используем этот тип, передавая в конструктор PersonError соответствующие значения:

if(isNaN(age))	throw new PersonError(pAge, "Возраст должен представлять число");
if(age < 0 || age > 120) throw new PersonError(pAge, "Возраст должен быть больше 0 и меньше 120");

Затем при обработки исключения мы можем проверить тип, и если он представляет класс PersonError, то обратиться к его свойству argument:

catch(error){	
	if (error instanceof PersonError) {
		console.log("Ошибка типа Person. Некорректное значение:", error.argument);
	}
	console.log(error.message);
}

try {
  let a = undefinedVariable
} catch (e) {
  console.log(e instanceof ReferenceError)  
  console.log(e.message)                    
  console.log(e.name)                       
  console.log(e.fileName)                   
  console.log(e.lineNumber)                 
  console.log(e.columnNumber)               
  console.log(e.stack)                      
}

try {
  throw new ReferenceError('Hello', 'someFile.js', 10)
} catch (e) {
  console.log(e instanceof ReferenceError)  
  console.log(e.message)                    
  console.log(e.name)                       
  console.log(e.fileName)                   
  console.log(e.lineNumber)                 
  console.log(e.columnNumber)               
  console.log(e.stack)                      
}

Specifications

Browser compatibility