Setting ES6 default arguments to handle empty strings

Question

Below I have an object, key-value map.

const COLORS_BY_TYPE = {
  RED: 'red',
  BLUE: 'blue',
  GREEN: 'green',
};

const getCorrectColor = ({ colorType = 'GREEN' }) => COLORS_BY_TYPE[colorType.toUpperCase()];

I have something like the following above, it works fine when I call getCorrectColor when I don't pass the correct prop it relates to. When I pass an empty string, it doesn't work as I want. How would I modify the above so that if the prop is an empty string It would resort back to the default colour.

Could anyone provide a simple example of the type of functionality I am looking for?

COLORS_BY_TYPE[colorType.toUpperCase()] || COLORS_BY_TYPE[DEFAULT]; — epascarello
– epascarello, Commented Sep 6, 2018 at 17:42
@connexo user must enter colour which matches restricted values, if they don't match then default colour will be used — zeduke
– zeduke, Commented Sep 6, 2018 at 17:46

Bergi · Accepted Answer · 2018-09-06 17:31:04Z

2

I think you are looking for

function getCorrectColor({colorType = ''}) {
    const key = colorType.toUpperCase();
    return COLORS_BY_TYPE[key in COLORS_BY_TYPE ? key : 'GREEN'];
}

answered Sep 6, 2018 at 17:31

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryos · Accepted Answer · 2018-09-06 17:33:48Z

Default parameters only get applied when the value of the parameter they stand in for is undefined. Because of this, when you pass an empty string the default value does not get applied to the parameter. However, because empty string can be coerced to false in JavaScript, you can use an OR (||) in the function body to get what you want.

This code should solve your problem:

const COLORS_BY_TYPE = {
RED: '#ffffff'
BLUE: '#ffffff'
GREEN: '#ffffff'
}

const getCorrectColor = ({colorType = 'GREEN'}) =>
COLORS_BY_TYPE[(colorType || "GREEN").toUpperCase()];

Here we are wrapping the reading of colorType in a pair of parentheses and providing a second value for when it is a value that can be coerced to false—this new value is the string "GREEN". The parentheses ensure that this is executed first, and whatever value it gives is the value whose toUpperCase() method is called.

connexo · Accepted Answer · 2018-09-06 17:39:54Z

0

I don't know why you are using a destructuring assignment, but this works for me:

const COLORS_BY_TYPE = {
RED: '#ff0000',
BLUE: '#0000ff',
GREEN: '#00ff00'
}

const getCorrectColor = (colorType = 'GREEN') =>
COLORS_BY_TYPE[colorType.toUpperCase() in COLORS_BY_TYPE ? colorType.toUpperCase() : 'GREEN'];

console.log(getCorrectColor())
console.log(getCorrectColor(''))
console.log(getCorrectColor('red'))

answered Sep 6, 2018 at 17:39

connexo

57.3k15 gold badges112 silver badges150 bronze badges

Comments

chazsolo · Accepted Answer · 2018-09-06 17:49:46Z

0

Another possibility is Map. Obviously this requires you to change your setup (instead of using an object literal), but Map allows you to use an empty string as a key.

const COLORS_BY_TYPE = new Map()
COLORS_BY_TYPE.set('RED', '#f00')
COLORS_BY_TYPE.set('BLUE', '#00f')
COLORS_BY_TYPE.set('GREEN', '#0f0')
COLORS_BY_TYPE.set('', COLORS_BY_TYPE.get('GREEN'))

const getCorrectColor = ({
  colorType
}) => COLORS_BY_TYPE.get(colorType.toUpperCase())

console.log(getCorrectColor({
  colorType: 'GREEN'
}))
console.log(getCorrectColor({
  colorType: ''
}))

edited Sep 6, 2018 at 17:49

answered Sep 6, 2018 at 17:37

chazsolo

8,6541 gold badge25 silver badges45 bronze badges

Collectives™ on Stack Overflow

Setting ES6 default arguments to handle empty strings

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related