Hiding global variables

I am trying to hide my glob.variables from DevTools(Console) by using Self-invoked function (IIFE)

Yes it does hide them, however AS other functions (e.g. arrow functions) are inside the IIFE, when called, it says function not defined.

When I take all functions outside of IIFE, they cannot use the variables which are inside the IIFE (e.g. products[], isAdmin).

What is the best practice of doing this?

<script>
   // (function() {
      let isAdmin = "<?php echo $is_admin ?? false; ?>";
      let products = [];
          document.addEventListener("DOMContentLoaded", async () => {
             initDataTable();
             if(!isAdmin) {
                await initProducts();
             }
          });
   
      const initDatatable() => { ... }
      const initProducts = () => { 
         // response = ajax call result
         products = response;
         // return promise
      }
      // ... other functions 
  // })();
</script>