惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
雷峰网
雷峰网
Recent Announcements
Recent Announcements
月光博客
月光博客
G
Google Developers Blog
腾讯CDC
S
Secure Thoughts
大猫的无限游戏
大猫的无限游戏
T
Tenable Blog
云风的 BLOG
云风的 BLOG
W
WeLiveSecurity
博客园 - 【当耐特】
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
博客园 - 聂微东
The Cloudflare Blog
阮一峰的网络日志
阮一峰的网络日志
人人都是产品经理
人人都是产品经理
P
Privacy International News Feed
MyScale Blog
MyScale Blog
K
Kaspersky official blog
T
The Blog of Author Tim Ferriss
Attack and Defense Labs
Attack and Defense Labs
Spread Privacy
Spread Privacy
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
aimingoo的专栏
aimingoo的专栏
I
Intezer
Vercel News
Vercel News
小众软件
小众软件
Simon Willison's Weblog
Simon Willison's Weblog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
Netflix TechBlog - Medium
P
Proofpoint News Feed
Latest news
Latest news
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Tor Project blog
S
Security Affairs
P
Proofpoint News Feed
博客园 - 三生石上(FineUI控件)
博客园 - Franky
C
Cyber Attacks, Cyber Crime and Cyber Security
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
美团技术团队
Recent Commits to openclaw:main
Recent Commits to openclaw:main
S
Security @ Cisco Blogs
L
LINUX DO - 热门话题
Know Your Adversary
Know Your Adversary
Project Zero
Project Zero
D
Docker
L
Lohrmann on Cybersecurity
F
Full Disclosure

Chip Cullen

