We’ve been using these things incorrectly all along! Photo by Talles Alves ( ) https://unsplash.com/photos/HNiOq7eg8ck Very soon, I will reveal to you the untapped potential of “nested” ternaries in JavaScript. (The use of quotes around will also be explained). But first, let’s talk about ! nested pattern matching Pattern matching is found in many languages, including Scala and Haskell. It is used to identify patterns, and it offers us a clear, concise way to determine how our code will branch. programming Here’s an example of pattern matching in Scala from Bruce Tate’s excellent : Seven Languages in Seven Weeks def doChore(chore: String): String = chore match {case “clean dishes” => “scrub, dry”case “cook dinner” => “chop, sizzle”case _ => “whine, complain”} doChore(“clean dishes”) // -> "scrub, dry"doChore(“mow lawn”) // -> "whine, complain" Following the logic is simple. We just scan the list for the first match, and there we find the value to be returned. If we reach the end of the list and haven’t come across the case we’re looking for, there at the end we’ll find our return value, a catch-all for any case we didn’t account for. Here’s a look at pattern matching in Haskell to calculate factorials: factorial :: Integer -> Integerfactorial 0 = 1factorial x = x * factorial (x - 1) -- factorial 0 -> 1-- factorial 1 -> 1-- factorial 17 -> 355687428096000 And just for fun, a Fibonacci sequence in Prolog: fib(0, 1).fib(B, C) :- fib(A, B), C is A + B. % fib(0, X) -> X = 1.% fib(1, X) -> X = 1, X = 2.% fib(144, X) -> X = 233. We can’t use pattern matching as a control structure in , but if you squint, (from our Scala example) starts to look a bit like a Boolean test, and those we do have. Keep squinting, and this JavaScript code looks a bit like pattern matching: JavaScript case "clean dishes" let ; result (operator === ‘+’) {result = left + right;} (operator === ‘*’) {result = left * right;} (operator === ‘-’) {result = left - right;} {result = left / right;} if else if else if else But we can do better than this! Some problems with this code: We’re using even though we know is preferred. let const We’re changing the value of a variable that was declared outside of our block scope. We’re repeating ourselves by typing our assignment multiple times. result = Let’s see what we can do with a nested ternary instead, shall we? const =operator === ‘+’ ? left + right: operator === ‘*’ ? left * right: operator === ‘-’ ? left — right: left / right; result Hey, that’s not too bad! Let’s take a look back at what we said about pattern matching: Following the logic is simple. We just scan the list for the first match, and there we find the value to be returned. If we reach the end of the list and haven’t come across the case we’re looking for, there at the end we’ll find our return value, a catch-all for any case we didn’t account for. Looks like we’ve got ourselves a tool that functions a lot like pattern matching already available to us in JavaScript! It’s important to notice why we were able to do this — we formatted our “nested” ternary such that each line has a single condition and a single result, with the catch-all at the end. Because of this, we can read and write it as though it . Hence the quotes. 😉 There’s no need to worry about remembering each nested context. Once you’ve ruled out that a line would apply to the case you’re considering, you can safely forget it. isn’t nested at all It’s generally considered best-practice to avoid nested ternaries in JavaScript, but that’s because we usually write code that looks like this: var thing = foo ? bar : baz === qux ? quxx : foobar; If you think that looks confusing, that’s because it is! suggests that the solution is to write code like this: ESLint var thing; if (foo) { thing = bar;} else if (baz === qux) { thing = quxx;} else { thing = foobar;} But hopefully now you realize there’s a better alternative: var thing = foo ? bar : baz === qux ? quxx : foobar; You can follow me on Twitter @okaybenji
