Skip to main content

Code Types

Imperative programming​

Describes computation as a set sequence of statements that change a program state. It is a description of how something is done.

An imperative programming style is one that gives a machine a set of detailed instructions to complete a task. For example, the for loop, which provides specific instructions for iterating over array indices.

You can draw an analogy with a recipe for cooking. A recipe is a set of step-by-step instructions for getting the desired result.

food recipe

Declarative programming​

Describes what you want as a result, not how to achieve it. The order of execution and the method of achievement are not important.

When you write HTML-code, you declaratively describe what you want to get as a result, using tags and attributes. The browser reads this code and performs all the necessary operations to create HTML elements and place them on the page.

You can draw an analogy with the restaurant menu. Such menu is a declarative set of meals that can be ordered; the details of their cooking and serving are hidden.

food menu

The declarative task description is visual and easier to formulate. You say what you want to do by calling a method or function. Its implementation most likely uses imperative code, but it is hidden inside and does not complicate the basic code.

Imperative vs declarative​

Let's consider the difference in approaches by the example of a basic operation, collection filtering. Let's write a code for iterating over and filtering an array of numbers according to some criterion.

// Imperative approach
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]

The filter() method hides the collection iteration logic and calls the callback function that you pass to it for each element, returning an array of elements that match the criterion.

// Declarative approach
const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(value => value > 3);
console.log(filteredNumbers); // [4, 5]