0xD34F

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 (source.hasOwnProperty(k) && 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);
}

потому что

function createList(data) {
  const list = document.createElement('ul');
  const stack = [];
  let [ ul, level ] = [ list, +/\d+/.exec(data[0]) ];

  for (const n of data) {
    const currLevel = +/\d+/.exec(n);
    if (currLevel > level) {
      stack.push([ ul, level ]);
      [ ul, level ] = [ document.createElement('ul'), currLevel ];
      stack[stack.length - 1][0].lastChild.append(ul);
    } else {
      for (; currLevel < level && stack.length; [ ul, level ] = stack.pop()) ;
    }

    ul.append(document.createElement('li'));
    ul.lastChild.textContent = n;
  }

  return list;
}

https://jsfiddle.net/trovkp31/

const xxx = (f, ...args) => f.apply(null, args);

xxx(console.log, 'aaa', 'bbb', 'ccc')
xxx(alert, 'hello, world!!')
xxx((...args) => args.reduce((p, c) => p * c, 1), 3, 4, 5)
xxx(xxx, Math.max, 6, 3, 8, 1, 2)

изучаю метод фильтр

Вам английский не помешало бы изучить сперва. А то в задании сказано, что rating должен быть

greater than or equal to 8.0

, а в вашем коде мы видим

rating > 8

Ещё сказано, что следует использовать

combination of filter and map

, а в вашем коде только filter.

watchList.filter(n => n.imdbRating >= 8).map(n => ({ title: n.Title, rating: n.imdbRating }))

.one path {
  fill: #909090;
}
.one.active path {
  fill: #f00;
}

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

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(itemSelector)) && t.classList.toggle(activeClass)
);

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.classList.toggle(activeClass));

https://jsfiddle.net/zw4k6vsu/