CODEWITHSUNDEEP
javascriptfunction
Gatene
Gatene

Reputation: 47

function creation as a parameter?

I have tried asking this on specialty forums, and no one answers this for me, But I am hoping someone here can. Below is the snippet of code in question, and I know how it all works except for 2 bits of it.

this.data = allItems().filter(function(item) {
    return this.includes(item);
}, this);

As stated above, I understand all but two bits of the code above: What is this type of function called? a call back? There is no function called "item" or a variable within the main function called "item". Lastly, why is "this" a part of the snippet?

Sorry if this isn't enough information, I am trying to be as thorough as I can with this question as I am not familiar with this style of scripting. I have done some research on this subject, and the closest explanation as I can get is a private function, but as I mentioned above, there is no function called "item" anywhere.

Upvotes: 1

Views: 94

Answers (3)

Jhecht
Jhecht

Reputation: 4435

Javascript is a bit of a strange language. For those of us that learned a compiled programming language first, it shares a visual aesthetic but the behind-the-scenes are very different.The first thing to understand is that in javascript every function as a special reference called this. It references the current iteration of the function.

Think of it like this: there is a class called Human, which defines a set of properties common to all humans -- we have a height and weight, a name, eye color, hair color, etc. But me, being 5'8", 200 lbs, hazel eyed, and bald is not the same description as you, or any other human being. While there could definitely be another human with those characteristics, we are not the same.

var Human = function(name, height, weight, eye_color) {
  this.name = name;
  this.height = height;
  this.weight = weight;
  this.eye_color = eye_color;
}

var me = new Human('Jhecht', '5.8', 200, 'hazel');
alert(me.name); //Alerts 'Jhecht'
var you = new Human('Gatene', '6.0', 190, 'brown');
alert(you.name); //Alerts 'Gatene'

The this in the code ensures that the variables me and you mark us as individuals. This way, even though we can both have things in common, it is understood that we are not the same. It also makes it so that you can check on that information later. Without the this I would just be setting each variable equal to itself (name=name) which gives me no way to look at its contents later. If I removed the this.name and replaced it with name, I would no longer get my expected result if I tried to call alert(me.name)(I would most likely get an undefined value) When used on event listeners for HTML elements, this will refer to the HTML element, unless you tell it otherwise.

Functions in javascript are also a little less rigid (and I don't feel like that's the correct word, but it's the best one I've got) than functions in other languages. Notice in my code above I set my function like so:

var Human = function(name, height, weight, eye_color) ...

I could have also created that function like so:

function Human(name, height, weight, eye_color)...

and the outcome would be the same.

So in your code snippet, let's go through line by line.

this.data = allItems().filter(function(item) {
    return this.includes(item);
}, this);
  1. this.data is saying "the data variable on this instance of the function call this code is from" is equal to allItems() which presumably returns an array of items, is filtered down by a function. Since Javascript allows for something called 'anonymous' functions, aka functions without a name, we create an anonymous function (non-named function) which accepts a named argument of item.
  2. the function being passed to the .filter method in line 1 will return the result of the includes method (most likely defined somewhere previously in your code), which was being passed the value of our argument from line 1, item.
  3. Ends the function definition with }. the next portion goes back to what I said before, this refers to the current function call, unless you instruct it not to. the , this); is the programmer saying "on this function, which I declared above, I want this to refer to the object I am using currently."

This part is tricky, and it will definitely take some time to understand so if you're not entirely sure don't worry too much about it.

Upvotes: 2

user663031
user663031

Reputation:

What is this type of function called? a call back?

It's an anonymous function (because it has no name), which is being passed as an argument to filter, and yes, it could be and is called a callback.

There is no function called "item" or a variable within the main function called "item".

You're misunderstanding basic function syntax. function(item) does not refer to anything called item, a function or otherwise. It is defining an anonymous function with item as its single formal parameter.

Lastly, why is "this" a part of the snippet?

Read the documentation for filter, and in particular the thisArg parameter, the second parameter, which specifies the value to use as this when the callback function is called. In this case, this is being specified, which is the this of the surrounding context, which is the same object which holds the property data, as well as the method known as includes.

It could be more easily written without using the thisArg parameter by using arrow functions, as

this.data = allItems().filter(item => this.includes(item));

Upvotes: 1

jasonscript
jasonscript

Reputation: 6170

The filter function accepts a parameter. It is expected that this parameter will be a function with at least 1 parameters (item)

Your code snippet is passing an anonymous function as this parameter:

function(item) {
    return this.includes(item);
}

thus fulfilling the expectations of the filter function

Upvotes: 1

Related Questions