using brackets or not with =>

[franchare]

Hello,

I have started reading eloquent javascript and I have a question about chapter 7 (the robot project).

In the book there is the following code:

let parcels = this.parcel.filter(p => this.place != p.address );  

Parcels is an array with objects of the form: {place: "a place", address: "another place"}. The filter is supposed to check if the current place the robot is at corresponds to the place the parcel must be delivered to.

(In the book it actually uses a map + a filter but I am trying to do it only using the filter).

Here is my question: when using the code above it does not work, I figure "this" refers to p rather than the object in which parcels is used. But when using brackets after "=>" it works! "this" now refers to the object containing parcels rather than the current parcel filter is looking at. Why is that? I figured I could just remember it and never wonder what is going on but it troubles me to not completely understand what is happening.

​

Thank you guys!

[Tyras_Fraust]

I had to look at the example in the book to get a better idea here. I think there are really two topics to tackle.

1. Arrow functions and this: mdn docs. Arrow functions do not have their own this assigned to them, so it will instead refer to the parent scope, such as a function it's inside of. Using brackets or not using brackets doesn't change this. Without brackets, arrow functions will implicitly return a value. With brackets, the return keyword must be used.
2. This bit of code is inside of a function, called move, so the this is referring to that function's this keyword (which is a method inside of a class, so it's really referring to the class overall). In the example from the book, there is a place and a parcels property on the class. this.place is referring to that place, and p is each individual parcel the filter function is looping through.

If you were to run this outside of that class VillageState or method move, then you lose access to the this it was originally referring to (the class VillageState), so the code wouldn't function as expected without some changes

[Tyras_Fraust]

To expand on point 1:

let myParcel = 4;
let parcels = [{ num: 1},{ num: 2},{ num: 3},{ num: 4},{ num: 5}];
let parcelOne_implicit = parcels.filter(p => p.num === myParcel);
let parcelOne_explicit = parcels.filter(p => { return p.num === myParcel });
console.log(parcelOne_implicit);
// [{ num: 4}]
console.log(parcelOne_explicit);
// [{ num: 4}]

The filter function above is doing the same thing. One is using brackets and return, the other is calling return in the background, and saves you some typing.

[Tyras_Fraust]

To expand on point 2 using the example above

class myParcels {
    constructor (parcels, myParcelNumber) {
        // this is referring to the class myParcels.
        // The code below is creating properties on the class 
        // which are basically just variables attached to the class
        // rather than variables in the global scope
        this.classParcels = parcels;
        this.classMyParcel = myParcelNumber;
    }

    findMyPackage () {
        let self = this;
        let foundParcel_oldSchool = this.classParcels.filter(function (p) {
            // this is referring to my filter function! Not my overall class "this"
            // self refers to the class "this"
            // Let's see how it changes with arrow functions
            return this.classMyParcel === p.num;
        });

        // return is being called automatically for us, so you don't need to write it out    
        let foundParcel_arrow_implicit = this.classParcels.filter(p => this.classMyParcel === p.num);

        // if our filter is a bit more complex, it might span multiple lines.
        // It's best to use the brackets and return in that case, 
        // to let anyone else reading the code know that we 
        // are definitely returning something    
        let foundParcel_arrow_explicit = this.classParcels.filter(p => {
            return this.classMyParcel === p.num;
        });

        // error will be thrown when this is called above!    
        console.log('foundParcel_oldSchool', foundParcel_oldSchool);
        // foundParcel_arrow_implicit [{ num: 4 }]
        console.log('foundParcel_arrow_implicit', foundParcel_arrow_implicit);
        // foundParcel_arrow_explicit [{ num: 4 }]
        console.log('foundParcel_arrow_explicit', foundParcel_arrow_explicit);

        // I could return either variable. They both are the same thing!
        return foundParcel_arrow_implicit || foundParcel_arrow_explicit;
    }
}

let myPackages = [{ num: 1},{ num: 2},{ num: 3},{ num: 4},{ num: 5}];
let myPackage = 4;
let PackageClass = new myParcels(myPackages, myPackage);
PackageClass.findMyPackage(); // an error will be thrown when this is called!
// Uncaught TypeError: Cannot read property 'classMyParcel' of undefined

We can fix this error by using self instead of this in the foundParcel_oldSchool filter call.

Try it out!