Кекстаграм: строки и переменные

Вернёмся к JavaScript и немного улучшим наш код. Посмотрите эти строчки:

var control = document.querySelector('button.toaster');
photo.classList.add('toaster');

Название фильтра toaster в коде повторяется два раза, Карл. Чтобы «переключить» фильтр, придётся поменять код в двух местах. А это лишняя работа!

Избавимся от дублирования. В начале кода создадим переменную с названием фильтра:

var filterName = 'toaster';

В метод поиска элементов мы передаём строку button.toaster. Чтобы получить такую же строку из переменной, воспользуемся операцией «склеивания» строк:

'button.' + filterName // результат: 'button.toaster'

В коде для поиска переключателя заменим строку на выражение с переменной:

Было:  var control = document.querySelector('button.toaster');
Стало: var control = document.querySelector('button.' + filterName);

Внутри photo.classList.add находится такое же значение, как и в переменной, поэтому просто заменяем строку на переменную:

Было:  photo.classList.add('toaster');
Стало: photo.classList.add(filterName);