Javascript Array.prototype.map function with instance methods

Question

I was wondering if it was possible to pass an instance method into the Array.prototype.map function.

for example, I basically want this functionality without having to make a separate function

function Node(n) {
  this.val = n;
}
Node.prototype.isBig = function() {
  return this.val > 5;
}

var myArray = [
  new Node(1), new Node(2), new Node(3),
  new Node(7), new Node(8), new Node(9)
];

console.log(myArray);

var result = myArray.map(function(node) {
  return node.isBig();
});

console.log(result);

in java I would be able to do .map(Node::isBig). Can I do something to change the map parameter so that I don't have to create a function?

I am also open to solutions with lodash if you cannot do it with vanilla js.

As you can see from Oriol's answer, it can be done, but it's almost as verbose as the anonymous function, and IMHO it's not as clear. — Barmar
– Barmar, Commented Mar 25, 2016 at 22:08

Oriol · Accepted Answer · 2016-03-25 22:40:03Z

4

I don't think you can do it strictly without creating new functions, but you can avoid function expressions and declarations by binding existing functions to some value.

For example, you can use Function.prototype.call to call Node.prototype.isBig with the appropriate this value.

var result = myArray.map(Function.prototype.call.bind(Node.prototype.isBig));

There is also a proposal of a bind operator, which I think it would allow

var result = myArray.map(::Node.prototype.isBig.call);

Note additional arguments (index and array) will be passed to the isBig method.

function Node(n) {
  this.val = n;
}
Node.prototype.isBig = function() {
  return this.val > 5;
};
var myArray = [
  new Node(1), new Node(2), new Node(3),
  new Node(7), new Node(8), new Node(9)
];
var result = myArray.map(Function.prototype.call.bind(Node.prototype.isBig));
document.write(JSON.stringify(result));

And in ES6, you can consider using arrow functions:

var result = myArray.map(node => node.isBig());

edited Mar 25, 2016 at 22:40

answered Mar 25, 2016 at 22:03

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruan Mendes Over a year ago

This is really cool, but I have been using JavaScript for 15 years and I always have to read lines like those a few times

Oriol Over a year ago

@JuanMendes Yes, and I have to test it before posting because I'm not sure if I have thought it correctly.

Community · Accepted Answer · 2017-05-23 12:23:50Z

1

You'd have to create a function that takes node as its parameter (that is, it doesn't rely on this

Node.isBig = function(node) {
  return node.isBig();
};

//works because function doesn't depend on this
myArray.map(Node.isBig);
// doesn't work, depends on this
myArray.map(Node.prototype.isBig);

Alternatively, you could create a function that returns another function that takes its first parameter and calls it as this

 function passFirstArgAsThis (fun) {
     return function() {
         fun.apply(arguments[0], arguments);
     }
 }
 myArray.map( passFirstArgAsThis(Node.prototype.isBig));

A slightly more cryptic implementation is

function passFirstArgAsThis(fn) {
    return function() {
        return fn.call.apply(fn, arguments);  
    };
}

The equivalent in ES6 is more readable

function passFirstArgAsThis(fn) {
    return function() {
        // arguments[0] will be the first argument passed to call
        // map will pass it as the node, we will make it become `this`
        // when calling the passed in function
        return fn.call(...arguments); 
    };
}

Understanding that, Oriol's answer becomes easier to comprehend

function passFirstArgAsThis(fn) {
    // we return a bound function that will execute the call method, bound
    // to the same passed in function 
    return fn.call.bind(fn);
    // Same as 
    // return function() {
    //    return fn.call(...arguments);
    // }
}

Personally, I would use fat arrow functions for readability, and not needing an extra "static" function.

nodes.map(n=>n.isBig())

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Mar 25, 2016 at 22:10

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

3 Comments

Barmar Over a year ago

I was about to suggest your Node.isBig recommendation, but you beat me to it.

Ruan Mendes Over a year ago

But as you mentioned in the comments, I would just use the anonymous function for clarity

Barmar Over a year ago

I wrote that before I thought of defining it as a "static" method. If I needed to do it from multiple places I would use Node.isBig.

Collectives™ on Stack Overflow

Javascript Array.prototype.map function with instance methods

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related