Cannot read property 'bind' of undefined when binding 2 functions

Question

I am trying to bind in a var into some functions so i can have access to it in an inner function.

function checkIfIsFilter(currentfilters, parentSearch) {
       for (var group of currentfilters) {
            if (_.find(group.filters, {"search": parentSearch})) {
               return group.parentSearch || group.name;
            }
       }
 };

function checkIfSubtopic(currentfilters, memo, value, key) {
   if (value.parentSearch) {
       value.subtopicOf = checkIfIsFilter(value.parentSearch).bind(null, currentfilters);
   }
   memo[key] = value
   return memo;

}

 console.log(_.reduce(currentfilters, checkIfSubtopic.bind(null, currentfilters), {}));

This seems to break the functions, specifically at the value.subtopicOf = part with the error message of Cannot read property 'bind' of undefined. I just want to bring currentfilters into the inner most function so i can reference it. This was working fine when I have it as a global variable ( can just just reference currentfilters directly inside of the checkIfIsFilter function), but I will not be able to have it like that in production.

I have a fiddle here I've been working in : https://jsfiddle.net/0fttkyey/79/

Unsure what I am doing correctly, would appreciate any input. Thanks for reading!

Is this question missing an AJAX, jquery or other library tag? — ebyrob
– ebyrob, Commented Jan 7, 2016 at 20:57

adeneo · Accepted Answer · 2016-01-07 20:54:06Z

Lets shorten that a bit

function checkIfIsFilter(currentfilters, parentSearch) {
    return group.parentSearch || group.name;
}

function checkIfSubtopic(currentfilters, memo, value, key) {
    value.subtopicOf = checkIfIsFilter(value.parentSearch).bind(null, currentfilters);
}

console.log(_.reduce(currentfilters, checkIfSubtopic.bind(null, currentfilters), {}));

Note that checkIfIsFilter doesn't return a function, and you're doing

checkIfIsFilter(value.parentSearch).bind();

You're calling checkIfIsFilter, which returns group.parentSearch (or name), and the return value is what you're trying to bind to?

Firstly, if you want to call the function with a this value and arguments, you can just use call, apply or in your case, just call it directly, as the this value doesn't seem to matter.

Secondly, it looks like you're trying to use a dynamic property name, which only works with bracket notation

function checkIfIsFilter(currentfilters, parentSearch) {
       for (var group of currentfilters) {
            if (_.find(group.filters, {"search": parentSearch})) {
               return group[parentSearch] || group.name;
            }
       }
 };

function checkIfSubtopic(currentfilters, memo, value, key) {
   if (value.parentSearch) {
       value.subtopicOf = checkIfIsFilter(value.parentSearch, currentfilters);
   }
   memo[key] = value
   return memo;

}

 console.log(_.reduce(currentfilters, checkIfSubtopic.bind(null, currentfilters), {}));

FIDDLE

DarthDerrr · Accepted Answer · 2016-01-07 21:01:40Z

0

Using bind doesn't seem to be needed here because the thisArg isn't really being used. Lodash provides a different function called partial to do exactly what you're trying to do though called partial.

I changed the last line of your code to this:

console.log(_.reduce(currentfilters, _.partial(checkIfSubtopic, currentfilters)));

Example here: https://jsfiddle.net/yqt8y0hb/

answered Jan 7, 2016 at 21:01

DarthDerrr

4913 silver badges9 bronze badges

1 Comment

DarthDerrr Over a year ago

I'd probably also follow adeneo's advice about your functions if I were you.

Collectives™ on Stack Overflow

Cannot read property 'bind' of undefined when binding 2 functions

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related