7 Patterns That Separate Senior Code from Junior Code (With TypeScript Examples)

#career #javascript #typescript #webdev

The Real Difference Between Junior and Senior Code

It's not the algorithms. It's not the frameworks.
It's the implicit knowledge about what goes wrong in production.

Here are the patterns senior developers apply without thinking -- and junior developers learn the hard way.

1. Defensive Data Access

// Junior: assumes data exists
const userName = user.profile.name.first

// Senior: handles the whole chain
const userName = user?.profile?.name?.first ?? 'Anonymous'

// Or for API responses:
const items = response?.data?.items ?? []
const total = response?.data?.pagination?.total ?? 0

2. Explicit Error States in UI

// Junior: handles loading and success
if (loading) return <Spinner />
return <DataTable data={data} />

// Senior: handles all states
if (loading) return <Spinner />
if (error) return <ErrorMessage error={error} retry={refetch} />
if (!data || data.length === 0) return <EmptyState />
return <DataTable data={data} />

// Empty state is the one everyone forgets until a user screenshots it

3. Database Transactions for Multi-Step Operations

// Junior: sequential without transaction
await db.order.create({ data: orderData })
await db.inventory.update({ where: { id: itemId }, data: { stock: { decrement: 1 } } })
await sendConfirmationEmail(user.email)
// If step 2 fails: order exists but inventory not decremented

// Senior: atomic
await db.$transaction(async (tx) => {
  const order = await tx.order.create({ data: orderData })
  await tx.inventory.update({ where: { id: itemId }, data: { stock: { decrement: 1 } } })
  return order
})
// Email after transaction -- side effects outside the atomic unit
await sendConfirmationEmail(user.email)

4. Idempotent Operations

// Junior: create blindly
await db.user.create({ data: { email, name } })
// If called twice: error or duplicate

// Senior: idempotent
await db.user.upsert({
  where: { email },
  create: { email, name },
  update: { name } // Or update: {} to skip if exists
})
// Safe to call multiple times

5. Structured Error Returns

// Junior: inconsistent errors
if (!user) throw new Error('User not found')
if (!authorized) return null
if (invalid) return { error: true }

// Senior: consistent, typed error handling
type Result<T> = { success: true; data: T } | { success: false; error: string; code: string }

function processRequest(userId: string): Result<Order> {
  if (!user) return { success: false, error: 'User not found', code: 'USER_NOT_FOUND' }
  if (!authorized) return { success: false, error: 'Forbidden', code: 'FORBIDDEN' }
  return { success: true, data: order }
}

// Caller handles all cases explicitly
const result = processRequest(userId)
if (!result.success) {
  logger.warn({ code: result.code }, result.error)
  return NextResponse.json({ error: result.error }, { status: 400 })
}

6. Constants Over Magic Values

// Junior: magic values everywhere
if (user.role === 'admin') { ... }
if (attempts > 3) { ... }
setTimeout(cleanup, 3600000)

// Senior: named constants
const ROLES = { ADMIN: 'admin', USER: 'user', MODERATOR: 'moderator' } as const
const MAX_LOGIN_ATTEMPTS = 3
const ONE_HOUR_MS = 60 * 60 * 1000

if (user.role === ROLES.ADMIN) { ... }
if (attempts > MAX_LOGIN_ATTEMPTS) { ... }
setTimeout(cleanup, ONE_HOUR_MS)

7. Logs That Help in Production

// Junior: console.log debugging
console.log('here')
console.log(data)
console.log('error:', error)

// Senior: structured, contextual logging
logger.info({ userId, orderId, amount }, 'Payment processing started')
logger.error({ err, userId, orderId }, 'Payment failed')
logger.warn({ userId, attempts }, 'Login attempt threshold approaching')

// These are searchable in production. 'console.log here' is not.

Ship Code With These Patterns Built In

The AI SaaS Starter Kit is written with all these patterns throughout --
transactions, structured errors, proper logging, defensive access.

$99 one-time at whoffagents.com

DEV Community