0xD34F

А почему строка? Могли бы и сами догадаться её в массив порезать:

const arr = str.split('-');
const end = 'final';

Использовать рекурсию не нужно, перебираем массив от конца к началу, на каждом шаге создаём объект с единственным свойством, в качестве ключа используется текущий элемент, значение - объект, полученный на предыдущем шаге:

const obj = arr.reduceRight((acc, n) => ({ [n]: acc }), end);

Но, конечно, если очень хочется, то рекурсия возможна:

const obj = (function createObj(arr, i, end) {
  return i < arr.length
    ? { [arr[i]]: createObj(arr, i + 1, end) }
    : end;
})(arr, 0, end);

const result = graphData.map((n, i) => ({ ...n, color: palette[i % palette.length] }));

или, в более общем виде:

const combine = (arr, keys, values) =>
  arr.map(({ ...n }, i) => (
    values.forEach((m, j) => n[keys[j]] = m[i % m.length]),
    n
  ));


const result = combine(graphData, [ 'color' ], [ palette ]);

const replacements = [
  [ 'вот это надо заменить', 'вот на это' ],
  [ 'а это заменить', 'на вот это' ],
];

$elements.html((i, html) => {
  return replacements.reduce((acc, n) => acc.replace(RegExp(n[0], 'g'), n[1]), html);
});

str.replace(/\.? /g, '-')

нет

Делегирование, назначаем обработчик клика один раз:

// при клике по кнопке определяем её индекс и хватаем .photos__like-count с таким же индексом
document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('photos__like-icon')) {
    const index = [...document.querySelectorAll('.photos__like-icon')].indexOf(t);
    const counter = document.querySelectorAll('.photos__like-count')[index];
    const count = counter.textContent;
    counter.textContent = t.classList.toggle('active') ? -~count : ~-count;
  }
});

// но если у каждой пары icon-count если отдельный общий предок, то можно и попроще сделать
document.addEventListener('click', ({ target: t }) => {
  if (t.matches('.photos__like-icon')) {
    t
      .closest('селектор общего предка кнопки и элемента с количеством')
      .querySelector('.photos__like-count')
      .textContent -= t.classList.toggle('active') ? -1 : 1;
  }
});

Назначаем обработчик клика каждой кнопке индивидуально:

const toggleLike = function({ target: t }) {
  this[t.dataset.index].innerText -= [ 1, -1 ][+t.classList.toggle('active')];
}.bind(document.querySelectorAll('.photos__like-count'));

document.querySelectorAll('.photos__like-icon').forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', toggleLike);
});

// или, при наличии отдельных общих предков у каждой пары .photos__like-icon и .photos__like-count
const toggleLike = ({ target: t }) => t
  .closest('селектор общего предка кнопки и элемента с количеством')
  .querySelector('.photos__like-count')
  .innerText -= t.classList.toggle('active') ? -1 : 1;

for (const n of document.querySelectorAll('.photos__like-icon')) {
  n.addEventListener('click', toggleLike);
}

const Menu = ({ items }) =>
  items instanceof Array && items.length
    ? <ul>
        {items.map(n => (
          <li key={n.id}>
            <a>{n.title}</a>
            <Menu items={n.children} />
          </li>
        ))}
      </ul>
    : null;

Слушать событие mousemove, в зависимости от event.movementX задавать transform: translateX. Например.

$keys = [ 'Название', 'Цена', 'Количество' ];
$newArr = array_map(fn($n) => array_combine($keys, $n), $arr);

Сделайте packet свойством, а не методом.

^.+ [а-яА-Я]+$

function setAnimation(el) {
  $(el).css('animation', `shadow-pulse ${1 + Math.random() * 3}s`);
}

$('.mr-2').on('animationend', function() {
  $(this).css('animation', '');
  setTimeout(setAnimation, 0, this);
}).get().forEach(setAnimation);

map.panTo(...).then(() => map.setZoom(...))

https://jsfiddle.net/q5ujt4Lh/

Или, замените panTo на setCenter - вторым параметром он принимает масштаб.

$('.search').on('input', function() {
  const search = $(this).val().trim().toLowerCase();

  $('.metro-line__item')
    .hide()
    .filter((i, n) => $('.metro__name', n).text().toLowerCase().includes(search))
    .show();

  $('.metro-line')
    .show()
    .not(':has(.metro-line__item:visible)')
    .hide();
});

или

.hidden {
  display: none;
}

document.querySelector('.search').addEventListener('input', e => {
  const search = e.target.value.trim().toLowerCase();

  document.querySelectorAll('.metro-line__item').forEach(n => {
    const name = n.querySelector('.metro__name').textContent.toLowerCase();
    n.classList.toggle('hidden', !name.includes(search));
  });

  document.querySelectorAll('.metro-line').forEach(n => {
    n.classList.toggle('hidden', !n.querySelector('.metro-line__item:not(.hidden)'));
  });
});

const className = 'класс, который не надо удалять';


// Если известно, что класс присутствует или должен быть добавлен в случае отсутствия:
element.className = className;

// Если известно, что класс отсутствует и не должен быть добавлен:
element.className = '';

// Если неизвестно, присутствует ли класс и в случае отсутствия он не должен быть добавлен:
element.className = element.classList.contains(className) ? className : '';
// или
element.classList.remove(...[...element.classList].filter(n => n !== className));

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

computed: {
  fullData() {
    return this.posts.map(post => ({
      post,
      user: this.users.find(user => user.id === post.userId) ?? {},
    }));
  },
},

<div v-for="n in fullData">
  <div>{{ n.post.title }}</div>
  <div>{{ n.user.name }}</div>
  <div>{{ n.post.body }}</div>
</div>

Сделайте вычисляемое свойство, которое в зависимости от состояния чекбокса будет представлять массив в дефолтном порядке или алфавитном:

<input type="checkbox" v-model="sort">
<div v-for="dog in sortedDogs">

data: () => ({
  sort: false,
}),
computed: {
  sortedDogs() {
    return this.sort
      ? [...this.allDogs].sort((a, b) => a.breeds[0].name.localeCompare(b.breeds[0].name))
      : this.allDogs;
  },
},

function createTree(arr, structure) {
  const tree = Object.fromEntries(arr.map(n => [ n.id, { ...n } ]));
  const nonRootIds = structure.flatMap(n => n.children);

  structure.forEach(n => tree[n.id].elements = n.children.map(m => tree[m]));

  return Object.values(tree).filter(n => !nonRootIds.includes(n.id));
}

Во-первых, потому что события вообще не срабатывают - никакие и никогда. Говорить "срабатывает событие" - безграмотно. Срабатывают обработчики событий. Во-вторых, значение вы меняете посредством клика по кнопке, а не вбиваете его в input. То есть, те события, которые вы ждёте - они не происходят, нечего обрабатывать.

Хотите следить за любыми изменениями значения - используйте v-model + watch:

<input v-model="text">

watch: {
  text(newVal, oldVal) {
    console.log(newVal, oldVal);
  },
},