JavaScript/TypeScript Function Style

Function Declarations vs Arrow Functions

function

• Regular function definitions
• Top-level functions
• Named functions that need hoisting

• Array methods (

  .map()

  ,

  .filter()

  ,

  .reduce()

  )
• Inline callbacks
• React component props
• When you need lexical

  this

  binding

Examples

// ✅ Regular functions
function calculateTotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

function UserProfile({ userId }: Props) {
  return <div>{userId}</div>;
}

// ✅ Arrow functions in appropriate contexts
const numbers = [1, 2, 3].map(n => n * 2);

const handleClick = () => {
  console.log('clicked');
};

<Button onClick={() => handleSubmit()} />

Why This Pattern

• Consistency: Clear rule makes codebase predictable
• Readability: Function declarations are more explicit
• Flexibility: Arrow functions where they provide value (conciseness, lexical scope)

Progressive Improvement