assigning function to elements of array . How to bind output of function?

Question

I am trying to create a 'secret' guestList to practice some closures and binding in JS. I am currently stuck because I need to use binding so the value of i updates after every iteration but I am really new to biding and I am having trouble wrapping my head around this... how do I call my variable code from the closure? how do I correctly bind the guesName to my checkCode function? :/

Here my code :

function guestListFns(guestList, secretCode){
    var topSecretList = []; 
    function codeChecker(code) {
        if (code === secretCode) {
            return guestName;
        } else {
            return "Secret-Code: Invalid";
        }
    };
    for(var i = 0 ; i < guestList.length; i += 1){
        var guestName = guestList[i]; 
            topSecretList.push(codeChecker.call(this.guestName, code));
    }
    console.log(topSecretList);

        return topSecretList; 
}

my testing values :

    var guestListFns = guestListFns(["Gabriel", "Ben", "Dan", "Griffin", "Cang", "Kate", "Chris"], 512);

var guest = guestListFns[1](512);
console.log(guest);

my return value so far:

"code is not defined"

Also, I have already figured out how to implement this function simply using map. But what I meant with this exercise is to practice binding so I can understand the concept.

Thanks!

it is completely unclear whatyou actually want as you are mixing up a few things — Jonas Wilms
– Jonas Wilms, Commented Mar 16, 2018 at 22:44
I would love to understand what is the correct way to bind my checkCode function to each guestName and assign that checkCode function to the my topSecretList arr... — Monique
– Monique, Commented Mar 16, 2018 at 22:47

Jonas Wilms · Accepted Answer · 2018-03-16 22:49:19Z

1

You dont wanna call, but you want to bind:

codeChecker.bind({ guestName })

So now inside codeChecker you can access

this.guestName

Actually you are overcomplicating things:

 const guestListFns = (arr, secret) =>
   arr.map(el => code => code === secret ? el : "nope");

edited Mar 16, 2018 at 22:49

answered Mar 16, 2018 at 22:41

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

1 Comment

Monique Over a year ago

Thanks @Jonas . I actually had figured out already how to use map. But, as stated in the question, my idea is to understand binding. In your answer to my question : when you use the {} around guestName, should I use them too?? After using bind instead of call and using this.guestName inside my checkCode function, i get undefined : /

Mark · Accepted Answer · 2018-03-16 22:57:01Z

1

If I understand what you are trying, I think call() is the wrong way to go about this. You want an array of partial functions where each function already has the name. You can use bind() for this. call() actually invokes the function, which isn't what you really want here. bind() returns a new function and allows you to set this and/or some of the arguments:

function guestListFns(guestList, secretCode){
    var topSecretList = []; 
    function codeChecker(guestName, code) {
        if (code === secretCode) {
            return guestName;
        } else {
            return "Secret-Code: Invalid";
        }
    };
    for(var i = 0 ; i < guestList.length; i += 1){
        var guestName = guestList[i]; 
        topSecretList.push(codeChecker.bind(null, guestName));
    }

    return topSecretList; 
}

var guestListFns = guestListFns(["Gabriel", "Ben", "Dan", "Griffin", "Cang", "Kate", "Chris"], 512);

console.log(guestListFns[1](512)); // ben
console.log(guestListFns[2](512)); // dan
console.log(guestListFns[1](112)); // bad code

answered Mar 16, 2018 at 22:57

Mark

92.7k8 gold badges116 silver badges156 bronze badges

1 Comment

Monique Over a year ago

Thanks @Mark, as I in the previews answer, after modifying my code following your answer, my output is [ null, null, null, null, null, null, null ] 'Gabriel' 'Ben' 'Dan' 'bad code I wonder why isn't .push passing the function into topSecretList instead of null :/

TKoL · Accepted Answer · 2018-03-16 23:04:05Z

0

Might this be what you're looking for?

function guestListFns(guestList, secretCode){
    var topSecretList = []; 
    function codeChecker(code) {
        if (code === secretCode) {
            return this.guestName;
        } else {
            return "Secret-Code: Invalid";
        }
    };
    for(var i = 0 ; i < guestList.length; i += 1){
        var guestName = guestList[i]; 
        topSecretList.push(codeChecker.bind({guestName:guestName}));
    }
    console.log(topSecretList);

        return topSecretList; 
}

var gfn = guestListFns(["Gabriel", "Ben", "Dan", "Griffin", "Cang", "Kate", "Chris"], 512);
gfn.forEach(f => console.log(f(512)));

edited Mar 16, 2018 at 23:04

answered Mar 16, 2018 at 22:58

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

5 Comments

Monique Over a year ago

Thanks @TKol , yes. This solution apparently solves the binding of checkCode inside my loop. Now, any idea of why my topSecretList is filled with null instead of the function checkCode itself? For some reason I can't get the push to pass the function instead of its return value... some guidance is fine. It is just a really confusing topic.

TKoL Over a year ago

when I run mine, it's not filled with null.

Monique Over a year ago

Weird. In my case it returns [ null, null, null, null, null, null, null ] 'Gabriel' 'Ben' 'Dan' 'Griffin' 'Cang' 'Kate' 'Chris' :/

TKoL Over a year ago

you should try console.logging the typeof the contents of topSecretList, topSecretList.forEach(f => console.log(typeof f))

Monique Over a year ago

Right! they appear to be functions... thank you so much! I am still a bit confused as for why the null in my array but it seems like internally is working.

Collectives™ on Stack Overflow

assigning function to elements of array . How to bind output of function?

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related