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

Question

[Lolipop999]

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

<div class="out-1"></div>
<div class="out-2"></div>
<div class="out-3"></div>

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))

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

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);

Answer 1

[Вадим]

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

А почему не должно?

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

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

f1(showArr(arr1, out1))

Вы в f1 тут не функцию передаёте, а результат её работы, то есть undefined. Потому что если после названия функции есть круглые скобки, то сначала эта функция вызовется, отработает, и будет использован результат её выполнения. Так как явного return нет, то showArr вернёт undefined. Таким образом эта запись:
f1(showArr(arr1, out1)) эквивалентна этой: f1(undefined) С той лишь разницей, что выполнится код внутри showArr..

Но так как код выполняются справа налево, то внутри f1() не успевает дойти до ошибки undefined is not a function потому что внутри f1() сначала пытается найти переменную arr. А откуда ей там взяться? Её нет ни в аргументах функции f1(), ни в вышестоящей области видимости, так как там arr1.

Ну а во втором примере Вы как раз передаёте функцию как аргумент, по ссылке, не вызывая её f1(showArr, arr1, out1); Поэтому ошибку не выдаёт.

почему третий элемент массива сохраняет условия и остается 40, хотя в условии я поставил задачу только для четвертого элемента массива?

Опять же, а почему не должно? Вы изменяете массив arr1 по ссылке. То есть один и тот же массив изменяется и в showArr и в showArr2.

function showArr(arr, block) { // arr = [1, 2, 3, 4, 5, 6, 7, 8]
   arr[3] = arr[3] * 10; // поменяли 4ый элемент, массив стал равен [1, 2, 3, 40, 5, 6, 7, 8]
}

function showArr2(arr, block) { // arr = [1, 2, 3, 40, 5, 6, 7, 8]
   arr[4] = arr[4] * 100; // поменяли 5ый элемент, массив стал равен [1, 2, 3, 40, 500, 6, 7, 8]
}

f1(showArr, arr1, out1); // и тут
f1(showArr2, arr1, out2); // и тут Вы передаёте один и тот же массив. Массив это ссылочный тип данных. В обоих обработчиках будет один и тот же массив, а не 2 одинаковых

Comments

[Lolipop999]

Спасибо за ответ, но есть еще вопросы:
1) То есть ошибка всего лишь в том, что в f1 я написал showArr() со скобками и то что в f1 в аргументах не указан arr? Еще вы писали, что раз нет return, то ф-ия ничего не возвращает, то есть в showArr можно добавить return?

2) Получается ф-ия showArr изменяет изначальный массив, но почему? разве условия не работают внутри ф-ии? И как сделать так, чтобы фу-ия выполнялась, но изначальный массив не изменялся?

И можно ли переформулировать причину ошибки так: в этом случае function f1(myFunc) {myFunc(arr, block);} у у f1 в перечне с тем с чем работаем нет arr, а в случае

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

есть

[Вадим]

Lolipop999,
1) ну, я бы не сказал что ошибка "лишь тут". Да, это может выглядеть как мелочь, но это демонстрирует что у Вас на данный момент очень смутное понимание фундаментальной разницы между передачей значения по ссылке или напрямую "по значению". А это очень важная тема.
И я не писал что функция ничего не возвращает. Я наоборот написал что она возвращает undefined. Можно добавить return конечно, если нужно.

2)

Получается ф-ия showArr изменяет изначальный массив, но почему?

. Это все туда же. Нужно пойти узнать разницу между передачей по ссылке и по значению.

разве условия не работают внутри ф-ии?

Какие условия? Не вижу нигде никаких условий. Вижу чёткую команду что нужно в массиве поменять значение по конкретному индексу.

И как сделать так, чтобы фу-ия выполнялась, но изначальный массив не изменялся?

Делать копию массива и работать с ней. Как сделать копию массива - легко гуглится.

И можно ли переформулировать причину ошибки так: у f1 в перечне с тем с чем работаем нет arr

ну, отчасти да. Но только этого недостаточно. Нужно было бы ещё этот arr туда передавать при вызове функции. И второй момент, если оставить круглые скобки вокруг showArr при вызове f1, то проблема бы просто поменялась на другую. Так как аргумент myFunc был бы undefined, потому что результатом работы showArr является undefined.
То есть f1(showArr(arr1, out1), arr1, block1) было бы эквивалентно f1(undefined, arr1, block1) и тогда при вызове внутри f1 функции myFunc(arr, block) была бы ошибка что undefined is not a function.

[Lolipop999]

Да, это может выглядеть как мелочь, но это демонстрирует что у Вас на данный момент очень смутное понимание фундаментальной разницы между передачей значения по ссылке или напрямую "по значению". А это очень важная тема.

Какие материалы посоветуете посмотреть/почитать, чтобы понять разницу?

[Вадим]

Lolipop999, Прям какой-то закладки нет на эту тему. Первое что гуглится, то, в целом, и можно читать.
https://doka.guide/js/ref-type-vs-value-type/

https://learn.javascript.ru/object-copy

Ну и потратить 20 минут на практику - и дело в шляпе.