re-write ifelse to switch - javascript

How would I go about re-writing this ifelse to a switch?
var d = document,
a = 'foo',
b = 'bar',
c = 'foobar';
if (d.URL.indexOf(a) != -1 || d.URL.indexOf(b) != -1)
{
// do this
}
elseif(d.URL.indexOf(c) != -1)
{
// do something else
}
it goes on for about 10 more ifelse which is why i'd prefer to change it to switch
I've searched for answers and found nothing so tried this:
function io(i)
{
d.URL.indexOf(i) != -1;
}
switch (io())
{
case a:
case b:
// do this
break;
case c:
// do this
break;
}
and a few variations of the same thing but I'm very much a JS novice and so knew I was probably wrong (which I was).

I think the best thing to do here would be to actually create an array of objects with their functions, then you would just cycle through that array using every. Here's some demonstration code using your above example:
var choices = [
{
value: foo,
fn: function () { // do this }
},
{
value: 'foobar',
fn: function () { // do something else }
}
];
choices.every( function( choice ) {
if ( document.URL.indexOf( choice.value ) !== -1 ) {
choice.fn();
return false;
} else return true;
});
If you have functions you know will be used multiple times, you just create them outside of the array and assign them to the fn key of multiple objects. By using return true when you don't encounter it, it'll keep moving through the array, then when it hits one where it's true, it'll return false and end the every function.

Related

Multiple If Else Statements, only first is run

I have code that requires multiple If Else statements but I'm not sure how to format it so that each runs:
let example = first;
let example2 = second;
let example3 = third;
if (example === something) {
return null;
} else {
return something;
}
if (example2 === somethingElse) {
return null;
} else {
return somethingElse;
}
if (example3 === somethingMore) {
return null;
} else {
return somethingMore;
}
But this doesn't work because of the multiple else statements, I was wondering if there was a way to do this? I also tried to put the data into an array or objects to iterate through but that won't work either.
Please help! :)
return will immediate return from first if, so store all result in object or array and return it as below
let example = 'first';
let example2 = 'second';
let example3 = 'third';
var return_data = {};
if (example === 'something') {
return_data.example = null;
} else {
return_data.example = something;
}
if (example2 === 'somethingElse') {
return_data.example2 = null;
} else {
return_data.example2 = 'somethingElse';
}
if (example3 === 'somethingMore') {
return_data.example3 = null;
} else {
return_data.example3 = 'somethingMore';
}
return return_data;
You have to remove the return in the if / else blocks - using return will immediately exit the function wherever it's encountered. The way your code is now, you are basically short-circuiting the function (which is not what you're trying to do):
It would probably make more sense to restructure your code to use a variable like this:
//Add a variable to keep store your desired output if you want to flow thru all if/else blocks
function getVal(example) {
let val;
if (example === 'something1') {
val = 'a'
} else {
val = 'b';
}
return val;
}
console.log(getVal('something1'));
console.log(getVal('lorem'));
I'm not completely clear on what you are asking, but I think you want to be using "else if" statements: https://ncoughlin.com/javascript-notes-conditional-statements-loops/#If_Else_If_Else
let example = first;
let example2 = second;
let example3 = third;
if (example === something) {
return a;
} else if (example2 === somethingElse){
return b;
} else if (example3 === anotherThing){
return c;
} else {
return null;
}
You can do something like this :
myArray = [];
let example = first;
let example2 = second;
let example3 = third;
if (example === something) {
myArray.push(null);
} else {
myArray.(something);
}
if (example2 === somethingElse) {
myArray.push(null);
} else {
myArray.(somethingElse);
}
if (example3 === somethingMore) {
myArray.push(null);
} else {
myArray.(somethingMore);
}
return myArray;
Like Tom O. said return will immediatly exit your function. You can use something other than an array but remember return is executed only once.
Regardless of your approach, it seems like you want to build a "collection" of some sort (array, object, set, map, etc) then return it at the end.
But, the way you code it depends on the reason your function exists. Let's look at an example...
if (first === undefined) {
return null
} else {
return first
}
...This logic exists solely to ensure a "default" value is used for first - something like the null object pattern. For this use case, I might propose nullish coalescing to keep it simple (or something that could be easily replaced with it in the future):
first ?? null
// or, if you don't use babel/some kind of transpiler, you could want:
first !== undefined && first !== null ? first : null
// and since our default is null anyway, we can shorten this to:
first !== undefined ? first : null
Looking solely at your example, it seems like you could simply want to get default values like this for multiple variables. For that use case, you (or someone else coming across this question) might want a function similar to one in the code snippets below. Using objects and/or arrays for this can be handy because they can also be easily broken back out into multiple variables, if you wanted.
First, example functions using arrays:
// If you want default values for items in an array (static, all same default value)
const buildArrayWithDefault = (vals, defaultVal = null) => vals.map(
v => v !== undefined ? v : defaultVal // could be v ?? defaultVal
)
// If you want default values for items in an array (static, but defaults could all be different)
const buildArrayWithDefaults = (vals, defaultVals) => vals.map(
(v, idx) => v !== undefined ? v : defaultVals[idx] // could be v ?? defaultVals[idx]
)
// If you want default values for items in an array (dynamic via callback)
const buildArrayWithDefaults2 = (vals, getDefaultValue) => vals.map(
(v, idx) => v !== undefined ? v : getDefaultValue(v, idx)
)
// All of these return [ 1, 5, 3 ]
console.log(
buildArrayWithDefault([1, undefined, 3], 5),
buildArrayWithDefaults([1, undefined, 3], [ 4, 5, 6 ]),
buildArrayWithDefaults2([1, undefined, 3], (v, idx) => idx + 4)
)
Next, examples using objects:
// Hard-coded default values for an object (ternary)
const buildObject = (first, second, third) => ({
first: first !== undefined ? first : null, // or first ?? null
second: second !== undefined ? second : null,
third: third !== undefined ? third : null,
})
// Hard-coded default values for an object (default parameters)
const buildObject2 = (
first = null,
second = null,
third = null
) => (
{ first, second, third }
)
// ...or you can just use Object.assign()
const assignDefaults = (obj) => Object.assign(
{ first: null, second: null, third: null }, // defaults
obj
)
// Finally, allowing the function user to define their own defaults
// (At this point, you may just want to use Object.assign() directly)
const assignDefaults2 = (...args) => Object.assign({}, ...args.reverse())
// All of these should return { first: 1, second: null, third: null }
console.log(
buildObject(1),
buildObject2(1),
assignDefaults({ first: 1 }),
assignDefaults2({ first: 1 }, { first: null, second: null, third: null })
)

