Императивный стиль и декларативный

Императивный стиль

Императивный стиль подразумевает (как), здесь мы описываем много деталей и нам важно (как) мы это сделаем.

Метафоры под Императивный стиль

Например я хочу доехать до магазина, (как) я это сделаю: Я должен выйти из дома, закрыть его, сесть в машину, завести, тронуться туда и туда, (после еще многих операций) я приехал.
Я опустил много деталей, но суть именно в том, что мы создаем инструкцию с подробными действиями.

Примеры кода императивный стиль

Императивный пример 1

Например при нажатии на кнопку, меняем на другой кнопке цвет, это реализация метода toggle из объекта 'classList'. Конечно в идеале так же описать бы подробно и методы add,contains,remove это было бы прям императивно так императивно, но для сути и это пойдет. Важно понимать, что в императивном стиле тоже можно автоматизировать отдельные задачи, что уже не будет так сильно отличаться от декларативного стиля. Как в этом примере:

// у нас четкие инструкции как это сделать.
btns[0].addEventListener('click', () => {
    if (!btns[2].classList.contains('red')) {  // если кнопка не имеет класса
      
        btns[2].classList.add('red');  // тогда мы этот класс вешаем
    } else {
        btns[2].classList.remove('red');  // иначе если класс есть, мы его удаляем
    }
});

Императивный пример 2

Или например обычное прибавление:

// Здесь у нас уже прям императивный стиль, без доп функций.
function addOn(arr) {
    let result = 0;
    for (let i = 0; i < arr.length; i++) {
        result += arr[i];
    }
    return result;
}

console.log(addOn([5, 5])); // 10

Что относится к императивному стилю

Императивные языки:

C,
C++,
Java.

Декларативный стиль

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

Метафоры под декларативный стиль

Тот же пример что был выше с декларативным стилем(что): Вызваем такси и едем до магазина.

Примеры кода декларативный стиль

Декларативный пример 1

Теперь меняем класс у кнопки с методом toggle:

// используем просто метод и не важно как он выполнит работу
// главное что в итоге будет.
 btns[0].addEventListener('click', () => {
    btns[2].classList.toggle('red');  
});

Декларативный пример 2

Так же реализуем прибавление всего в массиве в сумму.

function addOn(arr) {
    return arr.reduce((prev, current) => prev + current, 0)
}

console.log(addOn([5, 5])); // 10

Что относится к декларативному стилю

Декларативные языки:

SQL
HTML

Например язык разметки html это декларативный язык. Нам главное что получим, а не как. Не важно как тег h1 делает заголовок, важно, что мы получим этот загловок.

<body>
    <div>
        <h1> Всем пока </h1>
        <p> всем привет ребята </p>
    </div>
</body>

Языки использующие смешанные подходы

Есть такие языки которые в себе используют и то и то, как можно было догадаться выше, это javaScript, так же например python и C#.

Отредактировать эту страницу