Need clarification for map and observable syntax in Angular

Question

There is a certain syntax that is baffling me and i see it with the map function and also with the observable in typescript/Angular (Angular 5). I have two methods:

This one is in a component:

logout() {
   this.authService.logout().subscribe( 
       result => {
           this.router.navigate(['/login']);
       }
   );
}

And this is in the related service:

logout(): Observable<any> {
    return this.http.post('/api/auth/logout', { }).map( 
        response => { 
            this._token = null;
            //more unrelated code...
            return true 
        }
    );
}

The part that is confusing me in both of these cases is this:

thing => {
    //code
}

What is this? The code above works. but I see that have both 'result' and 'response' for thing. Can 'thing' be anything at all or is it defined somewhere?

Also, I looked up the map function in javascript at w3schools (because I've never had a use for it) and it shows in the example that the first parameter is supposed to be a function which gets applied to each element of the array that it is associated with but "thing => {}" is not a function so this is super confusing.

Note, that I have worded my question in such a way as to get to the underlying misunderstanding rather than focusing on my specific problem, however solving my specific problem may help illustrate my misunderstanding.

The problem with the code above is that while it works it does not know what to do when the api endpoint returns a 500 error. I am trying to determine how to catch the error so that I can do something with that on the front end.

Answer 1

Thing can be whatever you want to name it. Result, data, response, etc. Doesn't matter. What you're basically doing is creating a variable for the result emitted from your subscription. The subscription takes in a function() and inside that function, you pass the variable name that you want to be used for the success result. And really, here, using result is meaningless, since nothing is ever done with it. If you aren't going to do anything with the response, its better to just say:

logout() {
    this.authService.logout().subscribe(() => {
        this.router.navigate(['/login']);
    });
}

To catch errors, you only need to pass a comma after the last curly, like so:

logout() {
    this.authService.logout().subscribe(() => {
        this.router.navigate(['/login']);
    }, err => {
        // Do something with error here
    });
}

As for map, here is an example

var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);

It basically takes every variable in the array and performs that map method, meaning it takes each value and does whatever the function says to do, in this case, multiply it by 2. Think of it as a sort of transformation. In that example, it's basically being used to manipulate the response before sending it back to the subscription.