Validating if object data is "true" and retrieving relevant data if so

I have a problem to solve using some data from an object. The data could take a few forms and may or may not exist in the first place. For example
things : {
oranges: true,
apples : false
}
but it could equally be:
things : {
oranges: false,
apples : false
}
or maybe things doesn't even exist
I need to:
1) Determine that things exists
2) Determine that things contains further keys
These two statements need to be verified in one callable function e.g thingsHasData()
3) If things does have data, is any of the data set to true?
This also needs to be a callable function e.g fruitsIsTrue()
4) Return the key for one of the true values
trueFruit() - this should only return one key, but it doesn't matter which (it shouldn't ever have two true values as per business rules but it's more of a fallback to just return one if for some reason it does)
So I've been able to get the key of a true key-value pair using the following:
var thingsList = {
things : {
oranges: false,
apples : true
}
}
var trueFruit = Object.keys(thingsList).filter(function(key) {
return thingsList[key];
});
return thingsList[0];
This correctly returns apples and only apples so it works for point 4 but not the others, and I feel like there is a better way to do this not having to rely on repeating the same .filter in a few different functions. Ideas?
You could take functions and for a true value, use Array#find.
function thingsHasData(object) {
return 'things' in object;
}
function fruitsIsTrue(object) {
return 'things' in object && Object.values(object.things).some(Boolean);
}
function trueFruit(object) {
return 'things' in object && Object.keys(object.things).find(k => object.things[k]);
}
var a = {},
b = { things: {} },
c = { things: { oranges: true, apples : false } },
d = { things: { oranges: false, apples : false } };
[a, b, c, d].forEach(o => console.log(
thingsHasData(o),
fruitsIsTrue(o),
trueFruit(o)
));
To check if the Object things exist, you can use the following code:
if (typeof things != "undefined") {
// It exists!
}
To check if an object has any children, check Object.keys(things).length > 0.
So the check for 1) and 2) would look like:
let things = {
oranges: true,
apples: false
}
if (typeof things != "undefined") {
// It exists!
if (Object.keys(things).length > 0) {
// It has children!
}
}
var thingsList = {
things : {
oranges: false,
apples : true
},
things2 : {
oranges: true,
apples : true
}
};
function validateThings(things) {
// (1) checks for a falsy value of things
if (!things) {
return false;
}
var keys = Object.keys(things);
// (2) checks if things has keys
if (!keys.length) {
return false;
}
// (3) then it checks for every single keys value if it is truthy
for (var i = 0, len = keys.length; i < len; i++ ) {
if (things[keys[i]]) {
// (4) return this value — all tests passed
return things[keys[i]];
}
}
return false;
}
console.log(validateThings(thingsList.notInList));
console.log(validateThings(thingsList.things));
console.log(validateThings(thingsList.things2));
const thingsHasData = arg => (arg.things && Object.keys(arg.things).length>0) ? true : false;
const trueFruit = arg => {
if (!arg.things) return;
let fruitIndex = null;
let fruitValues = Object.values(arg.things);
fruitValues.forEach((value, index) => {
if (value) fruitIndex = Object.keys(arg.things)[index];
});
return fruitIndex;
}

