Cannot access before initialization js ошибка

Время на прочтение
6 мин

Количество просмотров 9.7K

На первый взгляд, синтаксис JS прост и интуитивно понятен, что подкупает. Однако это не мешает тем, кто делает первые (или не первые) шаги в нём, допускать ошибки. Мы попытались осветить некоторые промахи начинающих разработчиков.

Язык JavaScript используется во фронтенд-разработке для браузерных приложений на стороне клиента. Для начала изучения достаточно простого редактора типа Notepad, браузера и какого-нибудь из многочисленных руководств для чайников. Но JavaScript проявляет себя не совсем так, как другие языки в разных ситуациях, и иногда это способствует возникновению ошибок. К примеру, нестрогая типизация языка и вольная трактовка данных может привести к тому, что данные будут интерпретироваться не так, как предполагает разработчик на этапе создания кода. Ошибки находятся в ходе работы этого кода.

Переменная не определена либо недоступна в текущей области кода

Такое происходит сплошь и рядом — обращение к переменной, которая ранее не была объявлена либо недоступна в текущей области кода. Например, код:

<script>
let y = x + 1
</script>

Без предварительного определения переменной x породит ошибку.

Uncaught ReferenceError: x is not defined

Кроме того, переменная должна быть видна в текущем контексте. Сравните два примера.

Код 1.

<script>
function summa () {
  let a = 2
  let b = 3;
  return a + b;
}
console.log(a); //Uncaught ReferenceError
</script>

Код 2.

<script>
let a = 2
let b = 3;
function summa () {
  return a + b;
}
console.log(summa());
</script>

Код 1 на шестой строке выдаёт ошибку.

Uncaught ReferenceError: Cannot access 'a' before initialization

Дело в том, что переменная a определена внутри функции и недоступна за её пределами.
А код 2 без ошибок вернёт 5, потому что функция summa() имеет доступ ко всем переменным, определённым в глобальной области. Понимание области видимости важно в Javascript, области могут быть вложенными друг в друга, при этом дочерние области видимости будут иметь доступ к  родительским, но не наоборот.

Неверно организовано условие сравнения if

Чтобы записать условие сравнения переменной с каким-либо значением, используется оператор ==.

<script>
if(x == some_value) {}
</script>

Однако если ошибиться и использовать одинарный знак =, то вместо сравнения в круглых скобках окажется присваивание.

<script>
if (x = some_value) {}
</script>

В JavaScript эта операция будет истинной, в то время как иные языки программирования могут среагировать ошибкой.

Подвид предыдущей ошибки — когда переменная сравнивается не просто со значением, а с конкретным — единицей.

<script>
var x = some_value;
if (x = 1) { … }
</script>

Тут дьявол в деталях. По-булевски единица — это истина, а ноль — ложь. В результате выражение будет истинно.

Сравнение значений разных типов

Иной раз сравниваются переменные, которым были присвоены значения разных типов.

<script>
x = prompt('Введите число:', 0);
y = prompt('Введите другое число:', 0);
if (y < x){
console.log("Первое число " + x + " больше " + y);
}
else if (y > x){
 	console.log("Второе число " + y + " больше " + x);
}
else if (x == y){
 	console.log(x + " равно " + y);
};
</script>

Ввожу 5 и 125, а мне в итоге пишут, что 5 больше 125, почему?

Отвечаем: в этом примере переменные x и y сравниваются как строки, а не как числа, так как после получения значений они так и остались строками.

Ситуация изменится, если приведём значения переменной к числу.

…
x = parseInt(x)
y = parseInt(y)
…

К слову, в коде полезен === . Это оператор строгого равенства, который проверяет сравнимое с учётом типов.

if(x === y) { … }
</script>

В этом фрагменте кода сравнение сразу вернёт ложь, если переменные разных типов.

Объявленные в цикле переменные не исчезают после его завершения

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

<script>
for (let i = 0; i <= 100; i++) {
// некий код
}
console.log (i) //приведёт к выбросу исключения ReferenceError
</script>

