Боря Федоров

Ключи свойств объекта это всегда строки. Но, поскольку объекты, по задумке разраба могут быть итерируемими, как в твоем примере - реализация javascript-a подрузамевает для них всякие финтиплюшки, в том числе и такую вот сортировку. Которая работает только для свойств с целочисленными ключами! Как движок, перебирая свойства поймет, что очередной ключ, по смыслу, представляет из себя целое число? Он конвертнет его в number, округлит, и преобразует обратно в string. Если процедура никак не изменила значение ключа, то это целое число, и алгоритм отрабатывает корректно.

String(Math.trunc(Number("7"))) // 7
String(Math.trunc(Number("07"))) // 7

Как видишь, после такой конвертации, исходная 07 превращается в 7, поэтому движок при сортировке такой ключ за целое число не сочтет и проигнорирует.

Подробнее здесь: https://learn.javascript.ru/object#tsikl-for-in

for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () { // Корень проблемы здесь.
    // Ты обьявляешь (не вызываешь!) в цикле анонимную функцию. При создании эта функция получает
    // ссылку на внешнее лексическое окружение, которым, в данном случае, является тело цикла for.
    // Когда функция вызывается, в своем лексическом окружении i она не находит, и продолжает поиск
    // во внешнем. К моменту вызова, цикл завершен, и i в его лексическом окружении равна thumbnails.length
    fullPhoto.src = photos[i];
  });
}