Dynamically adding cases to a switch

I need to dynamically add cases to a switch. I want the user to be able to add items and every item needs it's own switch case.
You can use object with callback functions instead:
// you can have initial casses
var callbacks = {
'something': [() => 42]
};
// and you can create new entry with this function
function add(_case, fn) {
callbacks[_case] = callbacks[_case] || [];
callbacks[_case].push(fn);
}
// this function work like switch(value)
// to make the name shorter you can name it `cond` (like in scheme)
function pseudoSwitch(value) {
if (callbacks[value]) {
callbacks[value].forEach(function(fn) {
fn();
});
}
}
and you can add new entry using:
add('something', function() {
// case for something
});
NOTE:
You can also modify this to work a little bit different than the original switch because you can have a function that returns a value and use a switch-like expression (like in Scheme where everything is an expression that returns a value):
const value = cond(42);
Writing this type of pseudoSwitch/cond function is left as an exercise to the reader.
NOTE 2:
By default objects in JavaScript use strings as keys and if you need to use something that can't be easily converted to a string, like objects (that will be converted to [Object object]) then you can use Map object that accepts anything as keys. Note that symbols work differently and they are not converted to a string when used as key in array.
This was the best/simpler solution for my needs:
const customSwitch = [
{
condition: 'case1',
fn() { /* Do stuff if case1 */ },
}, {
condition: 'canBeChangedAnytime',
fn() { /* Do stuff if case2 */ },
},
...adSomeCasesDynamycallyHere,
]
// edit a condition:
customSwitch[0].condition = 'changed';
// use the switch
for (const { condition, fn } of customSwitch) {
if (myValue === condition) {
fn();
break;
}
}
customSwitch, may have the form of an object, which may improve readability. Eg: customSwitch = { myCond: { condition, fn }}
You can click the above snippet to see it working ;)
const customSwitch = [ {
condition: 38,
fn: val => $("body").append(val === 38 ? 'UP' : 'RIGHT') + ' ',
}, {
condition: 40,
fn: val => $("body").append((val === 40 ? 'DOWN' : 'LEFT')+ ' ') ,
}]
$('#option1').click(function () {
customSwitch[0].condition = 38
customSwitch[1].condition = 40
});
$('#option2').click(function () {
customSwitch[0].condition = 39
customSwitch[1].condition = 37
});
$(window).keydown(function (e) {
for (const { condition, fn } of customSwitch) {
if (e.keyCode === condition) {
fn(e.keyCode);
break;
}
}
});
.btn {
cursor:pointer;
padding:5px;
border-radius:5px;
background-color:#3C0;
margin-top:5px;
width:150px;
text-align:center;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Press the four arrow keys:<br>
-if you click <b>option1</b> the switch will recognize UP and DOWN<br>
-if you click <b>option2</b> the switch will recognize LEFT and RIGHT<br>
<div id='option1' class='btn'>OPTION 1</div>
<div id='option2' class='btn'>OPTION 2</div>
<hr>
You can use Object for switch cases. One of the advantages of using Object instead of Array for the case is that it drastically reduces errors caused by wrong indexes in Array. Using Object for cases, you can also extract your case values into another script. This helps for Single Responsibility Principle by concerning you only implementing business logic inside switch cases instead of worrying about maintaining the right case values.
const OP = {
ADD: 'ADD',
MULTIPLY: 'MULTIPLY',
};
const choice = 'ADD';
switch (choice) {
case OP.ADD:
console.log('You chose add');
break;
case OP.MULTIPLY:
console.log('You chose multiply');
break;
default:
console.log('Operation is not defined');
}

Alternate structure for a sequence of If statements?

I'm programming a poker program in JavaScript. I have a Hand class that has the properties "cards", "value" and "valueCards". The value property is an integer that corresponds to a hand type, and the valueCards is the array of five cards that also corresponds to the hand type. For example, if my original seven cards(contained in the cards property) contains a flush, this.value will flip to 6, and this.valueCards will equal only the five cards that equal the highest flush.
I have one method for each hand type, and ALL of them change the value and valueCards if that hand type is detected. I have an accessor method for value called getValue, so when I went to make a method to run all the tests on a hand and keep the highest one, it came out looking like this:
POKER.Hand.prototype.getTrueValue = function () {
this.testStraightFlush();
if(this.value == POKER.HAND_TYPE.STRAIGHT_FLUSH){ return; }
this.testQuads();
if(this.value == POKER.HAND_TYPE.QUADS){ return; }
this.testFullHouse();
if(this.value == POKER.HAND_TYPE.FULL_HOUSE){ return; }
this.testFlush();
if(this.value == POKER.HAND_TYPE.FLUSH){ return; }
this.testStraight();
if(this.value == POKER.HAND_TYPE.STRAIGHT){ return; }
this.testTrips();
if(this.value == POKER.HAND_TYPE.TRIPS){ return; }
this.testTwoPair();
if(this.value == POKER.HAND_TYPE.TWO_PAIR){ return; }
this.testPair();
if(this.value == POKER.HAND_TYPE.PAIR){ return; }
this.getHighCards();
};
I mean, the method works fine. It just bothers me, like maybe I should be doing it a different way. Does this go against convention?
If you change your this.test* functions to return true if the "hand" is found, or return false if not - then you could do something as ugly, yet somehow satisfying, as
POKER.Hand.prototype.getTrueValue = function () {
this.testStraightFlush() ||
this.testQuads() ||
this.testFullHouse() ||
this.testFlush() ||
this.testStraight() ||
this.testTrips() ||
this.testTwoPair() ||
this.testPair() ||
this.getHighCards();
};
or
change your this.test* functions to check only if this.found is false, and set this.found = true if a hand is found, so you'd simply
POKER.Hand.prototype.getTrueValue = function () {
this.found = false;
this.testStraightFlush();
this.testQuads();
this.testFullHouse();
this.testFlush();
this.testStraight();
this.testTrips();
this.testTwoPair();
this.testPair();
this.getHighCards();
};
Not an answer but I would redesign your functions :
Each method should return the prop itself :
function testFlush ()
{
if (...) return POKER.HAND_TYPE.FLUSH;
return null;
}
function testStraightFlush()
{
if (...) return POKER.HAND_TYPE.StraightFlush;
return null;
}
This way , you'll be able to get both value and check for truness.
POKER.Hand.prototype.getValue= function ()
{
return this.testFlush () || testStraightFlush()
};
Just for the fun of it, you could redesign the tests like this:
POKER.Hand.prototype.getTrueValue = function () {
var tests = [
[ "testStraightFlush", POKER.HAND_TYPE.STRAIGHT_FLUSH ],
[ "testQuads" , POKER.HAND_TYPE.QUADS ],
[ "testFullHouse" , POKER.HAND_TYPE.FULL_HOUSE ],
... etc...
];
for (var test in tests) {
var fun = this[tests[test][0]];
var val = tests[test][1];
fun();
if (this.value == val) {
return;
}
}
this.getHighCards();
};
Or the functions might simply return a boolean, so you could have a simpler tests array
var tests = [
"testStraightFlush",
"testQuads" ,
"testFullHouse" ,
... etc...
];

How to accomplish this without using eval

Sorry for the title but I don't know how to explain it.
The function takes an URI, eg: /foo/bar/1293. The object will, in case it exists, be stored in an object looking like {foo: { bar: { 1293: 'content...' }}}. The function iterates through the directories in the URI and checks that the path isn't undefined and meanwhile builds up a string with the code that later on gets called using eval(). The string containing the code will look something like delete memory["foo"]["bar"]["1293"]
Is there any other way I can accomplish this? Maybe store the saved content in something other than
an ordinary object?
remove : function(uri) {
if(uri == '/') {
this.flush();
return true;
}
else {
var parts = trimSlashes(uri).split('/'),
memRef = memory,
found = true,
evalCode = 'delete memory';
parts.forEach(function(dir, i) {
if( memRef[dir] !== undefined ) {
memRef = memRef[dir];
evalCode += '["'+dir+'"]';
}
else {
found = false;
return false;
}
if(i == (parts.length - 1)) {
try {
eval( evalCode );
} catch(e) {
console.log(e);
found = false;
}
}
});
return found;
}
}
No need for eval here. Just drill down like you are and delete the property at the end:
parts.forEach(function(dir, i) {
if( memRef[dir] !== undefined ) {
if(i == (parts.length - 1)) {
// delete it on the last iteration
delete memRef[dir];
} else {
// drill down
memRef = memRef[dir];
}
} else {
found = false;
return false;
}
});
You just need a helper function which takes a Array and a object and does:
function delete_helper(obj, path) {
for(var i = 0, l=path.length-1; i<l; i++) {
obj = obj[path[i]];
}
delete obj[path.length-1];
}
and instead of building up a code string, append the names to a Array and then call this instead of the eval. This code assumes that the checks to whether the path exists have already been done as they would be in that usage.

Categories

Resources