Как разъяснить данную callback функцию?

Question

[Lolipop999]

Есть такой код

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

function myFunc(callback) {
   let arr = [1, 2, 3, 4, 5, 6, 7, 8];
   let el = document.querySelector('.out-1');
   callback(arr, el);
}

function out(arr, el) {
   el.innerHTML = arr.join('-');
}

myFunc(out)

Не могу до конца понять, как ф-ия out взаимодействует c myFunc(callback). Как я понял :
1)Ф-ия myFunc имеет параметр ф-ию callback, которая в свою очередь содержит параметры arr и el, массив и блок.
2)Ф-ия out выполняет действие добавления массива в html блок
3)При вызове myFunc(out) происходит следующее: Береем ф-ию myFunc и говорим ей выполнить действие с помощью ф-ии out и она передается в качестве параметра в myFunc и ... дальше я не могу понять, что происходит

Answer 1

[Сергей delphinpro]

она передается в качестве параметра в myFunc и ...

...и она тупо вызывается с нужными параметрами

то же самое, если написать сразу

function myFunc(/* callback */) {
   let arr = [1, 2, 3, 4, 5, 6, 7, 8];
   let el = document.querySelector('.out-1');
   // callback(arr, el);
  el.innerHTML = arr.join('-');
}

//function out(arr, el) {
//   el.innerHTML = arr.join('-');
//}

// myFunc(out)
myFunc()

Answer 2

[VoidVolker]

function myFunc(callback) {
   let arr = [1, 2, 3, 4, 5, 6, 7, 8]; // Создать массив
   let el = document.querySelector('.out-1'); // Найти элемент
   callback(arr, el); // Вызвать функцию callback и передать ей в параметрах массив и найденный элемент
}