JS function switch between either greater than or less than

Question

I have a function that is quite long and at the moment I need a duplicate of the function where the only difference is it asks greater than rather than less than. So the only difference is > or <.

Is there any (non messy) way to make this kind of function just one function instead of the two here?

function(value, modifier) {
 let result;
 if (value > modifier) result = 10;
 return result;
}

function(value, modifier) {
 let result;
 if (value < modifier) result = 10;
 return result;
}

So basically I need a conditional greater than/less than sign.

EDIT: To be clear, in an ideal world I'd like to do this:

myFunction(10, 5, >)

EDIT: Adding one part of my actual function to make things clearer. I was hoping there might be real simple way to do it but it seems like perhaps not so maybe part of the actual function might help things:

function getEdges(colour) {
    for (let x = 0; x < width; x++) {
        for (let y = height - 1; y >= 0; y--) {
            const data = getData(x,y);
            if (data[0] < colour) {
                edge.push(y);
                break;
            }
        }
    }
    return edge;
    }

And there is another almost identical function like this where the only difference is the line if (data[0] > colour) { is greater than rather than less than.

Answer 1

How about passing the condition function as a third parameter?

function getEdges(colour, condition) {
    for (let x = 0; x < width; x++) {
        for (let y = height - 1; y >= 0; y--) {
            const data = getData(x,y);
            if (condition(data[0], colour)) {
                edge.push(y);
                break;
            }
        }
    }
    return edge;
}

Call the function and pass required condition.

• for lesser than: getEdges(color, (data, color) => color < data);

• for greater than: getEdges(color, (data, color) => color > data);

Answer 2

If the only difference between the two functions is the comparison, then you can just extract that and make it a parameter

function getEdges(colour, comparator) {
  for (let x = 0; x < width; x++) {
    for (let y = height - 1; y >= 0; y--) {
      const data = getData();
      if (comparator(data[0], colour)) {
        edge.push(y);
        break;
      }
    }
  }
  return edge;
}

//call with less than
getEdges(someColour, (a, b) => a < b)
//call with greater than
getEdges(someColour, (a, b) => a > b)

You can also keep your logic in one function and derive two more from it. This way you don't need to maintain multiple code blocks and you still get two explicit calls:

Using partial application with .bind:

function getEdges(comparator, colour) {
//                    ^        ^      the two parameters are swapped
  for (let x = 0; x < width; x++) {
    for (let y = height - 1; y >= 0; y--) {
      const data = getData();
      if (comparator(data[0], colour)) {
        edge.push(y);
        break;
      }
    }
  }
  return edge;
}

//partial application
const getEdgesLessThan = getEdges.bind(null, (a, b) => a < b);
const getEdgesGreaterThan = getEdges.bind(null, (a, b) => a > b);

getEdgesLessThan(someColour)
getEdgesGreaterThan(someColour)

Using a curried function:

function getEdges(comparator) {
//                    ^---------
  return function(colour) {//  | taking two parameters
//                  ^ ----------
    for (let x = 0; x < width; x++) {
      for (let y = height - 1; y >= 0; y--) {
        const data = getData();
        if (comparator(data[0], colour)) {
          edge.push(y);
          break;
        }
      }
    }
    return edge;
  }
}

//currying
const getEdgesLessThan = getEdges((a, b) => a < b);
const getEdgesGreaterThan = getEdges((a, b) => a > b);

getEdgesLessThan(someColour)
getEdgesGreaterThan(someColour)

Answer 3

EDIT: To be clear, in an ideal world I'd like to do this:

myFunction(10, 5, >)

You can get something very similar:

const lt = (x, y) => x < y;
const gt = (x, y) => x > y;

function foo(value, modifier, compare) {
    let result;
    if (compare(value, modifier)) result = 10;
    return result;
}

console.log(foo(2, 3, lt)); // 10
console.log(foo(3, 2, gt)); // 10

Using your second example:

const lt = (x, y) => x < y;
const gt = (x, y) => x > y;

const width  = 3;
const height = 3;

const getData = (x, y) => [height * x + y];

console.log(getEdges(3, lt)); // [2]
console.log(getEdges(3, gt)); // [2,2]

function getEdges(colour, compare) {
    const edge = [];

    for (let x = 0; x < width; x++) {
        for (let y = height - 1; y >= 0; y--) {
            const data = getData(x, y);

            if (compare(data[0], colour)) {
                edge.push(y);
                break;
            }
        }
    }

    return edge;
}

Hope that helps.

Answer 4

Based on the conversation in the comments, the purpose is to re-use the getEdges function for when a greater than or lower than comparison is needed. I've added a second parameter to indicate this, with it set to false as the default case. The if statement is dual-purpose in the sense that it makes a greater than comparison when the isGreater flag is set to true and a less than comparison when the isGreater flag is set to false. The rest of the logic is re-used verbatim with no duplication.

function getEdgesInner(colour, isGreater = false) {
    for (let x = 0; x < width; x++) {
        for (let y = height - 1; y >= 0; y--) {
            const data = getData(x,y);
            if ((isGreater && data[0] > colour) || (!isGreater && data[0] < colour))
                edge.push(y);
                break;
            }
        }
    }
    return edge;
}

