suberg

(true && false) - false, при логическом "и" вернется true, если оба операнда true
(true || false) - true, логическое "или" возвращает true, если хотя бы один операнд true
true && Boolean(0) - false, Boolean(0) вернет false, т.к. в качестве параметра передан 0.
!'String' || false - false, непустая строка при приведении к boolean равна true, !true === false

texts.find(item => item.id === product_id).text

Когда происходит клик, то i берется из внешнего LexicalEnvironment.
К моменту клика цикл завершился, последнее значение было i=2.
В результате значение всегда равно 2.
С переменной let не так.

Каждому повторению цикла соответствует своя независимая переменная let. Если внутри цикла есть вложенные объявления функций, то в замыкании каждой будет та переменная, которая была при соответствующей итерации.

Подробнее

Вот так работает:

Array.from(div.children).forEach(function (elem) {
  if (elem.tagName === 'IMG') {
    div.replaceChild(
      document.createTextNode(elem.getAttribute('alt')), elem);
  }
});

Нужно итерироваться по массиву

Ловить такие значения можно если это значение было в js установлено, то есть:

document.getElementById('label').style.display = "block";
console.log(document.getElementById('label').style.display); // block

Либо получить с помощью getComputedStyle