How to pass a function as an argument to a custom function in Javascript

Question

Not sure if this is possible, my editors highlighting doesn't seem to think so... I'm trying to run the same code over built in functions like previousSibling, nextSibling (I've had other scenarios where looping over different functions would be helpful). Even if there's a built in function I don't know that can remove spaces between nodes for me (please let me know if there is), I would like to know if taking a function as an argument and then calling it with another element to get a value is possible. The previousSibling and nextSibling are able to be called on "input" so why shouldn't this work?

spaces.js

window.addEventListener("load", function () {

function removeSpaces (element) {
  function movement (direction) {
    var loop = true;
    while (loop) {
      if (element.direction) {
        var temp = element.direction;
        if ((!temp.id) && (!temp.name) && (!temp.className) && (!temp.value) && (!temp.type) && (!temp.onclick) && (!temp.style)) {
          temp.parentNode.removeChild(temp);
        } else {
          element = temp;
        }
      } else {
        loop = false; // This should only execute if the loop has gotten to either end of the siblings.
      }   
    }
  }
  movement(previousSibling); //These two lines are the problem...
  movement(nextSibling);
}

var input = document.getElementById("input");
removeSpaces(input);

alert(input.nextSibling.id);

});

input.html

<html>
<head>
<script src="spaces.js"></script>
</head>
<body>
<div> Input: </div>
<div> <input id="previousNode"> <input id="input"> <input id="nextNode"> </div>
</body>
</html>

JavaScript functions are objects. You can pass them as parameters. — PM 77-1, Jun 05 '14 at 19:08
@PM77-1 Are you saying the title of my question is wrong or was the code not doing something correctly? — user3334776, Jun 05 '14 at 19:16
Neither. I just confirmed that functions can be passes as parameters. See [javascript pass function as parameter](http://stackoverflow.com/questions/13286233/javascript-pass-function-as-parameter.) — PM 77-1, Jun 05 '14 at 19:23
@PM77-1 Right, but that was a custom function, previousSibling is a built in function that only applies to DOM objects, but in this case I am trying to call it on a DOM object. — user3334776, Jun 05 '14 at 19:31

Bergi · Accepted Answer · 2014-06-05T19:40:40.740

0

previousSibling and nextSibling are no functions. You use them as plain variables, but they don't exist in your function's scope.

To pass functions, use

function removeSpaces (element) {
  function movement (direction) {
    var temp;
    while (temp = direction(element)) { // call a function
      …
    }
  }
  movement(function(el) { return el.previousSibling; }); // a function expression
  movement(function(el) { return el.nextSibling; });
}

However, since previousSibling and nextSibling are properties it would be easier in your case to pass property names, and use bracket notation to access them:

function removeSpaces (element) {
  function movement (direction) {
    var temp;
    while (temp = element[direction]) { // access a dynamic property
      …
    }
  }
  movement("previousSibling"); // a string
  movement("nextSibling");
}

_{Btw, your while-loops with that boolean loop variable were really scary. Either use while(true) { if(…) break; }, or just temp as the condition itself (as in my examples above)}

edited Jun 05 '14 at 19:40

answered Jun 05 '14 at 19:33

Bergi

630,263
148
957
1,375

Thank you, that really helps. Why is it scary to loop in that way? – user3334776 Jun 05 '14 at 19:42
Because it's overly complicated. And too easily a mistake slips in that leads to an infinite loop. – Bergi Jun 05 '14 at 19:45
Hey I hope you still get this message after all this time, but what if I want to pass a function to another function multiple times along with a different function as well as other arguments? I tried defining the function to be passed outside the outer function call so I could pass it multiple times, but it wasn't working, something like this: `function PASSED (el) {return el.previousSibling}` and then `movement(PASSED, string, bool); movement(func, string, bool); movement(PASSED, string, bool);` This time the function I'm trying to pass is a custom function I created, not a property. – user3334776 Sep 05 '14 at 19:34
Yes, that should work. However, without seeing the full code and the exact error message I can't help a lot; you should consider [asking a whole new question](http://stackoverflow.com/questions/ask). – Bergi Sep 06 '14 at 11:28
Off topic question, but what do you do when a function needs to refer to itself? Do you just write a duplicate function and pass them to each other? – user3334776 Sep 08 '14 at 17:24
Yes, off-topic in this thread - just [ask a new question](http://stackoverflow.com/questions/ask). Short answer: No need for a [Y combinator](https://en.wikipedia.org/wiki/Fixed-point_combinator#Y_combinator), JavaScript does support [recursive functions](https://en.wikipedia.org/wiki/Recursion_(computer_science)) out of the box. – Bergi Sep 08 '14 at 17:32

How to pass a function as an argument to a custom function in Javascript

1 Answers1