this/apply/call/bind in JavaScript, invisible parameters

Question

I'm working on a JavaScript problem that involves hiding a parameter to demonstrate how this works.

The problem involves searching for an array, [1,2], in a search space which is a multidimensional array, e.g [[2,3], [3,4]]. However, the search space is passed in as part of this value to the function.

Function definition:

function contains(cell) {}

How do I access the search space passed in as this to the function? The accompanying testcase uses bind() to pass in the search space e.g

contains.bind([[2,3], [3,4]])

Here is the attempt at completing the function:

function contains(cell){
   let found = false;
   [x, y] = cell;

   // How do I access searchSpace passed in through `this`?
   searchSpace.forEach((element) => {
     [j, k] = element;
     // match first occurrence in array
     if (x === j && y === k){
        found = true;
     }
   });
   return found;
}

How do I invoke the function:

// contains(cell)
contains([1,2])

I think it should be `contains.bind(this, [[2,3], [3,4]])` (if you just want to bind the context to the function, without calling it yet), or `contains.call(this, [[2,3], [3,4]])` if you want to pass the context and call the function immediately. But if you do `contains().bind()` you are _executing_ `contains()`, and then, applying `.bind()` to whatever it returns (`found`, which is a boolean). A boolean has no `.bind()` method. — Jeremy Thille, Oct 11 '21 at 08:35
I need to substitute the line `searchSpace.forEach(` for `this.forEach(` because after calling bind(), I think `this` should contain the object, `[[2,3], [3,4]]` but in my case, it contains the global window object. — Brayoni, Oct 12 '21 at 19:06

score 0 · Answer 1 · answered Oct 11 '21 at 08:38

You should be able to pass that value as a variable to the contains function. this refers to something different in and out of the function (see this question for more context).

The easiest approach would be:

function contains(cell, searchSpace){
   let found = false;
   [x, y] = cell;

   // How do I access searchSpace passed in through `this`?
   searchSpace.forEach((element) => {
     [j, k] = element;
     // match first occurrence in array
     if (x === j && y === k){
        found = true;
     }
   });
   return found;
}

contains([1,2], this.searchSpace);

Thanks, but that is not what I'm looking for. Doing `this.searchSpace` is not necessary as the function signature already accepts two parameters one being the `searchSpace` in your example. I'd like to access the `searchSpace` without passing it in the function as a parameter, so the function remains to be `function contains(cell){}` — Brayoni, Oct 12 '21 at 18:59

t.niese · Accepted Answer · 2021-10-12T20:21:09.773

If you want to bind [[2,3], [3,4]] as this to the contains function it would be contains.bind([[2,3], [3,4]]) and not contains().bind([[2,3], [3,4]]).

And bind does not change the function on which it is called directly so contains.bind([[2,3], [3,4]]) alone and then calling contains won't do anything.

bind returns a new function, and that function then calls contains with the given value as this.

How do I access the search space passed in as this to the function?

By using this in the function.

function contains(cell) {
   console.dir(this)
   console.dir(cell)
}

const containsWithBind = contains.bind([[2,3], [3,4]])

containsWithBind([1,2])

How your code attempt should look like:

function contains(cell){
   let found = false;
   [x, y] = cell;

   // How do I access searchSpace passed in through `this`?
   this.forEach((element) => {
     [j, k] = element;
     // match first occurrence in array
     if (x === j && y === k){
        found = true;
     }
   });
   return found;
}

const containtsWithBind =  contains.bind([[2,3], [3,4]])

// contains(cell)
console.log(containtsWithBind([1,2]))
console.log(containtsWithBind([2,3]))

Do you mean the line, `searchSpace.forEach(` should be substituted for `this.forEach(` because after calling `bind()`, `this` now contains the object, `[[2,3], [3,4]]`? Doing that doesn't work. `this` contains the global window object. — Brayoni, Oct 12 '21 at 18:57
@Brayoni `Do you mean the line, searchSpace.forEach( should be substituted for this.forEach(` yes. `Doing that doesn't work. this contains the global window object.` you then didn't follow my instructions (`bind` does not change the function on which it is called, it returns a new function for which the given value is bound as `this`). In addition to the original simplified version, I now added your code with `searchSpace` replaced by `this` into my answer and it works. — t.niese, Oct 12 '21 at 20:22

this/apply/call/bind in JavaScript, invisible parameters

2 Answers2