DEV Community: Théo

JavaScript - Difference between map() and forEach()

Théo — Wed, 06 Mar 2024 13:22:08 +0000

Introduction

If you are a Javascript Developer, you probably use map() and forEach() method, but do you really know the difference between both of them ?

We will see how they works and in which case it is useful to use them.

map()

The map() method is used when you want to create a new array and modify elements in it. A new array will be returned with his new values (or not).

Exemple :

const array = [1, 2, 3, 4, 5];

const newArray = array.map(item => item * 5);

console.log(array);
//Output : [1, 2, 3, 4, 5];
console.log(newArray);
//Output : [5, 10, 15, 20, 25];

Here, in this example we can see that we have array which has not changed, and the newArray which contains the new array with the new values.

We can also attach an other method after map().

Exemple :

const array = [1, 2, 3, 4, 5];

const newArray = array.map(item => item * 5).sort((a, b) => b - a);

console.log(newArray);
//Output : [25, 20, 15, 10, 5];

forEach()

The forEach() method is used when you want edit an element in an existing array. But unlike map(), forEach() do not return a new array.

Exemple :

const array = [1, 2, 3, 4, 5];

const newArray = array.forEach((item, index, arr) => arr[index] = item * 5);

console.log(array);
//Output : [5, 10, 15, 20, 25];
console.log(newArray);
//Output : undefined;

Here, array contain the new values, and newArray is undefined because forEach do not return an array like map().

Conclusion

So, the main diffenrence between both of them is that map() method return a new array with the new values and we can attach another method to it, while forEach() return nothing and we cannot attach any other method to it.

Angular - Setup an Interceptor for HTTP request error.

Théo — Mon, 04 Mar 2024 20:48:40 +0000

Use cases

A common use case for catching errors from an API in Angular is centralized HTTP error handling. The interceptor can capture all errors returned by HTTP requests to the API and take actions based on the error type or server response

How it works ?

The operation of an interceptor is very simple. Here is a diagram that should help you understand :

The interceptor will simply intercept requests passing between the client and the server. We will therefore be able to define or not actions when intercepting requests.

How to do ?

1 - Create your interceptor
To create your Interceptor you can use Angular CLI :



$ ng generate interceptor http-error

Once your file is created, it should look more or less like this :



import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request);
  }
}

2 - Intercept HTTP request errors
Currently your interceptor detects all passing and outgoing HTTP requests. But we want to detect errors returned by the API

To do this, we will have to use an Rxjs operator: catchError(). This operator will catch errors within an Observable and return them.
Let's start by importing catchError() :



import { catchError } from 'rxjs/operators';

Now that it's imported, let's use it in our intercept function:



intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        return throwError(() => error);
      })
    );
  }

💡 pipe() allows you to open an operation pipeline, and to use RxJS operators.
💡 throwError() create an Error Observable.

3 - React to errors
Now that we catch our errors returned by our API, we can react to them. The most common case is to display a toast of the error in question:

In my case I use angular2-notifications, but the operation will remain generally the same with other packages.
So, I import it:



import { NotificationsService } from 'angular2-notifications';

I inject it:



constructor(public notifications: NotificationsService) {}

And now I display my error toast:



intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        this.notifications.error(error.error.message);
        return throwError(() => error);
      })
    );
  }

⚠️ My API returns an Object with the message attribute which contains the error in question. You will need to adapt this part based on feedback from your API.

4 - Declare the interceptor
Now that the interceptor is complete, it must be declared. To do this, you will need to go to the module where you wish to use it and import your interceptor and HTTP_INTERCEPTORS and declare it:



import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpErrorInterceptor } from '@core/interceptors/http-error.interceptor';

@NgModule({
   ...
   providers: [
      {
         provide: HTTP_INTERCEPTORS, 
         useClass: HttpErrorInterceptor, 
         multi: true
      }
   ]
   ...
})

💡 multi: true adds the interceptor to the interceptor array, rather than replacing them.

How to bypass the interceptor?

If for a particular reason you do not want the interceptor to intercept certain requests, you can bypass it using the httpBackend module.

💡 The interceptors are located between the HttpClient and HttpBackend interface. So the trick is we need to inject HttpBackend directly into our service and create a new HttpClient using HttpBackend

To begin, you must import the HttpBackend module into your service in question:



import { HttpBackend } from '@angular/common/http';

Then, inject it, and declare it:



constructor(
    private handler: HttpBackend,
) {
    this.httpClient = new HttpClient(handler);
}

Now, when using this.httpClient the requests will not go through the interceptor.

Exemple :



constructor(
    private handler: HttpBackend,
) {
    this.httpClient = new HttpClient(handler);
}

getUsers(): Observable<User[]> {
    return this.httpClient.get<User[]>('/api/users');
}

If getUsers() returns an error, it will not be caught by the interceptor.

Git - Move a commit to another branch

Théo — Thu, 29 Feb 2024 15:03:17 +0000

Use cases

A developer accidentally made changes to an incorrect branch. For example, a commit containing changes related to a new feature is accidentally added to the main branch rather than the specific development branch for that feature

How to do ?

Let's say, you have committed on branch: branchA, instead of commit on branch: branchB.

1 - Go on the branch: branchA

$ git checkout branchA

2 - Show logs

$ git log

And normally the commit should point to the branch: branchA

ex : commit 7988ef64c0d91ed6cf98b2006014b88320a4c8c0 (HEAD -> branchA)
Here, the hash of the commit is : 7988ef64c0d91ed6cf98b2006014b88320a4c8c0

3 - Copy the hash of the commit, and go on the branch: branchB

$ git checkout branchB

4 - Do the cherry-pick command with the hash of the commit (copied previously)

$ git cherry-pick 7988ef64c0d91ed6cf98b2006014b88320a4c8c0

cherry-pick allows copying a specific commit from one branch and applying it to another branch.

5 - Check if the commit has been moved

$ git log

And normally the commit should now point to the branch: branchB
ex : commit 7988ef64c0d91ed6cf98b2006014b88320a4c8c0 (HEAD -> branchB)