/* Public Api */
function getGreaterEdges(colour) { return getEdges(colour) }
function getLesserEdges(colour) { return getEdges(colour, true) }

Answer 5

You could keep the operator and just swap the terms according to your needs:

function getEdges(colour, operator) {
    for (let x = 0; x < width; x++) {
        for (let y = height - 1; y >= 0; y--) {
            const data = getData();
            const [a, b] = operator == '<' ? [data[0], colour] : [colour, data[0]];
            if (a < b) {
                edge.push(y);
                break;
            }
        }
    }
    return edge;
    }

---

EDIT:

Ok, so if you want keep things simple and in separated functions, with minimal code changes you could implement it like this:

function getEdges(colour, operator = '<') {
    for (let x = 0; x < width; x++) {
        for (let y = height - 1; y >= 0; y--) {
            const data = getData();
            const [a, b] = operator == '<' ? [data[0], colour] : [colour, data[0]];
            if (a < b) {
                edge.push(y);
                break;
            }
        }
    }
    return edge;
    }

The signature getEdges(colour, operator = '<') makes the operator parameter optional. If you don't pass it to the function, it'll assume a default value of '<' so that you won't to have to change anything in your existing code. Then, you could make a second function that will reuse the original one, just with a different parameter:

function getEdgesGreaterThan(colour) {
    return getEdges(colour, '>');
}

And there you have it! Hope it helps!

Answer 6

You can try these ways. just like you wanted in your original sample! With short, stylish and beauty ideas:

mathematical trick:

function func(value, modifier, sign) {
 let result, fc=sign=="<"?1:-1;
 if (value*fc< modifier*fc) result = 10;
 return result; 
}

A useful JS feature:

function func(value, modifier, sign) {//this is slower probably
 let result; 
 if (eval(value+sign+modifier)) result = 10;
 return result; 
}

Usage (both top ways):

console.log(func(1, 2, "<"));

Passing a delegate function (for compare):

function func(value, modifier, compF) {
 let result; 
 if (compF(value, modifier)) result = 10;
 return result; 
}

Usage :

console.log(func(1, 2, function(v, m){return v<m;}/*or equivalent lambda function*/));

Answer 7

You should add 3rd argument which takes the condition, for example, string "gt" for Grater Than(>) and "lt" for Less Than(<)

function(value, modifier, cond){
   if(cond === "gt") return value > modifier ? 10 : undefined;
   else if(cond === "lt") return value < modifier ? 10 : undefined; 
}

EDIT: I came up with a better solution, suitable for your updated question.

let check = (value, modifier, cond)=>eval(value + cond + modifier) ? 10 : undefined

here you pass "<" or ">" for cond parameter.

EDIT 2:

function getEdges(colour,cond) {
for (let x = 0; x < width; x++) {
    for (let y = height - 1; y >= 0; y--) {
        const data = getData(x,y);
        let shoudPush = eval(data[0] + cond + colour) ? true : false
        if(shouldPush) {
          edge.push(y); 
          break;
        }
    }
}
return edge;
}

Answer 8

function(value, modifier, type) {
    let result;
    if(type == ">") {
        if (value > modifier) result = 10;
    } else {
        if (value < modifier) result = 10;
    }
    return result;
}

and pass type as a string "<" or ">"

Answer 9

EDIT: To be clear, in an ideal world I'd like to do this:

myFunction(10, 5, >)

You can almost do that with using eval. Although I'm a little confused about your result since it potentially returns undefined.

var myFunction = function(value, modifier, operation) {
    var evalResult = eval(value + operation + modifier)
    // I like ternary expression but could also be written as an if/else statement 
    return evalResult ? 10 : undefined
}
myFunction(10, 5, '<') // outputs undefined
myFunction(10, 5, '>') // outputs 10

Just be aware that eval can be dangerous. https://medium.com/@eric_lum/the-dangerous-world-of-javascripts-eval-and-encoded-strings-96fd902af2bd

EDIT Hey I made a codepen in response to your edited answer. https://codepen.io/springborg/pen/ydayYa

I think this is what most closely matches your proposed syntax. Although I would probably advise against using eval unless you are absolutely certain no vulnerability will be exposed.

My recommendation is using Aditya Bhave answer :) https://stackoverflow.com/a/56649540/1303205

Answer 10

If reusability is your ultimate goal, here's a curried example of how one might do this (somewhat functional-programming-stylez).

This approach allows greater reuse of the code. You might want to compare things at two points in your code, and return different values according to context.

let functionalComparer = comp => modifier => result => value => {
  return comp(value, modifier) ? result: undefined
}

// curry the crap out of it!
let gt = (x,y) => x > y
let gtComp = functionalComparer(gt)
let gt100 = gtComp(100)
let whenGt100ReturnString = gt100("more than 100!")

console.log(`
  with value 99: ${whenGt100ReturnString(99)},
  with value 101: ${whenGt100ReturnString(101)}
`)

let lt = (x,y) => x < y
let whenLt50ReturnFoo = functionalComparer(lt)(50)("FOO")

console.log(`
  with value 49: ${whenLt50ReturnFoo(49)},
  with value 51: ${whenLt50ReturnFoo(51)}
`)