0xD34F

Дело в том, что getElementsByTagName возвращает динамическую коллекцию элементов, т.е. такую, которая автоматически обновляется при добавлении/удалении элементов. Поэтому сейчас у вас происходит следующее: удалили элемент с индексом 0, и у всех остальных элементов изменился индекс на единицу вниз, 0 вместо 1, 1 вместо 2 и т.д. При этом счётчик цикла вы на единицу увеличили, так что на следующей итерации удаляете элемент с индексом 1 - бывший 2. А тот, который был 1 и стал 0 - его вы пропускаете. А после следующего удаления пропускаете ещё один. Ну и т.д. Каждый второй.

Какие тут есть варианты действий:

• Замените document.getElementsByTagName("p") на document.querySelectorAll('p'), так вы получите статическую коллекцию элементов.
  
  
• Перебирайте содержимое allP от конца к началу:
  
  

  for (let i = allP.length; i--;) {
    body.removeChild(allP[i]);
  }

  
  
• Удаляйте элемент с нулевым индексом, пока есть что удалять:
  
  

  while (allP.length) {
    allP[0].remove();
  }

  
  
  

Ну и ещё кое-что. Обращаться к body по id - безумие, этот элемент существует в единственном экземпляре и ссылка на него доступна как свойство объекта document. Так что id уберите и замените document.getElementById("body") на document.body.

как улучшить мой код

Подобный код не улучшают, а переписывают.

function fearNotLetter(str) {
  const missing = Array
    .from(str, n => n.charCodeAt(0))
    .find((n, i, a) => n !== a[0] + i);

  return missing && String.fromCharCode(missing - 1);
}

или

function fearNotLetter(str) {
  for (let i = 0, code = str.charCodeAt(0); ++i < str.length;) {
    if (str.charCodeAt(i) !== ++code) {
      return String.fromCharCode(code);
    }
  }
}

https://jsfiddle.net/5wtopLka/

Добавьте collision: 'none' в position.

Делаем просто:

Array.prototype.unique = function() {
  this.splice(0, this.length, ...new Set(this));
  return this;
};

Делаем сложно:

Array.prototype.unique = function(key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set;

  this.forEach(n => (this[keys.size] = n, keys.add(getKey(n))));
  this.length = keys.size;

  return this;
};

[ 1, 1, 1, 2 ].unique() // [1, 2]
[ { id: 3 }, { id: 1 }, { id: 1 }, { id: 3 } ].unique('id') // [{id: 3}, {id: 1}]
[ 'a', 'b', 'c', 'd', 'ab', 'bc' ].unique(n => n.length) // ['a', 'ab']

То и означает - должна корректно обрабатывать слова без гласных.

Есть косяк. Как тут подсказывают, буква "y" считается гласной не всегда.

Ну и длинно как-то, можно же короче:

function translatePigLatin(str) {
  const x = str.search(/[aioue]/);
  return x > 0
    ? `${str.slice(x)}${str.slice(0, x)}ay`
    : `${str}${x ? '' : 'w'}ay`;
}

function myReplace(str, before, after) {
  const first = before.charAt();
  const toCase = first === first.toUpperCase() ? 'toUpperCase' : 'toLowerCase';

  return str
    .split(' ')
    .map(n => n !== before ? n : after.charAt()[toCase]() + after.slice(1))
    .join(' ');
}

Рекурсия есть:

const sumNested = (data, getVal, key) => Object
  .entries(data instanceof Object ? data : {})
  .reduce((acc, [ k, v ]) => acc + sumNested(v, getVal, k), getVal(key, data));


const numItems = sumNested(obj, (k, v) => (k === 'items' && Array.isArray(v)) ? v.length : 0);

Рекурсии нет:

function sumNested(data, getVal) {
  let result = 0;

  for (const stack = [ [ , data ] ]; stack.length;) {
    const [ k, v ] = stack.pop();
    stack.push(...(v instanceof Object ? Object.entries(v) : []));
    result += getVal(k, v);
  }

  return result;
}

final_data.reduce((acc1, num1) => acc1.reduce((acc2, num2) => acc2.concat(num1.map(num3 => [].concat(num2, num3))), []))

Вот это выглядит прям очень нехорошо - acc2.concat следует заменить на acc2.push, нет никакой необходимости в создании нового массива на каждом шаге (и, соответственно, копировании всех его элементов), можно добавлять новые элементы в существующий массив:

final_data.reduce((acc1, num1) => {
  return acc1.reduce((acc2, num2) => {
    acc2.push(...num1.map(num3 => [...num2, ...num3]));
    return acc2;
  }, [])
})

UPD. Да и промежуточные массивы, состоящие из элементов num2 и num3, тоже не нужны, можно сразу строки создавать:

return final_data.reduce((acc1, num1) =>
  acc1.reduce((acc2, num2) => (
    acc2.push(...num1.map(num3 => num2 + num3)),
    acc2
  ), [])
).join(',');

const whatIsInAName = (collection, source) =>
  collection.filter(function(n) {
    return this.every(([ k, v ]) => n[k] === v);
  }, Object.entries(source));

или

