Linear coding style

Gourav Goyal

Twitter · LinkedIn

Sep 15, 2023

Share

TwitterLinkedInCopy link

Below are the characteristics of a well written code:

1. Easy to understand by others.
2. Easy to recall by you.
3. Easy to refactor by you and others.

Linear coding style helps in that. When I refer to "linear code", I generally mean code that is written in a straightforward, top-down manner without nested structures, which can be more readable because it tends to follow a single, simple path of execution. Linear code simplifies debugging since developers can more easily predict the program’s behavior at each step. Going through the code step by step, it becomes straightforward to identify and isolate bugs. Remember that code is read much more often than it is written.

Linear vs non-linear code example in React

Let's explore this through an example where a component fetches and displays user data:

Non-linear code

• Uses nested ternary operators for conditional rendering.
• The code flow is harder to follow due to nesting and multiple conditions in one block.
• Adding more conditions would increase complexity and reduce readability.

import React, { useState, useEffect } from 'react';

// Non-linear approach
const UserProfileNonLinear = () => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUserData()
      .then(userData => {
        setUser(userData);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err);
        setIsLoading(false);
      });
  }, []);

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error}</p>
      ) : user ? (
        <div>
          <h1>{user.name}</h1>
          <p>Email: {user.email}</p>
          {user.isAdmin && <p>Admin User</p>}
        </div>
      ) : (
        <p>No user data available</p>
      )}
    </div>
  );
};

Linear code

• Uses early returns for different conditions.
• The code flows from top to bottom in a straightforward manner.
• The main render logic only appears after all conditions are checked.

import React, { useState, useEffect } from 'react';

// Linear approach
const UserProfileLinear = () => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUserData()
      .then(userData => {
        setUser(userData);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  if (!user) return <p>No user data available</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      {user.isAdmin && <p>Admin User</p>}
    </div>
  );
};

Linear vs non-linear code example in Javascript

Non-linear code

The code flow goes deeper into nested blocks before reaching the final result.

// Non-linear approach
function processUserNonLinear(user) {
  let result = null;

  if (user) {
    if (user.age >= 18) {
      if (user.isSubscribed) {
        result = `Welcome, ${user.name}! Enjoy premium content.`;
      } else {
        result = `Welcome, ${user.name}! Consider subscribing for premium content.`;
      }
    } else {
      result = "Sorry, you must be 18 or older.";
    }
  } else {
    result = "Invalid user data.";
  }

  return result;
}
// Usage
const user = { name: "Alice", age: 25, isSubscribed: true };
console.log(processUserNonLinear(user));

Linear code

• Uses early returns to handle edge cases first.
• The code flows from top to bottom without deep nesting.

// Linear approach
function processUserLinear(user) {
  if (!user) return "Invalid user data.";
  if (user.age < 18) return "Sorry, you must be 18 or older.";
  
  const baseMessage = `Welcome, ${user.name}!`;
  if (user.isSubscribed) return `${baseMessage} Enjoy premium content.`;
  return `${baseMessage} Consider subscribing for premium content.`;
}

// Usage
const user = { name: "Alice", age: 25, isSubscribed: true };
console.log(processUserLinear(user));

Benefits of the linear approach:

1. Readability: The code is easier to follow as it progresses linearly from top to bottom.
2. Maintainability: Adding or modifying conditions is simpler as each case is handled separately.
3. Reduced cognitive load: Developers can understand the function's behavior by reading it once from top to bottom.
4. Clearer logic: Edge cases are handled upfront, making the main logic more apparent.