0xD34F

const merge = (key, ...arrs) =>
  Object.values(arrs.flat().reduce((acc, n) => (
    Object.assign(acc[n[key]] ??= {}, n),
    acc
  ), {}));


const result = merge('id', sum, arr1, arr2);

или

const merge = (key, ...arrs) =>
  Array.from(arrs.reduce((acc, arr) => arr.reduce((acc, n) => {
    const k = key(n);
    return acc.set(k, Object.assign(acc.get(k) ?? {}, n));
  }, acc), new Map).values());


const result = merge(n => n.id, sum, arr1, arr2);

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

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

Или это считается нормальной практикой?

Да, считается. У говнокодеров.

const result = arr.map(function(n) {
  return this[n];
}, Object.fromEntries(sum.map(n => [ n.id, n.name ])));

// или

const names = new Map(sum.map(n => [ n.id, n.name ]));
const result = arr.map(n => names.get(n));

// или

const result = arr.map(n => sum.find(m => m.id === n)?.name);

Но что если в массиве sum отсутствуют некоторые из нужных элементов, а получать undefined внутри массива с результатами не хочется?

Можно подставлять вместо отсутствующих элементов какое-нибудь дефолтное значение:

const result = arr.map(function(n) {
  return this[n] ?? 'объекта с таким id нет';
}, Object.fromEntries(sum.map(n => [ n.id, n.name ])));

Или есть вариант получать только то, что существует:

const names = new Map(sum.map(n => [ n.id, n.name ]));
const result = arr.reduce((acc, n) => (names.has(n) && acc.push(names.get(n)), acc), []);

Встречный вопрос - почему вы решили, что класс должен меняться? Может, всё-таки стоит почаще заглядывать в документацию, а?

app.ifScroll =

Меняйте эту чушь на ifScroll.value =.

document.querySelectorAll('.parent').forEach((n, i) => {
  n.insertAdjacentHTML('beforeend', `<div class="child">${arr[i]}</div>`);
});

или

for (const [ i, n ] of document.querySelectorAll('.parent').entries()) {
  n.append(document.createElement('div'));
  n.lastChild.className = 'child';
  n.lastChild.innerText = arr[i];
}

или

arr.forEach(function(n, i) {
  const div = document.createElement('div');
  div.classList.add('child');
  div.textContent = n;
  this[i].appendChild(div);
}, document.getElementsByClassName('parent'));

или

$('.parent').append(i => `<div class="child">${arr[i]}</div>`);

\.[a-z]+(-[a-z]+)*

const [ checked, setChecked ] = React.useState(false);

<input
  type="checkbox"
  checked={checked}
  onChange={e => setChecked(e.target.checked)}
  ...

<button
  disabled={!checked}
  ...

нет примера их использования

И не должно быть - всё более чем очевидно.

Конечно, для тех, кто о vue хоть что-то знает - например, что у vue есть документация. Тогда можно её открыть и прочитать там про ref:

<q-select
  ref="select"
  ...

<q-btn
  @click="$refs.select.showPopup()"
  ...

const createArr = length =>
  Array.from({ length }, (_, i) =>
    Array.from({ length }, (_, j) =>
      (i === j || i === length - j - 1) +
      ((i <= j && i <= length - j - 1) || (i >= j && i >= length - j - 1))
    )
  );

Собрать новый массив:

const newArr = arr.reduce((acc, n) => (
  acc.push({ ...n, fractionTotal: n.fraction + (acc.at(-1)?.fractionTotal ?? 0) }),
  acc
), []);

// или

const newArr = arr.map(function({ ...n }) {
  n.fractionTotal = this[0] += n.fraction;
  return n;
}, [ 0 ]);

Изменить существующий:

arr.forEach((n, i, a) => n.fractionTotal = n.fraction + (i && a[i - 1].fractionTotal));

// или

arr.reduce((acc, n) => n.fractionTotal = acc + n.fraction, 0);

chunk_size = 3
sums = [ sum(arr[i:i + chunk_size]) for i in range(0, len(arr), chunk_size) ]

const rows = 8;
const cols = 8;

document.body.innerHTML = Array
  .from({ length: rows }, (_, i) => Array
    .from({ length: cols }, (_, j) => (i ^ j) & 1)
    .join(''))
  .join('<br>');

Как сортировать по нескольким параметрам:

const sorted = (data, keys) => Array
  .from(data, n => [ n ].concat(keys(n)))
  .sort((a, b) => {
    let diff = 0;
    for (let i = 0; ++i < a.length && !(diff = ((a[i] < b[i]) ? -1 : +(a[i] > b[i])));) ;
    return diff;
  })
  .map(n => n[0]);

Как сортировать дочерние элементы:

const sortChildren = (el, keys) =>
  el.append(...sorted(el.children, keys));

Сортируем:

const ul = document.querySelector('ul');

ul.addEventListener('change', e => sortChildren(
  e.currentTarget,
  el => [
    -el.querySelector('input').checked,
    el.innerText.trim().toLowerCase(),
  ]
));

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

arr.filter(RegExp.prototype.test.bind(/^[рим]+$/i))

// или

arr.filter(n => !n.match(/[^рим]/i))

// или

arr.filter(n => !n.replace(/р|и|м/gi, ''))

// или

arr.filter(n => [...n.toLowerCase()].every(m => 'рим'.includes(m)))

const uniqueWithSum = (arr, idKey, sumKey) =>
  Object.values(arr.reduce((acc, n) => {
    const id = n[idKey];
    acc[id] ??= Object.assign(new n.constructor, n, { [sumKey]: 0 });
    acc[id][sumKey] += n[sumKey];
    return acc;
  }, {}));


const result = uniqueWithSum(data, 'brand', 'price');

kind[outs["name"]] = kind[outs["id"]]

Откуда в kind возьмутся id? Он же пустой. Может, должно было быть kind[outs["name"]] = outs["id"]?

Вместо заворачивания ul в transition следует завернуть li в transition-group:

<transition-group tag="ul" name="fade" class="buttons">
  <li
    v-if="какое здесь будет условие, предлагаю подумать самостоятельно"
    ...

const itemSelector = '.radio';
const activeClass = 'active';


// конечно, вы можете и дальше продолжать ковырять jquery
const $items = $(itemSelector).on('change', function() {
  $items.next().removeClass(activeClass);
  $(this).next().addClass(activeClass);
});

// но ведь есть и другой путь
const items = document.querySelectorAll(itemSelector);
const onChange = ({ currentTarget: t }) =>
  items.forEach(n => n.nextElementSibling.classList.toggle(activeClass, n === t));

items.forEach(n => n.addEventListener('change', onChange));

UPD. Наконец-то дождались, теперь использовать js тут необязательно:

.radio:has(:checked) + .order__form-input {
  /* сюда переносим стили, делающие input видимым */
}

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

Почему у элементов радиогрупп отдельные свойства checked? - активным же может быть только один. Пусть checked будет у самих радиогрупп и хранит не логическое значение, а индекс/id/value активного элемента.

Как исполнены сами радиокнопки (кстати, а почему не показали шаблон?)? Если input'ми, используйте v-model вместо того, чтобы вручную обновлять свои данные.