0xD34F

$('.openFormPopup').click(e => $('#btn-clicked').val(e.target.dataset.title));

[...document.querySelectorAll('li')].reduce((acc, n) => {
  return acc.then(() => {
    return new Promise(r => {
      setTimeout(() => r(console.log(n.textContent)), 1000);
    });
  });
}, Promise.resolve())

Здесь только регуляркой или как?

Конечно, использовать регулярные выражения не обязательно:

function incrementNumberInString(str) {
  for (let i = 0, iNum = -1; i < str.length; i++) {
    if ('0123456789'.includes(str[i])) {
      if (iNum === -1 && str[i - 1] === '[') {
        iNum = i;           
      }
    } else if (iNum !== -1 && str[i] === ']') {
      return str.slice(0, iNum) + (Number(str.slice(iNum, i)) + 1) + str.slice(i);
    } else {
      iNum = -1;
    }
  }

  return str;
}

Но с ними будет гораздо проще:

str.replace(/(?<=\[)\d+(?=\])/, m => ++m)
// или
str.replace(/\[\d+\]/, m => '[' + (m.slice(1, -1) - -1) + ']')
// или
str.replace(/\[(\d+)\]/, (m, g1) => `[${-~g1}]`)

Зачем искать какие-то совпадения внутри строк? Вырезаете нужный кусок и проверяете его наличие в массиве:

const getFreeDomainsCount = arr => arr
  .map(n => n.split('@')[1])
  .filter(n => freeEmailDomains.includes(n))
  .reduce((acc, n) => (++acc[n], acc), Object.fromEntries(freeEmailDomains.map(n => [ n, 0 ])));

const obj = arr.find(n => n.id === newObj.id);
if (obj) {
  Object.assign(obj, newObj);
} else {
  arr.push(newObj);
}

Ожидаю увидеть в консоли name is not defined

для подобных ожиданий оснований нет

Скрыть элементы через задание им нулевого размера:

.hidden {
  transform: scale(0);
}

Чтобы появлялись плавно, добавить transition:

.item {
  transition: transform 0.5s;
}

Когда надо элементы показать, снять класс:

document.querySelectorAll('.item').forEach(n => n.classList.remove('hidden'));

https://jsfiddle.net/dgo3jmsa/

Сгруппировать arr2 по значениям parent_id:

const groupedArr2 = arr2.reduce((acc, n) => {
  (acc[n.parent_id] = acc[n.parent_id] || []).push(n);
  return acc;
}, {});

Дальше можно обновить существующий arr1:

arr1.forEach(n => n.arr2 = groupedArr2[n.id] || []);

Или собрать новый:

const newArr1 = arr1.map(n => ({ ...n, arr2: groupedArr2[n.id] || [] }));

$('.modification').on('change', function() {
  const sum = $('[type="radio"]:checked', this)
    .siblings('.radio__text')
    .get()
    .reduce((acc, n) => acc + +$(n).text(), 0);

  $('p span').text(sum);
}).trigger('change');

или

const container = document.querySelector('.modification');

container.addEventListener('change', e => {
  const sum = Array.prototype.reduce.call(
    e.currentTarget.querySelectorAll('[type="radio"]:checked'),
    (acc, n) => acc + +n.closest('.radio').querySelector('.radio__text').innerText,
    0
  );

  document.querySelector('p span').innerText = sum;
});

container.dispatchEvent(new Event('change'));

class Point {
  x: number;
  y: number;

  // дальше всё по-старому, constructor и т.д.

Так как получать элемент вы собираетесь внутри обработчика события, возникающего на этом элементе, то ничего искать не надо, всё уже есть - event.target. Надо только (так как обработчик делегированный) убедиться, что событие случилось действительно на одном из интересующих вас элементов (раз это textarea, то, например, путём проверки свойства tagName у целевого элемента).

Метод val умеет принимать в качестве параметра не только значение, но и функцию, которая принимает текущее значение и должна вернуть новое:

$(this).parent().find('input').val((i, v) => v - 1);

А можно и отказаться от jquery. Так ещё короче получится (конечно, если все нужные элементы гарантированно есть, т.е., не надо проверять их наличие):

this.parentNode.querySelector('input').value--;

Есть такой плагин, например. Заставить работать совместно с react'ом - элементарно.

Или вот готовый реактовский компонент.

Наверное, элемент, к которому прицеплен обработчик события, полностью перекрывается вложенным элементом. А так как mouseleave не всплывает, обрабатывать нечего.

Цепляйте обработчики к вложенным элементам (конечно, придётся отказаться от их постоянного пересоздания).

Строки же, сравниваются посимвольно. Вычитайте их, будут при этом автоматически преобразованы в числа:

return a.width - b.width

А лучше бы конечно ещё и разобраться с источником данных и получать числовые значения в виде чисел, а не строк.

Не надо сравнивать каждый с каждым, считайте количество повторений:

function duplicateEncode(str) {
  const arr = [...str.toLowerCase()];
  const count = arr.reduce((acc, n) => (acc[n] = (acc[n] || 0) + 1, acc), {});

  return arr.map(n => count[n] > 1 ? ')' : '(').join('');
}

Или не считайте:

function duplicateEncode(str) {
  const arr = str.toLowerCase().split('');
  const duplicates = arr.reduce((acc, n) => (acc[n] = acc.hasOwnProperty(n), acc), {});

  return ''.concat(...arr.map(n => '()'[+duplicates[n]]));
}

const duplicateEncode = str => Object
  .values(Object
    .values(str.toLowerCase())
    .reduce((acc, n, i) => ((acc[n] = acc[n] || []).push(i), acc), {}))
  .reduce((acc, n) => (n.forEach(i => acc[i] = n.length > 1 ? ')' : '('), acc), [])
  .join``;

const duplicateEncode = str => Array
  .from(str.toLowerCase())
  .reduce((acc, n, i, a) => acc + (a.indexOf(n) === a.lastIndexOf(n) ? '(' : ')'), '');

const duplicateEncode = str => str
  .toLowerCase()
  .replace(/./g, (m, _, s) => String.fromCharCode(40 + (s.split(m).length > 2)));

const countUniqueChars = str =>
  new Set(str).size;

или

const countUniqueChars = str => [...str]
  .reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])
  .length;

или

const countUniqueChars = str => Array
  .from(str)
  .reduce((acc, n, i, a) => acc + (i === a.indexOf(n)), 0);

или

const countUniqueChars = str => Object
  .keys(Object.fromEntries([].map.call(str, n => [ n, 1 ])))
  .length;

или

const countUniqueChars = str => str
  .split('')
  .sort()
  .filter((n, i, a) => n !== a[i - 1])
  .length;

или

const countUniqueChars = str =>
  (str && str.match(/(.)(?!.*\1)/g)).length;

<div class="xxx">hello, world!!</div>
<div class="xxx">fuck the world</div>
<div class="xxx">fuck everything</div>

.xxx {
  padding: 10px;
  margin: 10px;
  border: 1px solid silver;
}

let el = null;

document.addEventListener('mousedown', e => el = e.target.closest('.xxx'));
document.addEventListener('mouseup', e => el = null);

document.addEventListener('mousemove', e => {
  if (el) {
    const height = parseInt(getComputedStyle(el).height);
    el.style.height = `${height + e.movementY}px`;
  }
});

https://jsfiddle.net/eu6s3b42/

Потому что объект с настройками

must be defined before the lazysizes script

const { id } = Object.values(CategoryProduct).flat().find(n => n.name === name) || {};