1. Императивный код

Описывает процесс вычисления в виде заданной последовательности инструкций, изменяющих состояние программы. Описание того, как что-то выполняется.

Императивный стиль программирования - это такой, который дает машине набор детальных инструкций для выполнения задачи. Например цикл for, который предоставляет точные указания для итерации по индексам массива.

Можно провести аналогию с рецептом приготовления блюда. Рецепт - это набор пошаговых инструкций для получения желаемого результата.

2. Декларативный код

Описывает то, что мы хотим получить в результате, а не как это сделать. Порядок выполнения и способ достижения не важен.

Когда мы пишем HTML-код, то декларативно, при помощи тегов и атрибутов, описываем то, что хотим получить в результате. Браузер читает этот код и сам выполняет все необходимые операции по созданию HTML-элементов и помещению их на страницу.

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

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

3. Императивный vs декларативный

Рассмотрим разницу подходов на примере базовой операции фильтрации коллекции. Напишем код перебора и фильтрации массива чисел по какому-то критерию.

// Императивный подход
const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = [];

for (let i = 0; i < numbers.length; i += 1) {
  if (numbers[i] > 3) {
    filteredNumbers.push(numbers[i]);
  }
}

console.log(filteredNumbers); // [4, 5]

Array.prototype.filter() - это метод массива, который скрывает в себе логику перебора коллекции и вызывает callback-функцию, которую мы ему передаем для каждого элемента, возвращая массив элементов, подошедших под критерий.

// Декларативный подход
const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(value => {
  return value > 3;
});

console.log(filteredNumbers); // [4, 5]