The Problem
Hey there, folks! I've got a JS coding challenge for you:
Write a function called "getFruitColor" that has the following behavior:
- If given "apple", it returns "red"
- If given "banana", it returns "yellow"
- If given anything else, return undefined
What's the simplest JS thing you can use to make that function? Let's take a look!
Approach 1: Using an if
statement
When I was first learning about functions and logic, I heavily relied on the if
statement. It's super flexible and easy to read!
function getFruitColor(fruit) {
if (fruit === 'apple') {
return 'red'
} else if (fruit === 'banana') {
return 'yellow'
} else {
return undefined
}
}
Testing this code out, it works great!
getFruitColor('apple') // "red"
getFruitColor('banana') // "yellow"
getFruitColor('cherry') // undefined
There's nothing wrong with the code here, but can we do better?
Approach 2: Using a switch
statement
Whenever we are doing ===
repeatedly on the same value, maybe a switch
statement could help out with some of the repetition:
function getFruitColor(fruit) {
switch (fruit) {
case 'apple': return 'red'
case 'banana': return 'yellow'
default: return undefined
}
}
Amazing! Let's see if it still works:
getFruitColor('apple') // "red"
getFruitColor('banana') // "yellow"
getFruitColor('cherry') // undefined
Looks like the behavior here is the same, and we saved a lot of noisy code.
The most important thing? We made it easy for a reader to see the mapping of inputs to outputs.
But can we do even better?
But first: A tangent about undefined
!
If a function in JS doesn't return a value, it returns undefined
. This means we didn't need this else
case, or the default
case in the code.
Sidenote: I like typing the explicit else
and default
, because it tells the reader that I've thought through the edgecases, instead of just forgetting to handle them.
TLDR; These two are shorter versions of the first two approaches:
// without the else
function getFruitColor(fruit) {
if (fruit === 'apple') {
return 'red'
} else if (fruit === 'banana') {
return 'yellow'
}
}
// without the default
function getFruitColor(fruit) {
switch (fruit) {
case 'apple': return 'red'
case 'banana': return 'yellow'
}
}
Approach 3: Using an object
What's the simplest way to map one value to another? Use an object!
const getFruitColor = {
apple: 'red',
banana: 'yellow'
}
getFruitColor['apple'] // "red"
getFruitColor['banana'] // "yellow"
getFruitColor['cherry'] // undefined
We access objects with []
instead of ()
, but they have the same semantics as functions!
Extra Credit: Using Functions
We've seen this used above for returning values, but can it work with logic? Does it work with other things if
and switch
support like blocks of code?
You bet! Because JS lets you return functions as values, you can even route blocks of code this way!
With an if
statement
function handleCommand(command, args) {
if (command === 'greet') {
const name = args[0]
console.log('Hello ' + name + '!')
} else if (command === 'compliment') {
console.log('Looking good!')
} else {
console.log('Command not found')
}
}
With an object
function handleCommand(command, args) {
const handler = commands[command]
return handler
? handler(args)
: console.log('Command not found')
}
const commands = {
greet: (args) => {
const name = args[0]
console.log('Hello ' + name + '!')
},
compliment: (args) => {
console.log('Looking good!')
}
}
That's it!
Remember, choose the code you think is the easiest to read and change. I wanted to share the object technique because it blew my mind when I learned about it!
Maybe next time you're writing a switch case, you'll think of me 😄
Have an awesome day!
Top comments (2)
Thats great and simple technique! Thanks for sharing.
Thanks for the kind words, I'm glad you enjoyed the article 😊