В какой момент можно использовать функции из другого скрипта?

Question

[Anvario0]

Изучаю сейчас тему "Колбэки" и вижу такой код:

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;
  script.onload = () => callback(script);
  document.head.append(script);
}

loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
  alert(`Здорово, скрипт ${script.src} загрузился`);
  alert( _ ); // функция, объявленная в загруженном скрипте
});

Суть в том, что функция loadScript динамически добавляет скрипт к документу и позволяет использовать функцию callback из него. Но я не понял, почему мы используем функцию перед тем, как добавляем скрипт в HTML? То есть почему строчка
document.head.append(script);
Находится после
script.onload = () => callback(script);
Разве мы можем использовать скрипт до того, как добавили его в HTML-документ?

Answer 1

[Вадим]

Разве мы можем использовать скрипт до того, как добавили его в HTML-документ

Так а где там использование скрипта до того как он загрузился?

1) функция loadScript принимает на вход 2 аргумента - адрес для скрипта(src) и функцию, которая выполнится после загрузки скрипта из указанного адреса(callback).
2) Функция loadScript создаёт элемент скрипт, в src которого передаёт одноимённый аргумент. Таким образом, происходит загрузка скрипта браузером.
3) Задаётся обработчик события onload - то есть когда скрипт загрузится нужно выполнить колбэк - второй аргумент функции. В данном примере это 2 алерта.
4) т.к. событие onload неизвестно когда произойдёт (оно асинхронное) то выполняется следующая строчка - добавление скрипта в шапку.
5) Скрипт загрузился, выполнился коллбэк. Т.к. скрипт уже в шапке - доступна функция лодаша.

Comments

[Anvario0]

Понял, спасибо большое

[user7567]

То есть загрузка скрипта произошла в момент когда интерпретатор дошел до строчки: "script.src = src;"? А как мы получили доступ к функции "_" лодаша во втором алерте? В первом алерте понятно, мы заходим в свойство переданного колбэку обьекта script.

[Вадим]

user7567, пункт 5-

Скрипт загрузился, выполнился коллбэк. Т.к. скрипт уже в шапке - доступна функция лодаша.

нижнее подчёркивание это глобальная переменная лодаша.
Так как скрипт уже загрузился - она проинициализирована и мы имеем к ней доступ.