function whatIsInAName(collection, source) {
  const result = [];

COLLECT:
  for (const n of collection) {
    for (const k in source) {
      if (n[k] !== source[k]) {
        continue COLLECT;
      }
    }

    result.push(n);
  }

  return result;
}

Где элементы находятся, во что и по сколько надо оборачивать:

const parentSelector = '.wrap';
const wrapperTag = 'div';
const wrapperClass = 'wrap-item';
const wrapSize = 4;

Оборачиваем:

const $items = $(parentSelector).children();

for (let i = 0; i < $items.length; i += wrapSize) {
  $items.slice(i, i + wrapSize).wrapAll(`<${wrapperTag} class="${wrapperClass}">`);
}

или

const parent = document.querySelector(parentSelector);

parent.append(...Array.from(
  { length: Math.ceil(parent.children.length / wrapSize) },
  () => {
    const wrapper = document.createElement(wrapperTag);
    wrapper.classList.add(wrapperClass);
    wrapper.append(...Array.prototype.slice.call(parent.children, 0, wrapSize));
    return wrapper;
  }
));

Свойство navTitles:

navTitles: {
  days: 'MM',
},

https://jsfiddle.net/dkwL24f9/

const text = document.querySelector('#area').value;
const pre = document.querySelector('#pre');

pre.innerHTML = text.replace(/f+/g, '<span>$&</span>');

document.addEventListener('scroll', function() {
  document.querySelector('.wrap_portfolio').style.transform = `translateX(${window.scrollY}px)`;
});

Чей id хотим найти: const color = 'orange';.

Ищем:

const { id = null } = Object.values(fruits).find(n => n.color === color) || {};

// или

let id = null;
for (const k in fruits) {
  if (fruits.hasOwnProperty(k) && fruits[k].color === color) {
    id = fruits[k].id;
    break;
  }
}

UPD. Вынесено из комментариев:

А если у меня несколько оранжевых фруктов, как поступить?

Ну, доставайте всё, что есть.

Сразу достаём массив id для какого-то конкретного цвета:

const ids = Object.values(fruits).reduce((acc, n) => (
  n.color === color && acc.push(n.id),
  acc
), []);

Или, сначала группируем данные, а затем можно извлекать массивы id для различных цветов:

function group(data, key, val = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const getVal = val instanceof Function ? val : n => n[val];
  const result = {};

  for (const n of data) {
    const k = getKey(n);
    (result[k] = result[k] || []).push(getVal(n));
  }

  return result;
}

const idsByColor = group(Object.values(fruits), 'color', 'id');

const orangeIds = idsByColor.orange || [];
const greenIds = idsByColor.green || [];

https://jsfiddle.net/6924edvu/

Заменить id на data-атрибут: id="0" ---> data-index="0".
Нет необходимости каждый раз создавать картинку, можно перезаписывать src существующей.

Как добраться до картинки, откуда взять для неё src:

const imgSelector = '#main__display img';
const key = 'index';
const attr = `data-${key}`;
const buttonSelector = `[${attr}]`;

Как достать src, имея на руках элемент с индексом:

const getSrc = el => collect[
  $(el).data(key)
  // или
  $(el).attr(attr)
  // или
  el.dataset[key]
  // или
  el.getAttribute(attr)
  // или
  el.attributes[attr].value
];

Слушаем клики, достаём src, назначаем картинке:

$(buttonSelector).click(function(e) {
  $(imgSelector).attr('src', getSrc(this));
});

// или

$(document).on('click', buttonSelector, e => {
  $(imgSelector).prop('src', getSrc(e.currentTarget));
});

// или

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function(e) {
  this.setAttribute('src', getSrc(e.currentTarget));
}.bind(document.querySelector(imgSelector)));

// или

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    document.querySelector(imgSelector).src = getSrc(t);
  }
});

Очень просто:

const THICKNESS = {
  thinLine: 1,
  get midLine() {
    return this.thinLine * 2;
  },
  get boldLine() {
    return this.thinLine * 4;
  },
};

после 21 итерации выдает неправильное значение даты

Правильное. Что написали - то и получаете.

Вы пляшете от 11 числа, а в августе 31 день. 11 + 21 = 32, такого числа нет, так что месяц изменяется на сентябрь. Дальше 11 + 22, а дата-то после предыдущей итерации цикла сентябрьская. Так что получить вы пытаетесь 33 уже не августа, а сентября. Такой даты тоже не бывает, месяц меняется на октябрь. Ну и так далее - на каждой итерации прыгаете на месяц с лишним вперёд.

Как избавиться от лишнего перехода к следующему месяцу?

Первый вариант - устанавливать в качестве числа месяца не стартовое значение + счётчик цикла, а текущее + 1:

const startDate = new Date(2019, 7, 11);
const currentDate = new Date(startDate);

for (let i = 0; i <= 30; i++) {  
  currentDate.setDate(currentDate.getDate() + 1);
  console.log(currentDate);
}

Второй вариант - создавать на каждой итерации цикла новый объект даты вместо изменения уже существующего:

const startDate = new Date(2019, 7, 11);

for (let i = 0; i <= 30; i++) {  
  const currentDate = new Date(startDate);
  currentDate.setDate(startDate.getDate() + i);
  console.log(currentDate);
}

потому что