The need for importance, and AI: Chip Cullen An updated Colorosetta: Chip Cullen The Return of the Font Combinator!: Chip Cullen Changing the number of an item in an ordered list: Chip Cullen My pizza dough recipe as of May 2025: Chip Cullen Gonna try to be a bit more personal: Chip Cullen How I built dynamic social media images in Eleventy using Cloudinary: Chip Cullen My current approach to AI : Chip Cullen Lessons Learned Surviving a Major Product Launch: Chip Cullen How to Build a Drop Down Menu with Modern CSS: Chip Cullen How to stop page scrolling when you have an open dialog element: Chip Cullen Distraction Driven Development: Chip Cullen How I learned to code: the art of letting go: Chip Cullen Project stuck? Think about how you’re breaking it down & question everything: Chip Cullen So how did the onboarding experiment go?: Chip Cullen Ideas for an Onboarding Checklist: Chip Cullen I really like Post Mortems: Chip Cullen Raise Red Flags Early: Chip Cullen How to mock fetch requests in React Testing Librarty tests: Chip Cullen Running a Structured Meeting: Chip Cullen Adding the View Transitions API to my personal site: Chip Cullen A Lightweight Way to Read GraphQL Data: Chip Cullen How to make a color changing favicon: Chip Cullen Using a Pros/Cons list to help navigate technical discussions: Chip Cullen How to use variable fonts from Google Fonts: Chip Cullen A new website: now on Eleventy!: Chip Cullen How to Truncate Type at More Than One Line with Just CSS: Chip Cullen Colorosetta: the VS Code Extension!: Chip Cullen Using CSS Custom Properties and Logical Properties Together: Chip Cullen Browser Dev Tools: Element Inspector Popover: Chip Cullen The Link with rel=preload is a Seperate Thing: Chip Cullen How to have Dark & Light Mode Images that also works with User Choice: Chip Cullen Don’t use Viewport Units for Font Size on their own: Chip Cullen A little known Media Query: Aspect Ratio: Chip Cullen Meta thinking: Managing Decisions: Chip Cullen Give Your To-Do's Context: Chip Cullen Say What the Impact is when Reporting Issues: Chip Cullen Firefighting 101: How to Manage Breakages: Chip Cullen How to Deal With Large Pieces of Technical Debt: Chip Cullen Make Your Request Clear: Chip Cullen Analytics events, HTML classes, and protecting against refactoring: Chip Cullen How We Removed jQuery from a large app: Chip Cullen New tool: ColoRosetta: Chip Cullen What width and height attributes should you use with responsive images?: Chip Cullen Django 3.1 gotcha: Referrer Policy has a new default, and it might break iframes and links: Chip Cullen A Javascript Component Pattern: Chip Cullen CSS min(), max() and clamp() Functions: Chip Cullen Pointer Events and Inline Elements in Chrome: Chip Cullen Resolving a github repo and a new Create React App: Chip Cullen How to POST *Data* with the Fetch API: Chip Cullen The Contrast Triangle: Chip Cullen Advice on interviewing for Junior Developers: Chip Cullen Life Lessons Learned From Running a Marathon: How to do something really hard: Chip Cullen A (Brief) intro to Search Engine Structured Data: Chip Cullen Javascript Fallback Values on Variables and Booleans - a hard lesson: Chip Cullen Alfred Tip: Quickly Access Common URLs: Chip Cullen Responsive Images in Hugo - by Laura Kalbag: Chip Cullen Making a Gatsby Site with Multiple Content Types: Chip Cullen How to Create and Use Fixtures in Cypress Tests: Chip Cullen Fixing the 'Bad Interpreter' Error from AWS and Python 3.7: Chip Cullen Creating a Canonical Tag in a Django Template: Chip Cullen Responsive spacing with viewport and ch units: Chip Cullen Welcome to my New Design - 2019: Chip Cullen Django Templates: Block and If statements don’t work like you might expect: Chip Cullen Books I Read in 2018: Chip Cullen Lifehack: 4 ways to help tame common email noise: Chip Cullen How to make better Pull Requests: Adding Steps to Test: Chip Cullen The unsung develpment tool: Spreadsheets: Chip Cullen Troubleshooting Adding and Removing EventListeners: with Arguments, Debounced, and in a React Class: Chip Cullen How to Fake the Window Object in Jest and Enzyme: Chip Cullen Migrating From Wordpress to Hugo: Chip Cullen Background Repeat and its Possibilities: Chip Cullen Getting Started With Front End Tests: a Mindset: Chip Cullen Migrating a Blog - An Opportunity for a Content Inventory: Chip Cullen Moving to Hugo: Chip Cullen JavaScript events: .target vs .currentTarget: Chip Cullen Things I wish I knew when starting with Python: Chip Cullen Leading Ampersands for modifiers in Sass: An anti-pattern: Chip Cullen How to get rid of the "You have mail" message in your terminal: Chip Cullen Why three typefaces rule the web, and what you can do about it: Chip Cullen You shouldn't worry about Section 508 - it's Section 504: Chip Cullen Looping Video Backgrounds: pointers and pitfalls: Chip Cullen How to “preview” a click event tag in the Google Tag Manager console: Chip Cullen Moving on from a technology, or: life after Drupal: Chip Cullen Don’t be a dumb developer: Chip Cullen Two level breadcrumbs with CSS :only-child: Chip Cullen Simplicity comes with experience: Chip Cullen Do the least amount possible: Chip Cullen SVGs vs. Icon Fonts: Two points in favor of Icon Fonts: Chip Cullen Accessible links without underlines: Chip Cullen The Strategic Job Hunt: Chip Cullen Surviving Getting Laid Off: Chip Cullen How to structure your typography in Sass: Chip Cullen Layer Cake: A Responsive Design Layout Pattern: Chip Cullen Creativity is yet to come in Web Design: Chip Cullen Front End Testing with Wraith: A Step by Step Recipe: Chip Cullen Where to begin? How I start a visual design for the web: Chip Cullen If you could only have five Google Fonts: Chip Cullen Why SVG is so cool (or: what happens when you're late to the party on something): Chip Cullen How to apply classes to elements with CKEditor 4, in Drupal 7: Chip Cullen
In praise of the switch statement: Chip Cullen
2024-02-06 · via Chip Cullen

A tool that I find myself reaching for quite a bit is the switch statement. It's a great way to tackle complex logic in a straightforward way. In complicated situations, it helps me really focus in on what is actually changing.