Если попытаться использовать переменную i после выхода из цикла, то код в строке 4 приведёт к ошибке.

Переменная ликвидируется после окончания цикла, её значение будет не определено. В этом можно убедиться:

console.log(typeof i == typeof undefined)  // выведет true

Попробуем при объявлении счётчика в цикле вместо let (это объявление переменной с блочной областью видимости) использовать директиву var.

<script>
for (var i = 0; i <= 100; i++) {
// некий код
}
console.log (i); 
</script>

Тогда i после выхода из цикла продолжит жить своей жизнью.

Некорректное использование this

Ошибка возникает, когда специальное ключевое слово this отсутствует в коде либо используется неправильно. Ключевое слово this ссылается на контекст выполняемой функции. Оно помогает работать с объектами. Но имеет значение контекст — какой именно объект в данный момент кода будет описан словом this.  

<script>
function myFunction() {
  var myObject = {
    objProperty: "текстовое свойство",
    objMethod: function() {
      console.log(objProperty); //код, который приведёт к ошибке 
    }
  };
  myObject.objMethod();
}
myFunction();
</script>

В строке 5 переменная objProperty не определена, код вернёт ошибку.

Uncaught ReferenceError: objProperty is not defined

А всё потому, что пропущено ключевое слово this. Если внутри объекта myObject требуется обратиться к значению его свойства, то это делается следующим образом: this.objProperty.

Другой пример:

<script>
Form.prototype.submit = function () {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearView();  //код, который приведёт к ошибке
  }, 100);
};
</script>

Ключевое слово this на строке 4 употребляется, однако код вернёт ошибку.

Uncaught TypeError: this.clearView is not a function

В этой строке контекст для this  — уже область функции setTimeout (объект window). 

Чтобы достичь нужного контекста, следует обратиться к нему, сделать это можно разными путями:

1. Совместимым со старыми браузерами способом — определить выше переменную и использовать в нужный момент именно её.

…
var self = this;  
  this.timer = setTimeout(function() {
    self.clearView();
  }, 100);
…

1. Использовать метод bind(), который работает не в совсем старых версиях браузеров.

Form.prototype.submit = function () {
  this.clearLocalStorage();
  this.timer = setTimeout(this.countTime.bind(this), 100);
};
Form.prototype.countTime = function(){
  this.clearView();
};

Использование alert

Это, скорее, не ошибка, а рекомендация более дружелюбного общения с посетителем. Чтобы мгновенно увидеть значение переменной value, можно просто взять и написать alert(value). Однако это не всегда поможет для решения сиюминутной проблемы. Например, если переменная value является объектом, то это мало что даст. Но существует набор решений для разных случаев.

Как правило, вывод данных нужен в ситуациях, когда хочется:

1. Что-то сказать посетителю, вывести информационное или предупредительное сообщение. Для этой цели применяют разные подходы с помощью jquery и bootstrap. К тому же в некоторых браузерах вывод данных с помощью alert блокирует экран и не даёт ничего сделать на странице, пока этот алерт не отожмёшь.

2. Произвести отладку в ходе разработки. В этом случае можно использовать объект браузера Console. Например, console.log(value) выведет сообщение в веб-консоль.

Это лучше alert. Во-первых, как следует из названия, служебные данные выводятся в консоли. Туда заходит немного рядовых посетителей, и если вы вдруг забыли убрать отладочный вывод, его увидят далеко не все. Во-вторых, с помощью отладки в консоли можно детально смотреть на объекты, о чём вскользь упоминалось выше. 

Зададим объект и посмотрим на него разными способами.

<script>
  var Person = {
    name: 'Peter', age: 34, skills: ['HTML', 'Javascript', 'CSS']
  }
  alert(Person)
  console.log(Person)
</script>

Результат кода alert(Person).

И результат вывода в консоль. Как видите, более информативно.

Неверное подключение библиотек 

Такое происходит, когда библиотеку:

• не подключили, 

• не подключили вовремя, а библиотека или скрипт, которые в ней нуждаются, уже подключены/запущены.

И вместо галереи или слайдера поджидает ошибка.

