So this is the first technical post I am writing. It is mostly destined to my future self, but also, I am not really satisfied with the answer to the problem, I would love to have reviews on how I could improve the method.

I am currently working on the refactoring of an application. I have already written about it in other posts.
On of the biggest problems about that is that I am often confronted to necessity of working in the context of the application, using the pattern of the objects that the application needs, opposite to building this context.
It leads sometimes to problems to trying to improve solutions in a more efficient way than before, but still limited by the "guidelines" of the legacy code.

The problem

So after having implemented class patterns in the application, I found myself with the following problem :

I have a class with properties that will serve to populate a React Component.

The first send a simple array of string :

[
   {
      label:'label1',
      visible:false,
      otherProp:'something'
   },
   {
      label:'label2',
      visible:false,
      otherProp:'something'
   }
]

The second send an array of objects :

[
   {
      label:'label1',
      otherProp:'something'
   },
   {
      label:'label2',
      otherProp:'something'
   }
   {
      label:'label3',
      otherProp:'something'
   }
   {
      label:'label4',
      otherProp:'something'
   }
]

Both label properties refers to the same values.
And every objects will be converts to the same class.

The objective is to substract the first list from the second one, because their properties 'visible' is set at false.
And I want to do it with the smallest O that I can, and with not too much verbose.

EDIT :
To be more clear, I add the expected result of the function :

[
   {
      label:'label3',
      otherProp:'something'
   }
   {
      label:'label4',
      otherProp:'something'
   }
]

My solution

So first I identify the property of reference, here is 'label'.
I will extract the values of 'label' that must be eliminated from the bigger array.

Then I must compare the values of the result to the bigger array. Each element must be different from all the values of the smallest one.

const substractObjectsFromArray = (arrayTotal, arrayToSubstract, propertyOfReference) => {
   /* extract the list of values to substract */
   let extractValue = (arrayToSubstract, propertyOfReference) => arrayToSubstract.map(element => element[propertyOfReference]);

   /* substract the element based of the list */
   let arrayResult = (arrayTotal, arrayToSubstract, propertyOfReference) => 
       arrayTotal.filter(element => 
            extractValue(arrayToSubstract, propertyOfReference).every(ele => element.label !== ele) === true)
   return arrayResult(arrayTotal, arrayToSubstract, propertyOfReference);
}

So I tried my best to be the most efficient I could with the context I had. But I still lack a lot of experience and knowledge. Maybe there is a design pattern or data structure that could have more easily answered my problem, if so please share, I would love to learn about it.

Thanks for reading