Не могу понять, почему на первой картинке мы присваиваем i единицу а на второй картинке присваиваем 0 .Объясните пожалуйста. Всем большое спасибо

Больше похоже на рукожопие разработчика. И вообще он задавал expenses и optionalExpenses как объект, а работает с ним как с массивом (это можно делать в JS, но это нелогично как минимум), сам не понимает, что именно он нагoвнoкодил)
Условие typeof a === "string" && typeof a != null тоже шедеврально, как что-то может быть одновременно и string и null)
Там такая ситуация, что практически во всех языках все массивы, списки, обьекты и прочее начинают нумерацию с 0. То есть если у тебя Арбуз, Дыня, Кактус, то номер у Арбуза - 0, у Дыни - 1 и тд. И что бы в цикле перебрать все это дело начало указывают 0. Возьми нулевой элемент, что то сделай с ним, потом первый и так далее. А во втором случае, там не работа с масивом списком и тд, там просто что-то делается и поэтому проще начинать с 1, но это неправильно, настоящие программеры все считают с нуля))))
Это учебник или случайный распечатанный код? Чу-то много говнокода для учебника. Судя по остальным грубым ошибкам, на вопрос "почему" напрашивается ответ "тупо ошибся".
Возможно опечатка. Не очень понятно, или если ты про это, то -
i = 0; значит отсчёт начнётся с нуля,
i = 1; значит отсчёт начнётся с единицы