Почему консоль выдает ошибку в callback ф-ии?

Рейтинг: 0Ответов: 1Опубликовано: 04.03.2023

Почему консоль выдает ошибку Uncaught ReferenceError: arr is not defined?

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
let out1 = document.querySelector('.out-1');
let out2 = document.querySelector('.out-2');
let out3 = document.querySelector('.out-3');

function f1(myFunc) {
   myFunc(arr, block);
}

function showArr(arr, block) {
   arr[3] = arr[3] * 10;
   block.innerHTML = arr.join('_');
}

f1(showArr(arr1, out1))
<div class="out-1"></div>
<div class="out-2"></div>
<div class="out-3"></div>

А при таком написании не выдает ошибку, НО при выводе в блок out2 почему третий элемент массива сохраняет условия и остается 40, хотя в условии я поставил задачу только для четвертого элемента массива?

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
let out1 = document.querySelector('.out-1');
let out2 = document.querySelector('.out-2');
let out3 = document.querySelector('.out-3');

function f1(myFunc, arr, block) {
   myFunc(arr, block);
}

function showArr(arr, block) {
   arr[3] = arr[3] * 10;
   block.innerHTML = arr.join('_');
}

function showArr2(arr, block) {
   arr[4] = arr[4] * 100;
   block.innerHTML = arr.join(' ');
}

f1(showArr, arr1, out1);
f1(showArr2, arr1, out2);
<div class="out-1"></div>
<div class="out-2"></div>
<div class="out-3"></div>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Проблема тут:

function f1(myFunc) {
   myFunc(arr, block);
}

Вы передаете в функцию f1 не другую функцию, а возвращаемое ею значение:

f1(showArr(arr1, out1))

Из-за этого во-первых myFunc не является функцией, во вторых вы отправляете в myFunc массив arr и элемент block, которые не объявлены, отсюда и ошибка.

Исправить можно так:

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
let out1 = document.querySelector('.out-1');
let out2 = document.querySelector('.out-2');
let out3 = document.querySelector('.out-3');

function f1(myFunc) {
   myFunc(arr1, out1);
}

function showArr(arr, block) {
   arr[3] = arr[3] * 10;
   block.innerHTML = arr.join('_');
}

f1(showArr)
<div class="out-1"></div>
<div class="out-2"></div>
<div class="out-3"></div>