0xD34F

lat + x != 11

lon + y != 11

А 10, стало быть, является допустимым значением, да? И это значение вы используете в качестве индекса массива, чей размер - тоже 10. Толково придумано, ничего не скажешь.

const decodeMorse = code => code
  .trim()
  .split('   ')
  .map(n => n.split(' ').map(m => MORSE_CODE[m]).join(''))
  .join(' ');

или

const decodeMorse = code => code
  .trim()
  .replace(/\S+ ?/g, m => MORSE_CODE[m.trim()])
  .replace(/  /g, ' ');

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

const itemSelector = '.item';
const activeClass = 'active';
const maxActive = 3;
const onMaxActiveClick = () => alert(`больше ${maxActive} нельзя`);


// делегирование, назначаем обработчик клика один раз для всех элементов
document.addEventListener('click', function(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    const active = document.querySelectorAll(`${itemSelector}.${activeClass}`);
    if (active.length < maxActive || item.classList.contains(activeClass)) {
      item.classList.toggle(activeClass);
    } else {
      onMaxActiveClick();
    }
  }
});

// или, назначаем обработчик клика каждому элементу индивидуально
let activeCount = 0;

for (const n of document.querySelectorAll(itemSelector)) {
  n.addEventListener('click', onClick);
  activeCount += n.classList.contains(activeClass);
}

function onClick({ currentTarget: item }) {
  if (activeCount < maxActive || item.classList.contains(activeClass)) {
    activeCount += item.classList.toggle(activeClass) ? 1 : -1;
  } else {
    onMaxActiveClick();
  }
}

Кажется, кто-то не в курсе, что индексация массивов начинается с нуля.

Ну нет у вас ни в одном из массивов элемента с индексом 10, нет. Соответственно, когда lon принимает значение 10, map[lon] оказывается undefined, отсюда и ошибка.

Делегируйте обработку событий, и тогда не придётся беспокоиться о пропавших обработчиках. Как-то так.

const getCheckedValues = elements =>
  [...elements].reduce((acc, n) => (
    n.checked && (acc[n.name] = acc[n.name] || []).push(n.value),
    acc
  ), {});

Если пустые группы тоже должны присутствовать, то

const getCheckedValues = elements =>
  Array.prototype.reduce.call(
    elements,
    (acc, { name, value, checked }) => (
      acc[name] = acc[name] || [],
      checked && acc[name].push(value),
      acc
    ),
    {}
  );

const numbers = (string.match(/-?\d+(\.\d+)?/g) || []).map(Number);

[Symbol.iterator]() {
  let curr = this.head;

  return {
    next() {
      if (curr) {
        const item = curr;
        curr = curr.next;
        return {
          done: false,
          value: item,
        };
      } else {
        return {
          done: true,
        };
      }
    },
  };
},

Получается, что объявляем две переменных <...> То есть это равносильно

Не получается, не равносильно. Объявляется одна переменная. Вторая - выполняется лишь присваивание. И если - ВНИМАНИЕ - переменной с таким именем нет в текущей области видимости, будет выполнено присваивание переменной из внешней области видимости. Это, как нетрудно понять, отличный источник потенциальных багов (переменная, которую вроде бы никто не трогал, внезапно своё значение изменила). Ну а если такой переменной ни в одной из внешних областей видимости нет, будет создана глобальная переменная.

Короче, подобный код - безграмотный (а в строгом режиме, при отсутствии второй переменной в какой-либо из доступных областей видимости - и вовсе нерабочий, упадёт с ошибкой).

const obj = arr.reduce((max, n) => {
  const val = Object.values(n)[0];
  return val > max[1] ? [ n, val ] : max;
}, [ null, -Infinity ])[0];

Что не так делаю?

Ну, очевидно же - дёргаете сразу все блоки. А надо только тот, по которому кликнули. Для этого его надо как-то запомнить:

let uploadTo = null;

$('.file-upload-preview').click(function() {
  uploadTo = this;
  $('#file-upload').click();
});

Соответственно, внутри обработчика change заменяете $(".file-upload-preview") на $(uploadTo).

Перезаписывайте значение целиком - то есть, при клике на любой элемент надо обойти и все остальные, которые активны, и получить данные из них:

