uniquenicknqame

Это всегда будет тру: можно убрать проверку
if (this.checked) {
во вторых нажми F12 зайди в закладку сеть, скорее всего увидишь 404 по поводу подгрузки картинок ибо в дж-фидле я вижу как атрибут src правильно изменяется

этот "код" это одна сплошная ошибка со всех сторон.
Вот вам очень вкратце тоже говнокод, но не столь ужасный и рабочий:

var employees = [{
  firstName: 'Виталий',
  lastName: 'Ильин',
  birthDate: new Date(1992, 05, 28),
  position: 'Верстальщик',
  isIntern: true,
}, {
  firstName: 'Сократ',
  lastName: 'Константинов',
  birthDate: new Date(1965, 02, 14),
  position: 'JS-разработчик',
  isIntern: false,
}, {
  firstName: 'Галина',
  lastName: 'Наумова',
  birthDate: new Date(1990, 01, 18),
  position: 'Верстальщик',
  isIntern: false,
}, {
  firstName: 'Комаров',
  lastName: 'Павел',
  birthDate: new Date(1985, 07, 19),
  position: 'JS-разработчик',
  isIntern: false,
}, {
  firstName: 'Маргарита',
  lastName: 'Лазарева',
  birthDate: new Date(1993, 04, 23),
  position: 'JS-разработчик',
  isIntern: true,
}];

var html = '<table>';
html += '<tr><td>№</td><td>Фамилия Имя</td><td>Возраст</td><td>Должность</td><td>Стажировка</td></tr>';
employees.forEach(function(employee, idx) {
  html += '<tr><td>' + (idx + 1) + '</td><td>' + employees[idx].firstName + ' ' + employees[idx].lastName + '</td><td>' + employees[idx].birthDate.toLocaleDateString() + '</td><td>' + employees[idx].position + '</td><td>' + employees[idx].isIntern + '</td></tr>';
})

html += '</table>';
document.getElementById('result').innerHTML = html;

Да абсолютно правильно понимаете, но за такое нужно отбивать клешни.
Именно потому, что в реальной команде не все такие задофига умники, что бы понимать что же там произошло: был бы if($('.checkbox1').prop('checked') ) alert(z); вы бы не тратили лишнее время, не так ведь?
javascript.ru/boolean-operators там посмотрите "Сокращенные вычисления" (хоть и не очень внятно там и описано, но идея будет понятна)

Нет, полноценной матерой глобальной переменной ей не стать:

var a =1;
function fn(){
    b=11;
}
fn();

console.log(a);
console.log(b);

delete a;
delete b;

console.log(a);
console.log(b);

Как видите, вашу сиротку, удалось убить.
Почему так происходит -- это уровень синьор++ и, по большому счету, для реальной разработки нафиг не нужно.
Ну если, вдруг, внезапно(!!!!1) захочется заморочится: гуглите ECMA-262, процессы, которые происходят до выполнения кода, контекст исполнения, обьект контекста (this), обект переменных (VariableObject) и еще вагон сопутствующего "итд", тогда и за хойстинг станет понятно в подробностях и за приведение типов..
..но оно вам таки надо на свою голову?

используй RTFM?

у вас, таки, ошибки/вопросы в математике:
1. (A - B) / 100 100, в данном случае и есть N (100, а не 10)
2. Нужно указать что значит N=0 тоесть A == B?

вобщем случае формула (с условностями-допущениями) выглядит примерно так:
k = (Math.abs(A - B) < Number.EPSILON) ? 0 : (A-B) / N;

Почитайте вот тут:
https://learn.javascript.ru/external-script
если лениво всю статью, то хотя бы раздел "Асинхронные скрипты: defer/async"

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

Для мелких, домашних проектов может и подойдет и вебпак, но он просто очень уж много на себя берет и очень уж много делает "предположений как его оно сделать лучше ибо тупой фронтендер сам не знает".

Так что галп и ручное написание задач под него (памятуя о внезапной асинхронности, нодовских потоках итп, но с этим вы столкнетесь на нетривиальных проектах)

Ну во первых понимать код после транспайлера это адов ад.
Особенно если код чужой. И у каждого транспайлера код будет разный.

Но если все же вас заставили писать на ЕС6-ом под систему, которая нативно его не поддерживает, используйте source maps.

Я не знаю, как именно вы используете мерзкий Бабель, но у него есть опция для генереции соурс мапов.
Гляньте тут: https://babeljs.io/docs/usage/options/
(ну или в доках к кокретному сборщику в составе которого вы используете Бабель)
Кстати:
1. Браузеры зачастую дико глючат на соурс мапах (особенно если собиралось все сборщиком для противных, тоесть webpack-ом)
2. Бабель может далеко не все: https://kangax.github.io/compat-table/es6/

В современном фронтенде модульности нет.
AMD, RequireJS, CommonJS, ES6 (он же ES2015), TypeScript итд: зело употребляют это слово, но в конечном итоге все сводится к Java-подобной системе импортов.
Хотите убедится?
--Создайте папку и с помощью npm установите туда что-то простое, но посложнее хэлло-ворда; теперь загляните в папку node_modules -- кто все эти люди?? Казалось бы простую вещь ставил, а в результате 10-ки мб кода на борту..

Компонентов тоже нет.
Angular, React -- обманывают. Особенно ангулар.
Компонент предполагает переносимость.
Попробуйте перенести что-либо более менее весомое с одного ангулар проекта на другой; я уж молчу про перенос на не ангулар проект.

В итоге пришлось писать свою систему с четким управлением зависимостями, композишн рутом итд итд.

Вобщем, если интересно, посмотрите в сторону серьезных "экосистем", таких как Java и/или C#.
Поищите по ключевым словам: dependency injection, IoC (-container), composition root итд
А на фронтенде это все даже не в зачаточном состоянии.

На Питоне нужно, даже очень.
А в серьезных коммандах есть очень четкое разделение ролей: каждый занят своим и делает это наилучшим образом.