Uncaught TypeError: Cannot read properties of undefined

Смотрим код.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
  <div class="owl-carousel">
    <div class="item">
      <h2>Item 1</h2>
    </div>
    <div class="item">
      <h2>Item 2</h2>
    </div>
    <div class="item">
      <h2>Item N</h2>
    </div>
  </div>
  <script>
    var owl = $('.owl-carousel');
    owl.owlCarousel({...})
  </script>

Библиотека Owl Carousel имеет в зависимостях Jquery, но подключается раньше.

В примере выше ошибку генерирует скрипт инициализации карусели.

Uncaught TypeError: owl.owlCarousel is not a function

У библиотеки не было шанса объявиться. Как правило, когда на странице используется ряд скриптов, ошибки плодятся как снежный ком.

Следует поменять местами подключения Jquery и Owl Carousel — строки 3 и 4.

Выводы

Избежать распространённых ошибок помогут практика и понимание того, как работает язык. Отследить баги помогут такие инструменты, как JSHint, JSLint, ESLint.

Кроме того, в IDE обычно имеются плагины для дебаггинга. В начале статьи мы говорили о том, что начинать изучение JavaScript можно с помощью редакторов типа Notepad. Но в удобной настроенной среде это делать гораздо приятнее и эффективнее.

Как вы слышали не раз, не ошибается тот, кто ничего не делает. Красное оповещение об ошибке в консоли не должно пугать. Это подсказка, что пошло не так, инструкция к действию — погуглить фразу Javascript <текст ошибки>.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

yarn next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.16.0
      npm: 8.11.0
      Yarn: 3.2.0
      pnpm: N/A
    Relevant packages:
      next: 12.2.4
      eslint-config-next: 12.2.0
      react: 17.0.2
      react-dom: 17.0.2

warn  - Latest canary version not detected, detected: "12.2.4", newest: "12.2.6-canary.5".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

yarn jest

Describe the Bug

