comment and simplify areChangesInBasemaps function to improve readability

src/components/Map/SidebarLayers.vue

@@ -151,38 +151,41 @@ export default {
     // Check if there are changes in the basemaps settings. Changes are detected if:
     // - one basemap has been added or deleted
     // - one layer has been added or deleted to a basemap
-    areChangesInBasemaps(basemapFromServer, basemapFromLocalstorage = {}) {
+    areChangesInBasemaps(basemapFromServer, basemapFromLocalstorage) {
+      // prevent undefined later even if in this case the function is not called anyway
+      if (!basemapFromLocalstorage) return false;
       let isSameBasemaps = false;
       let isSameLayers = true;
       let isSameTitles = true;
       // Compare the length and the id values of the basemaps
       const idBasemapsServer = basemapFromServer.map((b) => b.id).sort();
-      const idBasemapsLocalstorage = basemapFromLocalstorage.length
-        ? basemapFromLocalstorage.map((b) => b.id).sort()
-        : {};
+      const idBasemapsLocalstorage = basemapFromLocalstorage.map((b) => b.id).sort() || {};
       isSameBasemaps =
         idBasemapsServer.length === idBasemapsLocalstorage.length &&
         idBasemapsServer.every(
           (value, index) => value === idBasemapsLocalstorage[index]
         );
-      // For each basemap, compare the length and id values of the layers
+      // if basemaps changed, return that changed occured to avoid more processing
+      if (!isSameBasemaps) return true;
+
       outer_block: {
+        // For each basemap from the server, compare the length and id values of the layers
         for (const basemapServer of basemapFromServer) {
+          // Prepare an array of layer ids from the server and sort them
           const idLayersServer = basemapServer.layers.map((b) => b.id).sort();
-          if (basemapFromLocalstorage.length) {
-            for (const basemapLocalstorage of basemapFromLocalstorage) {
-              if (basemapServer.id === basemapLocalstorage.id) {
-                const idLayersLocalstorage = basemapLocalstorage.layers
-                  .map((b) => b.id)
-                  .sort();
-                isSameLayers =
-                  idLayersServer.length === idLayersLocalstorage.length &&
-                  idLayersServer.every(
-                    (value, index) => value === idLayersLocalstorage[index]
-                  );
-                if (!isSameLayers) {
-                  break outer_block;
-                }
+          // loop over basemaps from localStorage and check if layers id match the ones from the server
+          for (const basemapLocalstorage of basemapFromLocalstorage) {
+            if (basemapServer.id === basemapLocalstorage.id) {
+              const idLayersLocalstorage = basemapLocalstorage.layers
+                .map((b) => b.id)
+                .sort();
+              isSameLayers =
+                idLayersServer.length === idLayersLocalstorage.length &&
+                idLayersServer.every(
+                  (value, index) => value === idLayersLocalstorage[index]
+                );
+              if (!isSameLayers) {
+                break outer_block;
               }
             }
           }
@@ -191,9 +194,7 @@ export default {
         const titlesBasemapsServer = basemapFromServer
           .map((b) => b.title)
           .sort();
-        const titlesBasemapsLocalstorage = basemapFromLocalstorage.length
-          ? basemapFromLocalstorage.map((b) => b.title).sort()
-          : {};
+        const titlesBasemapsLocalstorage = basemapFromLocalstorage.map((b) => b.title).sort() || {};
 
         isSameTitles = titlesBasemapsServer.every(
           (title, index) => title === titlesBasemapsLocalstorage[index]