Array.prototype.filter() argument with arrow function callback? (no this binding)

Question

Inspired by this article, I've been refactoring some old code.

However, I'm running into problems with passing arguments using Array.prototype.filter since the second parameter of Array.prototype.filter(callback, thisArg) binds the this-object in the callback but arrow functions don’t bind this.

In my example, I’m getting the keys from an associative array (yeah I know, technically not available in JavaScript) by using Object.keys(), then filtering that array by a property of their object in the associative array this[item].property, but that fails since this binding isn’t available.

So, embracing arrow functions, how does one pass parameters to the callback in filter()?

const arr = {
    a: {
      property: true,
      otherProp: false
    },
    b: {
      property: true,
      otherProp: false
    },
  },
  hasProperty = item => this[item].property,
  getMatchingKeys = object => Object.keys(object).filter(hasProperty, object);
getMatchingKeys(arr);

Answer 1

You can use Object.entries. It provides both the key and the value, so that you don't need the reference to the object itself:

const arr = {
        a: {
            property: true,
            otherProp: false
        },
        b: {
            property: true,
            otherProp: false
        },
        c: {
            property: false, // to be excluded
            otherProp: true
        },
    },
    hasProperty = ([key, value]) => value.property,
    first = ([key]) => key,
    getMatchingKeys = object => Object.entries(object).filter(hasProperty).map(first);

console.log(getMatchingKeys(arr));

.as-console-wrapper { max-height: 100% !important; top: 0; }

You could also use bind -- not to bind this, but a first argument:

const arr = {
        a: {
            property: true,
            otherProp: false
        },
        b: {
            property: true,
            otherProp: false
        },
        c: {
            property: false, // to be excluded
            otherProp: true
        },
    },
    hasProperty = (object, key) => object[key].property,
    getMatchingKeys = object => Object.keys(object).filter(hasProperty.bind(null, arr));

console.log(getMatchingKeys(arr));

.as-console-wrapper { max-height: 100% !important; top: 0; }

See also some other options in my answer to another question.

Answer 2

The author of the article provided an answer in the comments, provided here for reference:

const arr = {
  a: {
    property: true,
    otherProp: false,
  },
  b: {
    property: true,
    otherProp: false,
  },
}
const hasProperty = object => item => object[item].property
const getMatchingKeys = object => Object.keys(object).filter(hasProperty(arr))
getMatchingKeys(arr) // = ['a', 'b']

Further reading, provided by @bergi in comments of original post (buried deep, posted here for greater visibility):

1. jQuery pass more parameters into callback
2. How do I pass an extra parameter to the callback function in Javascript .filter() method?