Between 12.2.0 and 12.2.1 a big chunk of our unit tests broke. Any test using jest.requireActual('') to not mock some of the modules fails with an error like this:

    ReferenceError: Cannot access 'buildError' before initialization

      81 |
    > 82 | export const buildError = {

I tried to debug this, but sadly am not able to view the swc compiled source files.

Additionally all tests using jest.mock('next/router') have to be changed to:

jest.mock('next/router', () => ({
  useRouter: jest.fn(),
});

Because that now yielded the following error:

No router instance found.
    You should only use "next/router" on the client side of your app.

Expected Behavior

jest.requireActual('') to keep working.

Link to reproduction

Tried to reproduce in simple repo but wasn’t able to get the same behaviour

To Reproduce

This part of the test that breaks:

jest.mock('./bla', () => ({
  ...jest.requireActual('./bla'),
  useBla: jest.fn(),
});

describe('SomeComponent', () => {
  const getComponent = (): ShallowWrapper => shallow(<SomeComponent />);

  it('should bla', () => {
    const component = getComponent();

    expect(component.html()).toBeNull();
  });
});

export const SomeComponent: React.FC = () => {
  const bla = useBla();

  return bla;
};

export const buildError = {
  build: () => 'test',
};

export const useBla = () => 'bla';

Compiler options:

    compiler: {
      styledComponents: {
        cssProp: false,
      },

      emotion:
        // Don't compile with jest otherwise all emotion components become EmotionCSSPropInternal
        phase === PHASE_TEST
          ? null
          : {
              sourceMap: true,
              autoLabel: 'dev-only',
              labelFormat: 'local',
            },

      removeConsole:
        phase === PHASE_PRODUCTION_BUILD || phase === PHASE_PRODUCTION_SERVER,
    },

Introduction

JavaScript, being a dynamic and loosely-typed language, has its own set of unique challenges and errors. One such error that often confuses developers is the ReferenceError: Cannot access 'variable' before initialization.

In this Byte, we’ll unravel the mystery behind this error, understand why initializing variables is so important, and compare the behavior of var, let, and const.

What is a ReferenceError?

The ReferenceError: Cannot access 'variable' before initialization is thrown when you try to access a variable before it has been initialized. In JavaScript, you can declare a variable without initializing it, but if you try to use it before it’s been assigned a value, you’ll run into this error.

let testVar;
console.log(testVar); // undefined

console.log(notInitializedVar); // ReferenceError: Cannot access 'notInitializedVar' before initialization
let notInitializedVar;

In the above example, testVar is declared but not initialized, so when we log it to the console, it returns undefined. However, notInitializedVar is being accessed before it’s declared, resulting in a ReferenceError.

Why initialize your variables?

Initializing variables is a good practice in JavaScript for several reasons. First, it makes your code more predictable. When a variable is initialized, you know exactly what its value is at the start of the program. This can prevent bugs and make your code easier to understand.

Second, initializing variables can improve performance. JavaScript engines can optimize your code better when they know the types of your variables in advance.

Third, it’s a requirement when using const. If you declare a variable with const and don’t initialize it, you’ll get a SyntaxError.

let testVar; // OK
const testConst; // SyntaxError: Missing initializer in const declaration

Different Types of Variables

In JavaScript, you can declare variables using var, let, or const. The difference between them lies in their scope and hoisting behavior.

var is function-scoped and is hoisted to the top of its scope with an initial value of undefined. This means you can access it before its declaration, but it will return undefined.

console.log(testVar); // undefined
var testVar = 'Hello, World!';

let and const are block-scoped and are also hoisted to the top of their scope. However, they remain in a «temporal dead zone» from the start of the block until their declaration is processed. During this period, accessing them results in a ReferenceError.

console.log(testLet); // ReferenceError: Cannot access 'testLet' before initialization
let testLet = 'Hello, World!';

console.log(testConst); // ReferenceError: Cannot access 'testConst' before initialization
const testConst = 'Hello, World!';

Shadowing

In JavaScript, variable declarations can either be global or local. Global variables are declared outside a function, while local variables are declared inside a function. This distinction is important because it determines the scope of the variable — that is, where it can be accessed.

A variable is said to be shadowed when a local variable has the same name as a global variable. This can lead to unexpected behavior, as the local variable takes precedence over the global one.

Consider the following example:

let x = 10; // global variable

function foo() {
    let x = 20; // local variable
    console.log(x); // outputs 20
}

foo();
console.log(x); // outputs 10

In this example, the local variable x inside the function foo shadows the global variable x. Inside foo, the value of x is 20, but outside foo, the value of x is 10.

Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase. This means that you can use a variable or call a function before it’s been declared.

Let’s take a look at an example:

console.log(x); // outputs undefined
var x = 5;
console.log(x); // outputs 5

Even though x is declared after the first console.log, the code doesn’t throw a ReferenceError. This is because JavaScript hoists the declaration of x to the top of the scope.

However, it’s important to note that only the declarations are hoisted. Initializations (when you assign a value to the variable) are not hoisted. This is why the first console.log outputs undefined instead of 5.

Best Practices

When writing JavaScript, it’s important to consider where you place your variables. Here are a few best practices to keep in mind:

1. Declare variables at the top of the scope: This can help avoid issues with hoisting and make your code easier to read and understand.

2. Use let and const instead of var: let and const have block scope, which means they are only accessible within the block they are declared in. This can help prevent issues with variable shadowing. var was the original way to declare variables in JS, but now best practice is to use let or const.

3. Initialize variables when you declare them: This can help prevent ReferenceError: Cannot access before initialization errors.

Here’s an example that follows these best practices:

function foo() {
    let x = 10; // declare and initialize at the top of the scope
    const y = 20; // use const for variables that won't change

    // rest of the code...
}

// rest of the code...

Conclusion

As a JS developer, you’ll need to understand variable declarations, hoisting, and shadowing to avoid errors like ReferenceError: Cannot access before initialization. JS works a bit different than other languages, so these nuances can be confusing. By following best practices like declaring variables at the top of the scope, using let and const instead of var, and initializing variables when you declare them, you can write cleaner, more predictable code.