What’s your coding style? Imperative or Declarative?

First, to more simplicity, I want to describe them by an example:

Building a Bookshelf: Two Approaches:

Imperative Approach: Building from Scratch

You decide to cut wood panels into specific sizes, drill holes, and screw the panels together. You might adjust measurements or change the pieces as you go. You’re focused on each step, ensuring they come together to form a bookshelf. This hands-on, step-by-step process is similar to imperative programming, where you control each action explicitly.

Declarative Approach: Using a Pre-Packaged Kit

You open a box from IKEA and follow the instructions, “assemble the bookshelf.” The instructions guide you to “insert tab A into slot B,” without detailing every alignment or adjustment. You’re focused on the final outcome, following a set of high-level instructions to achieve it. This guided, goal-oriented process is similar to declarative programming, where you state what you want to achieve, and the specifics are handled for you.

So, let's say that Imperative programming focuses on directing each step, while declarative programming focuses on describing the desired outcome. Imperative gives explicit control, often involving mutable state, while declarative lets the system handle control, often avoiding state changes. Imperative can be straightforward but detailed, while declarative is more abstract but concise.

Now, just jump to show the differences between imperative and declarative programming approaches using JS. First Imperative Approach:

// Imperative programming example: Sum of an array
function imperativeSum(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}

const numbers = [1, 2, 3, 4, 5];
console.log(imperativeSum(numbers)); // Output: 15

• Direct Control: The programmer explicitly tells the computer to iterate through the array using a for loop.
• Step-by-Step: The logic explicitly adds each element to the sum variable.
• Mutable State: The variable sum is updated at each step.

Now I’m sure you are curious how is the Declarative?

// Declarative programming example: Sum of an array
const numbers = [1, 2, 3, 4, 5];
const declarativeSum = numbers.reduce((acc, current) => acc + current, 0);

console.log(declarativeSum); // Output: 15

Explanation:

• High-Level: The programmer declares what they want, using the reduce function to achieve the result.
• Abstracted Control: The control flow (iteration and addition) is abstracted away by the reduce method.
• Immutable: The process does not involve changing any explicit state.

Still, it’s not clear? right? …

so let’s review a more general example: User Authentication in a web application, which many developers deal with.

Imagine you have a web application where users can log in with a username and password. Your task is to implement the authentication logic.

Imperative Approach:

// Imperative programming example: User Authentication

function imperativeAuthenticateUser(username, password) {
    // Step 1: Retrieve the user's record from the database
    let user = database.getUserByUsername(username);

    // Step 2: Check if the user exists
    if (!user) {
        return "User not found";
    }

    // Step 3: Validate the password
    if (user.password !== password) {
        return "Invalid password";
    }

    // Step 4: Return a success message
    return "Authentication successful";
}

const result = imperativeAuthenticateUser("user1", "password123");
console.log(result); // Output: "Authentication successful"

Again consider steps, flow control, and variables as Mutable State

Declarative Approach:

// Declarative programming example: User Authentication

const userExists = username => Boolean(database.getUserByUsername(username));
const isValidPassword = (username, password) => database.getUserByUsername(username).password === password;

function declarativeAuthenticateUser(username, password) {
    return userExists(username) && isValidPassword(username, password) ? "Authentication successful" : "Authentication failed";
}

const result = declarativeAuthenticateUser("user1", "password123");
console.log(result); // Output: "Authentication successful"

let’s describe it with more details.

1. High-Level: The code expresses the desired outcome using logical expressions, without detailing the intermediate steps.
2. Abstracted Control: The control flow is handled by the logical operators and functions, not directly by the programmer.
3. Immutable: The process avoids explicit state management.

so as a result, we can now differentiate the two Mindset:

Focus:

• Imperative: The focus is on explicitly managing the process and handling each step.
• Declarative: The focus is on expressing the desired outcome through higher-level abstractions.

Control Flow:

• Imperative: The programmer handles the control flow explicitly, using conditionals and sequences.
• Declarative: The programmer relies on logical expressions and built-in functions.

State Management:

• Imperative: The programmer manages and changes state explicitly.
• Declarative: The state is often handled implicitly or not managed directly.

Imperative or Declarative? the way of thinking … the matter of WHAT or HOW

Imperative Thinking

When to Use:

• When precise control over the process is needed.
• When the steps of the process are clear and need direct management.
• When performance optimization requires detailed intervention.

How to Think:

• Break down the task into specific steps.
• Consider the sequence and conditions for each step.
• Manage state changes carefully.

Declarative Thinking

When to Use:

• When the outcome is clear, but the steps are complex or abstract.
• When working with higher-level frameworks or languages.
• When code simplicity and maintainability are priorities.

How to Think:

• Focus on the end goal or desired outcome.
• Use existing abstractions or functions to express the logic.
• Avoid unnecessary state changes or explicit control flow.

Functional Programming and Declarative Style

Declarative programming is one of the foundational concepts of functional programming, which focuses on using pure functions and avoiding side effects. In functional programming, you describe what you want to achieve with functions, and the system determines how to compute the result. This high-level approach aligns closely with declarative programming, where the focus is on expressing the desired outcome rather than the specific steps involved.

Pure Functions:

In functional programming, functions are often “pure,” meaning they have no side effects and the same inputs always yield the same outputs. This approach naturally aligns with the declarative style, as pure functions allow you to declare the desired result of a computation without concerning yourself with how intermediate states are managed.

Immutability:

Functional programming emphasizes immutability, where data structures do not change state after they are created. This immutability complements the declarative style, as it allows you to declare transformations and operations on data without worrying about unintended side effects from changing state. again it aligns with the declarative style!

Which Languages and Patterns?

Generally, the below languages are famous for Declarative or Imperative but it’s not 100%, as you may use frameworks which already designed by Declarative or Imperative. therefore just keep this example as simple usage:

Imperative Programming Languages:

• C: A classic example of an imperative language, where programmers explicitly control every step.
• Java: An object-oriented language that primarily follows the imperative paradigm.
• Python: Although capable of supporting multiple paradigms, it is often used imperatively.
• JavaScript: The default style of JavaScript is imperative, particularly when dealing with DOM manipulation.

Declarative Programming Languages/Pattern:

• SQL: A specialized language for querying databases, where you declare what data you want.
• HTML: A markup language for web pages, where you describe the structure.
• Prolog: A logic programming language that allows you to state what you want to prove.

As I’m JS fan so let’s review some frameworks in both the backend and frontend of it:

Imperative Frameworks:

• Express.js: A minimal and flexible Node.js framework that lets you handle HTTP requests and responses imperatively.
• jQuery: An older framework that manipulates the DOM using imperative instructions.
• Vanilla JavaScript: Using raw JavaScript to interact with the DOM is typically imperative.

Declarative Frameworks:

• Next.js: Primarily used for front-end development, Next.js also offers server-side rendering and API routes in a more declarative style.
• NestJS: A framework built on top of Express.js, providing a declarative, module-based architecture inspired by Angular.
• React: A popular framework where you declare the UI you want based on the state, and React handles updating the DOM.
• Vue.js: Similar to React, Vue allows you to declare the desired state of the UI, and it takes care of the updates.
• Angular: Though more complex, Angular allows developers to declare the structure and behavior of the UI through templates and component classes.