Сергей Соколов

1. Срабатывает then и добавляет в очередь микрозадач свой каллбэк.
2. Срабатывает setTimeout (22222222) и добавляет в очередь макрозадач свой каллбэк.
3. Основной стек пуст, вызывается задача из очереди микрозадач.
4. Срабатывает setTimeout (11111) и добавляет в очередь макрозадач свой каллбэк.
5. Основной стек пуст, очередь микрозадач пуста, вызывается задача из очереди макрозадач.
6. Выводится '22222222'.
7. Основной стек пуст, очередь микрозадач пуста, вызывается задача из очереди макрозадач.
8. Выводится '11111'.
9. Основной стек пуст, очередь микрозадач пуста, очередь макрозадач пуста.

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

Нужно поместить эту логику внутрь функции-обработчика нажатия на кнопку, то есть внутрь фигурных скобок {}. Тогда новое случайное число будет генерироваться при каждом нажатии на кнопку, что и даст разные значения.

Используйте стек.

Например, в стек помещаем комплекты из трёх значений - под каким именем, что и куда копируем. Крутим цикл, пока стек не окажется пуст. Если копируемое значение является примитивным, то просто записываем его в копию, и уходим на следующую итерацию. Если же перед нами объект, то закидываем в копию пустой объект; этим же свежесозданным пустым объектом дополняем пары ключ-значение исходного объекта, и кладём это всё в стек.

function clone(value) {
  const clone = [];

  for (const stack = [ [ 0, value, clone ] ]; stack.length;) {
    const [ k, v, target ] = stack.pop();
    const isObj = v instanceof Object;
    target[k] = isObj ? v.constructor() : v;
    if (isObj) {
      stack.push(...Object.entries(v).map(n => [ ...n, target[k] ]).reverse());
    }
  }

  return clone[0];
}

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

Как выглядит получение копии объекта: проверяем, встречался ли указанный объект ранее, если нет - создаём новый объект, сохраняем его в Map, а также кладём его вместе с оригиналом в стек, для последующей обработки; достаём из Map'а копию.

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

function clone(value) {
  const stack = [];
  const clones = new Map;
  const getClone = v => v instanceof Object
    ? (clones.has(v) || stack.push([ v, clones.set(v, v.constructor()).get(v) ]),
       clones.get(v))
    : v;

  for (getClone(value); stack.length;) {
    const [ source, target ] = stack.pop();
    for (const k in source) if (Object.hasOwn(source, k)) {
      target[k] = getClone(source[k]);
    }
  }

  return getClone(value);
}

как правильнее всего будет это сделать?

Перестать заниматься ерундой и начать использовать готовые решения - structuredClone или cloneDeep, например.

В .finally() нужно функцию передавать.

const newData = data.reduce((acc, n) => {
  const k = Object.keys(n)[0];
  (acc.result[acc.keys[k] = (acc.keys[k] ?? -1) + 1] ??= []).push(n);
  return acc;
}, { result: [], keys: {} }).result.flat();

или

const numKeys = new Set(data.flatMap(Object.keys)).size;
const numObjs = data.length / numKeys;
const newData = data.map((n, i, a) => a[(i % numKeys) * numObjs + (i / numKeys | 0)]);

Метод say лежит в прототипе экземпляра Sounds, а не в самом экземпляре.
Object.assign копирует только содержимое непосредственно объекта, не заглядывая в его прототип. Так мир устроен.

Frontend Developer Roadmap карта составленная профессионалами отрасли. Последнее обновление информации было 19 дней назад.
И 191К звезд на гитхабе подтверждают надежность информации
github: kamranahmedse/developer-roadmap

Вот несколько фактов, которые помогут понять как работает Git.

• Файл .gitignore действует только на ещё не отслеживаемые файлы.
  
• Файл .gitignore предназначен для описания того, что мы не хотим СЛУЧАЙНО добавить в репозиторий. Либо не хотим случайно удалить переключив ветку.
  
• Мы можем ПРИНУДИТЕЛЬНО добавить в репозиторий ЛЮБОЙ файл, даже если он описан в .gitignore.
  
• Добавление файла в .gitignore не удалит сам файл из репозитория. Если файл УЖЕ в репозитории, то он продолжит отслеживаться, независимо от наличия .gitignore.
  
• Если больше не хотим отслеживать какой-то файл, то просто удаляем его из репозитория. Ключ --cached позволит оставить файл в рабочем каталоге текущего репозитория если он нужен.
  

git rm --cached -- '.DS_Store'
git commit

Но последний рецепт сработает только на одном компьютере. Если коллеги переключатся на этот коммит, то файл удалится у них из рабочего каталога.

let p = new Promise((res, rej) => {
    // Ждем 7сек; вызываем функцию res с аргументом 2
    setTimeout(res, 7000, 2);
})
    // Возвращаем новый промис; ждем 5сек; вызываем функцию res с аргументом 6 (2 + 4)
    .then((data) => new Promise((res) => setTimeout(res, 5000, data + 4)))
    .then((data) => console.log('data', data)); // 'data' 6

setTimeout(() => console.log(p), 10000); // Просто выведем промис

Приветствую. Можно, если изменить код:

switch (true) {
  case var < 5:
    ...
  case var > 5:
    ...
  default: 
    ...
}

const findLastInRangeIdx = (arr, from, to) => 
  arr.reduce(
    (acc, item, idx) => (item > from && item < to ? idx : acc),
    -1,
  );

С чем это связано?

С тем, что рендеринг элементов не бесплатный.

Как с этим бороться?

Инициализировать 5, а не 50. Остальные - по явному запросу пользователя, выгружая при этом из памяти старые ненужные.

Это называется Delay Tolerant Networking.

Есть куча статей и конференций на тему. Это активная область исследования и каких-то окончательных ответов тут человечество пока не придумало, но есть куча очень умных алгоримов.

function chunked(str, numChunks) {
  const chunkSize = Math.ceil(str.length / numChunks);
  return Array.from(
    { length: numChunks },
    (_, i) => str.slice(i * chunkSize, (i + 1) * chunkSize)
  );
}

UPD. В комментариях докладывают:

неаккуратненько как-то:
chunked('test', 3) // [ "te", "st", "" ]

Это поправимо. Наверное. Размер куска округляем вниз. Есть два варианта:

Первый - закидываем остаток в последний кусок:

const chunked = (str, numChunks) =>
  Array.from(
    { length: numChunks },
    function(_, i) {
      return str.slice(this(i), i < ~-numChunks ? this(-~i) : str.length);
    },
    i => i * (Math.max(1, str.length / numChunks | 0))
  );

Второй - раскидываем по одному дополнительному элементу в те куски, что идут первыми:

function chunked(str, numChunks) {
  const chunkSize = str.length / numChunks | 0;
  const numLooseItems = str.length % numChunks;
  const chunkIndex = i => i * chunkSize + Math.min(i, numLooseItems);

  return Array.from(
    { length: numChunks },
    (_, i) => str.slice(chunkIndex(i), chunkIndex(-~i))
  );
}