I hardly see anyone else ever mention it, or give examples of it in blog posts. So here we go.

When to use a switch statement?

I think of it as useful anytime I would have an if statement followed by more than one alternative.

// this is fine to leave as an if statement
if (foo) {
} else {
}

// this should probably be a switch statement
if (foo) {
} else if (bar) {
} else {
}

switch syntax

It roughly goes like this:

switch (conditionState) {
  case conditionOne:
  // do stuff
  case conditionTwo:
  // do stuff
  default:
  // if all else fails, do stuff
}

Most often the conditionState is a boolean - true being easier to think about. So then each case needs to evaluate to true in order to be triggered.

switch (true) {
  case 1 + 1 === 2:
  // this will happen
  case 1 + 1 === 3:
  // this won't happen
}

default case

It's a good idea to define default behavior in the event none of your cases match. This happens when we 'fall through' the switch statement - default will end up firing.

switch (true) {
  case 1 + 1 === 3:
  // this won't happen
  case 1 + 1 === 4:
  // this won't happen
  default:
  // this will happen
}

Controlling flow

An important thing to understand is how to control the flow of the switch statement through the cases. By default - all cases will be evaluated in the entire statement.

switch (true) {
  case 1 + 1 === 2:
  // this will happen
  case 2 + 2 === 4:
  // this will *also* happen
  default:
  // this will happen *too*
}

If you don't want this to happen, you can insert a break in cases that you want the statement to stop being evaluated.

switch (true) {
  case 1 + 1 === 2:
    // this will happen, but then we break the statement
    break
  case 2 + 2 === 4:
  // this won't happen
  default:
  // this won't happen
}

If you are in a function and you are returning values, that will also break the statement.

switch (true) {
  case 1 + 1 === 2:
    // this will happen, but then we break the statement
    return someValue
    // not really needed since we're returning,
    // but eslint may complain if we don't have it
    break
  case 2 + 2 === 4:
  // this won't happen
  default:
  // this won't happen
  // a 'break' is not needed here
}

What goes in a switch statement?

In my opinion, what should change in each case should be the absolute minimum possible. This will result in the clearest possible code. Things like variable assignment are great. I avoid complex operations, and side effects, if at all possible. So, not this:

// not this
switch (true) {
  case someCondition:
    const foo = bar + 1
    someInvokedFunction(foo)
    break
  case someOtherCondition:
    const foo = bar + 2
    someInvokedFunction(foo)
    break
  default:
    const foo = bar + 3
    someInvokedFunction(foo)
}

But this:

// do this instead
let foo
switch (true) {
  case someCondition:
    foo = bar + 1
    break
  case someOtherCondition:
    foo = bar + 2
    break
  default:
    foo = bar + 3
}
someInvokedFunction(foo)

Multiple cases with the same result

One way to neaten up logic is to put cases with the same outcome together. So, not this:

// not this
let foo
switch (true) {
  case someCondition:
    foo = bar + 1
    break
  case someOtherCondition:
    foo = bar + 1
    break
  default:
    foo = bar + 2
}
someInvokedFunction(foo)

But rather:

// do this
let foo
switch (true) {
  case someCondition:
  case someOtherCondition:
    foo = bar + 1
    break
  default:
    foo = bar + 2
}
someInvokedFunction(foo)

Benefits of the swtich statement

What does this all get you?

  • A clear way to handle complicated logic with more than two possible outcomes. I recently had to write a swtich statement with 10 possible outcomes - 😱. The switch statement helped me wrangle all of those possible outcomes in a way that was possible reason about.
  • It's a rigid structure to articulate all possible cases. Just having to deal with that helps me think through edge cases.
  • It offers a clear guide for writing tests. It's very easy to look at all the possible cases and write unit tests that fall into each.
  • Frankly I find them easier to read - either as a maintainer later or even my own code months later.

I hope this tutorial gives you another tool in your toolbox to help you deal with complicated logic. Give the switch statement a try!