const inputSelector = '.hidden_field';
const itemSelector = '.item';
const activeClass = 'active';


// как это может выглядеть с использованием jquery
const $items = $(itemSelector).click(function() {
  $(this).toggleClass(activeClass);
  $(inputSelector).val($items
    .filter(`.${activeClass}`)
    .get()
    .map(n => $(n).text())
    .join(', ')
  );
});

// или, к чёрту jquery
const items = [...document.querySelectorAll(itemSelector)];
items.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.classList.toggle(activeClass);
  document.querySelector(inputSelector).value = items
    .filter(n => n.classList.contains(activeClass))
    .map(n => n.innerText)
    .join(', ');
}

const result = Object.entries(commonObj).map(([ k, v ]) => ({
  objDataName: (objectData.find(n => n.key === k) || {}).name || null,
  packageName: (packageData.find(n => n.id === v.package_id) || {}).title || null,
}));

или

const arrToObj = (arr, key, val) =>
  arr.reduce((acc, n) => (acc[n[key]] = n[val], acc), {});

const objects = arrToObj(objectData, 'key', 'name');
const packages = arrToObj(packageData, 'id', 'title');

const result = Object.entries(commonObj).map(n => ({
  objDataName: objects[n[0]] || null,
  packageName: packages[n[1].package_id] || null,
}));

for (let i = 0; i < 6; i++) {
  const count = res.data.filter(n => +n.categoryid === i).length;
  $(`#category_count_${i}`).html(`(${count})`);
}

Условие, которому должны удовлетворять объекты:

const checkItem = item => item.categoryid === '3';

Считаем:

const count = response.data.filter(checkItem).length;

// или

const count = response.data.reduce((acc, n) => acc + checkItem(n), 0);

// или

let count = 0;
for (const n of response.data) {
  count += checkItem(n);
}

// или

const count = eval(response.data.map(checkItem).join('+')) || 0;

document.addEventListener('click', e => {
  const link = e.target.closest('a');
  if (link) {
    e.preventDefault();
    link.style.display = 'none';
    setTimeout(() => window.location = link.href, 2000);
  }
});

Установка свойства checked не приводит к возникновению события change, так что его следует создавать самостоятельно - добавьте .trigger('change') после вызова prop.

Сделаем функцию, которая нарезает массив на куски указанного размера:

const getChunks = (arr, chunkSize) =>
  Array.from(
    { length: Math.ceil(arr.length / chunkSize) },
    (n, i) => arr.slice(i * chunkSize, (i + 1) * chunkSize)
  );

// или

const getChunks = (arr, chunkSize) =>
  arr.reduce((acc, n, i) => (
    i = i / chunkSize | 0,
    (acc[i] = acc[i] || []).push(n),
    acc
  ), []);

// или

const getChunks = (arr, chunkSize) =>
  arr.reduce((acc, n, i) => (
    (i % chunkSize) || acc.push([]),
    acc[acc.length - 1].push(n),
    acc
  ), []);

Ну и воспользуемся ею:

const arr = [...Array(50).keys()];
const chunks = getChunks(arr, 7);

Как получить элементы:

const links = document.querySelectorAll('a');
// или
const links = document.getElementsByTagName('a');

Как достать значение атрибута:

const getHref = el => el.getAttribute('href');
// или
const getHref = el => el.attributes.href.value;

Как собрать массив значений:

const hrefs = Array.from(links, getHref);

// или

const hrefs = Array.prototype.map.call(links, getHref);

// или

const hrefs = [];
for (const n of links) {
  hrefs.push(getHref(n));
}

// или

const hrefs = [];
for (let i = 0; i < links.length; i++) {
  hrefs[i] = getHref(links[i]);
}

// или

const hrefs = (function get(i) {
  return links[i] ? [ getHref(links[i]), ...get(i + 1) ] : [];
})(0);

Ведь у пустого массива есть численное представление: +[] вернет 0.

И что с того? В выражении false+[] нет преобразования массива в число. Есть сложение - массив преобразовывается в строку, false тоже. Если интересуют детали - можете ознакомится со спецификацией.