I have a form where a user enters their address. This then checks their address against several destinations in the UK to see which city is their nearest.
I want each destination to have different prices, for example London, UK = 50, Birmingham, UK = 200 etc.
I have written a pretty rudimentary if statement which checks the city that is returned and calculates the price. However, I'm wondering if there is a neater solution to this as it feels a bit obtuse:
if(closestCities[0].cityName == "Coventry, UK") {
travelExpenses = 10;
} else if (closestCities[0].cityName == "London, UK"){
travelExpenses = 50;
} else if (closestCities[0].cityName == "Margate, UK"){
travelExpenses = 100;
} else if (closestCities[0].cityName == "Bristol, UK"){
travelExpenses = 20;
} else if (closestCities[0].cityName == "Tamworth, UK"){
travelExpenses = 15;
} else if (closestCities[0].cityName == "Birmingham, UK"){
travelExpenses = 200;
} else {
travelExpenses = 30;
}
Why don't you create an object:
let map = {
"Margate, UK": 100,
"Bristol, UK": 20 // etc.
}
It seems you also want a default value. I think in your case you could utilize the nullish coalescing operator:
The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand
travelExpenses = map[closestCities[0].cityName] ?? 30;
You could also define a dictionary for your expenses
let expenses = {
"Coventry, UK": 10,
"London, UK": 20,
...
}
let travelExpenses = expenses[closestCities[0].cityName] || 30;
If you have any city, with expenses 0, you have to do it as follows
let travelExpenses = expenses[closestCities[0].cityName];
if (travelExpenses === undefined) travelExpenses = 30;
You can try destructuring object along with switch statement to make it highly readable.
const { cityName } = closestCities[0]
switch (cityName) {
case "Coventry, UK": travelExpenses = 10;
break;
case "London, UK": travelExpenses = 20
break;
...
}