<script type="module">

1. всегда включена директива use strict
2. отложенное (deferred) выполнение по умолчанию
3. атрибут async работает во встроенных скриптах
4. для загрузки внешних модулей с другого источника, он должен ставить заголовки CORS
5. дублирующиеся внешние скрипты игнорируются
6. у модулей есть своя область видимости, обмениваться функциональностью можно через import/export

В реальной жизни модули в браузерах редко используются в «сыром» виде. Обычно, мы объединяем модули вместе, используя специальный инструмент, например Webpack и после выкладываем код на рабочий сервер.

Одно из преимуществ использования сборщика – он предоставляет больший контроль над тем, как модули ищутся, позволяет использовать «голые» модули и многое другое «своё», например CSS/HTML-модули.

Сборщик делает следующее:

Берёт «основной» модуль, который мы собираемся поместить в <script type="module"> в HTML.
Анализирует зависимости (импорты, импорты импортов и так далее)
Собирает один файл со всеми модулями (или несколько файлов, это можно настроить), перезаписывает встроенный import функцией импорта от сборщика, чтобы всё работало. «Специальные» типы модулей, такие как HTML/CSS тоже поддерживаются.
В процессе могут происходить и другие трансформации и оптимизации кода:
Недоступный код удаляется.
Неиспользуемые экспорты удаляются («tree-shaking»).
Специфические операторы для разработки, такие как console и debugger, удаляются.
Современный синтаксис JavaScript также может быть трансформирован в предыдущий стандарт, с похожей функциональностью, например, с помощью Babel.
Полученный файл можно минимизировать (удалить пробелы, заменить названия переменных на более короткие и т.д.).

Если мы используем инструменты сборки, то они объединяют модули вместе в один или несколько файлов, и заменяют import/export на свои вызовы. Поэтому итоговую сборку можно подключать и без атрибута type="module", как обычный скрипт:

<script src="bundle.js"></script>

proxy

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

const numbers = [0, 1, 2];


const numbersProxy = new Proxy(numbers, {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    } else {
      return 0; 
    }
  }
});

numbers[1]
// 1

numbers[123]
// 0

eval

функция eval позволяет выполнять строку кода

let value = eval('1+1');

// value = 2;

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

не используйте eval
«eval is evil»

комментарий к главе про каррирование

каррирование

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

const curry = (a) => (b) => a + b;

const plusTwo = curry(2)

plusTwo(3)
// 5

итак я дочитала первую часть учебника
из чего же состоит джаваскрипт по впечатлениям оттуда

10% — типы данных, разные типы данных, символы, мапы, викмапы, массивы, объекты (про объекты будет чуть позже), число не отличить от строки, когда оно приходит с сервера, конст не работает, смиритесь с этим

50% — объекты. Давайте создавать объекты, давайте наследовать объекты, давайте объектам задавать прототипы, всё есть объект. Ни в коем случае не теряйте контекст

30% — функции. Функции могут создавать объекты, можно через функции устанавливать прототип для объектов (но это не совсем тот прототип, что передается через объекты), вот новый синтаксис для создания объектов через функции, не забудьте про конструктор, но есть ещё и обычные функции

10% — промисы, генераторы, ошибки, ивент луп, функциональное программирование

немного про гриды

есть свойства justify-items, justify-content, align-items, align-content и они совершенно неразличимы
но я уловила

justify — влияет на ряды и элементы внутри рядов
align — влияет на колонки и элементы внутри колонок

items — влияет на элементы внутри рядов или колонок
content — влияет на расположение рядов/колонок внутри грида

align-items: start

все возможные варианты:

auto
normal
start
end
center
stretch
baseline
first baseline
last baseline

главное, что стоит помнить про гриды:

- все их элементы по умолчанию имеют все выраванивания типа stretch и это часто бывает очень неудобно, так что можно сразу это сбрасывать
- из-за какого-то внутреннего бага все элементы грида имеют странные настройки min-width / min-height так что их тоже стоит сбрасывать
у нас на работке есть миксин:

display: grid; 

* > {
  min-width: 0;
  min-height: 0;
}

How to use nulish coalescing with destructuring

const {a} = (b.c?.d?.e || {})

в субботу обнаружила, что путаю fifo и lifo

FIFO — first in, first out — это обычная очередь
LIFO — last in, first out — это stack (пачка карт например)

вторая часть учебника назвается «Браузер: документ, события, интерфейсы» и вообще не показалась мне интересной — либо всё то, что я уже знаю, либо информация, которую сложно использовать ирл

самая полезная статья — про ивенлуп, микротаски, макротаски, всё такое
https://learn.javascript.ru/event-loop

что такое макротаски и микротаски?

макротаск это setTimeout

микротаск это промис

сначала выполняется макротаск, потом все микротаски в очереди, потом другой макротаск (если он есть)

то есть порядок выполнения этого кода

Promise.resolve().then(() => console.log('first'))

setTimeout(() => {
  console.log('second')
}, 0)


console.log('third')

будет такой

log: "third"


log: "first"


log: "second"