So my company is moving to this hyper functional programming forbidding if/else and nested ternary. The function is this:
const getUrlData = (url) => {
if (!url) {
return { finUrl: url, newTab: false };
} else {
if (url.startsWith("~")) {
return { finUrl: url.substring(1), newTab: true };
} else {
return { finUrl: url, newTab: false };
}
}
};
How could I do this same without if's/elses
and nested ternary so the code doesn't look like #@$%@@? For now it's a puzzle for me, I can't solve.
First, lets simplify the code by inverting the if and realising that 2 of the paths through return the same response:
const getUrlData = (url) => {
if (url && url.startsWith("~")) {
return { finUrl: url.substring(1), newTab: true };
}
return { finUrl: url, newTab: false };
};
It's now obvious how to use just a single ternary expression:
const getUrlData = (url) => (url && url.startsWith("~"))
? { finUrl: url.substring(1), newTab: true }
: { finUrl: url, newTab: false };
Using optional chaining you can rid of any condition, but you will have to transpile it somewhere to get browser support.
const getUrlData = (url) => ({
finUrl: url?.replace(/^~/, ''),
newTab: !!url?.startsWith("~")
})
Transpiles to:
const getUrlData = (url) => ({ finUrl: url === null || url === void 0? void 0: url.replace(/^~/, ''), newTab: ?:(url === null || url === void 0. void 0; url.startsWith("~")) }). console.log(getUrlData(undefined)) console.log(getUrlData('foo')) console.log(getUrlData('~bar'))
You could do something like this, splitting the function into smaller ones:
const emptyUrl = (url) => ({ finUrl: url, newTab: false })
const nonEmptyUrl = url => url.startsWith('~') ? { finUrl: url.substring(1), newTab: true } : {
finUrl: url,
newTab: false
}
const getUrlData = (url) => url ? nonEmptyUrl(url) : emptyUrl(url)
Here is the solution for it:
const getUrlData = (url) => {
let condition = url && url.startsWith("~") ? true : false;
return { finUrl: condition ? url.substring(1) : url, newTab: condition }
};
You can do it with a single conditional operator (and you can use ?.
to make it slightly shorter.)
const getUrlData = (url) => {
return (url && url.startsWith("~")) // or just `url?.startsWith("~")`
? { finUrl: url.substring(1), newTab: true }
: { finUrl: url, newTab: false };
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.