Developer Friendly Code

Practical Tips for readability 

21 May 2025

Adrian Fâciu

Principal Engineer

Developer Friendly Code

Good code?
🤔

Correct

Easy to read

const av: any = 
    (arr: any) => arr.reduce((a, b) => a + b);
let x = [1,2,3,4,5], 
  y = 0,
  z = x.map(function(a){y+=a;return y%2?y:a-a});
const getStatus = (user) => 
  user.isAdmin ? (user.isActive ? (user.age > 18 ? 
  'ADMIN_ACTIVE_ADULT' : 'ADMIN_ACTIVE_MINOR') 
                  : 'ADMIN_INACTIVE') : 
  user.isActive ? 'REGULAR_ACTIVE' : 'REGULAR_INACTIVE';
let total = 0;
const process = (arr: number[]) => {
  arr.forEach((n, i) => { 
    total += n; 
    if(i % 2 === 0) arr[i] = total; 
  });
  return arr.filter(x => x > 10);
};

Why is this important?

  • increases time to fix a bug

  • increases time to add a feature

  • increases time to onboard someone new

What to look for?

White space

function processUsers(users) {
  let results = [];
  for (let index = 0; index < users.length; index++) {
    let user = users[index];
    if (user.active) {
      let score = user.scores.reduce((a, b) => a + b, 0);
      results.push({ 
        id: user.id,
        name: user.name,
        score: score,
      });
    }
  }
  return results;
}
function processUsers(users) {
  let results = [];
  
  for (let index = 0; index < users.length; index++) {
    let user = users[index];    
    if (user.active) {
      let score = user.scores.reduce((a, b) => a + b, 0);
      results.push({ 
        id: user.id,
        name: user.name,
        score: score,
      });
    }
  }
 
  return results;
}

You don't get awards for one liners

 

function processUsers(users) {
  let results = [];
  
  for (let index = 0; index < users.length; index++) {
    let user = users[index];
    
    if (user.active) {
      let score = user.scores.reduce((a, b) => a + b, 0);
      results.push({ 
        id: user.id,
        name: user.name,
        score: score,
      });
    }
  }
 
  return results;
}
function processUsers(users) {
  let results = [];
  
  for (let index = 0; index < users.length; index++) {
    let user = users[index];
    
    if (user.active) {
      let score = 0;
      for (let value of user.scores) {
        score += value;
      }

      results.push({ 
        id: user.id,
        name: user.name,
        score: score,
      });
    }
  }
 
  return results;
}

Simplicity is about clarity

Naming

const av: any = 
    (arr: any) => arr.reduce((a, b) => a + b);
let x = [1,2,3,4,5], 
  y = 0,
  z = x.map(function(a){y+=a;return y%2?y:a-a});
  • use descriptive and purpose-driven names

  • avoid abbreviations and acronyms

  • make names pronounceable and easy to read

function a(b){const c=b.length;for(let d=0;d<c/2;d++)if(b[d]!==b[c-1-d])return"It is not a palindrome";return"It is a palindrome"}
const e=prompt("Enter a string: "),f=a(e);console.log(f);
function _(x){let y=x.length;for(let z=0x0;z<y/0b10;z++)if(x[z]!=x[y-1-z])return['\x49\x74','\x69\x73','\x6E\x6F\x74','\x61','\x70\x61\x6C\x69\x6E\x64\x72\x6F\x6D\x65'].join('\x20');return['\x49\x74','\x69\x73','\x61','\x70\x61\x6C\x69\x6E\x64\x72\x6F\x6D\x65'].join('\x20')}const s=prompt(['\x45\x6E\x74\x65\x72','\x61','\x73\x74\x72\x69\x6E\x67\x3A'].join('\x20 ')),r=_(s);console.log(r);

Comments

// Loop through the users array and 
// return only users where active is true
function getActiveUsers(users) {
  return users.filter(user => user.active);
}
// We only want to display users who are currently active, 
// so we filter out inactive users to improve user experience 
// and avoid confusion
function getActiveUsers(users) {
  return users.filter(user => user.active);
}

WHY

not

WHAT

Don't force me to read

if (user && 
    user.isAdmin && 
    user.canChangeSettings && 
    user.hasSettings) {
  // change some settings
  // ...
}
const canUserChangeSettings = user && 
    user.isAdmin && 
    user.canChangeSettings && 
    user.hasSettings;

if (canUserChangeSettings) {
  // change some settings
  // ...
}
const canUserChangeSettings = {...}
if (canUserChangeSettings) {
  // proceeed and change some settings
  // ...
}

Single responsibility

DRY & KISS

Avoiding the trap of unnecessary abstractions

Overengineering

OOP & Functional

Complexity

Cyclomatic complexity

function MyComponent({ a, b, c }) {
  // Cyclomatic Complexity starts at 1
  let result = '';

  // "if" adds 1 - Total: 2
  if (a) {
    result = 'A is true';
  }

  // Another "if" adds 1 - Total: 3
  if (b > 5) {
    result += ', B is greater than 5';
  }

  // Ternary operator also adds 1 - Total: 4
  result += c ? ', C is true' : ', C is false';

  // For loop adds 1 - Total: 5
  for (let i = 0; i < 2; i++) {
    result += '!';
  }

  // Logical AND (&&) adds 1 - Total: 6
  b && (result += ' (B exists)');

  return <div>{result}</div>;
}

Order files by:

  • cyclomatic complexity

  • change frequency

  • low test coverage

LLMs

and code complexity

function Counter() {
  const [count, setCount] = useState(0);
  const [double, setDouble] = useState(0);

  useEffect(() => {
    setDouble(count * 2);
  }, [count]);

  useEffect(() => {
    document.title = `Double: ${double}`;
  }, [double]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {double}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
function Counter() {
  const [count, setCount] = useState(0);
  const double = count * 2;

  useEffect(() => {
    document.title = `Double: ${double}`;
  }, [double]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {double}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

What can I do?

Check your code

Check other developers code

Automate where possible

Style guide

Grow yourself

Resources

Q & A

Developer friendly code

By Adrian Faciu

Developer friendly code

  • 72