Instantiate Javascript object from constant

Question

I'm building a progressive web app using the Workbox library. There's an example on the Workbox doc which shows that the import statements can be omitted by using a constant.

Code with import statements:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst()
);

Code without import statements:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies; // same as const CacheFirst = workbox.strategies.CacheFirst
const {CacheableResponse} = workbox.cacheableResponse;  

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst()
);

How is it possible to instantiate a CacheFirst object (new CacheFirst()) by using a constant instead of an import? Is this a ES6 feature or something Workbox specific? Couldn't find an answer on Google or SO. How does the CacheFirst object relate to the constant?

As I'm coming from PHP this construct is new to me.

score 0 · Accepted Answer · answered Oct 04 '21 at 13:11

Let's focus on one of the three lines.

With import

import {CacheFirst} from 'workbox-strategies';

this looks for the module workbox-strategies and imports an exported member of it, so it has to look a little like this:

// in node_modules/workbox-strategies/index.js:

function CacheFirst(){
  // implementation... - could also be a class with constructor before transpilation etc.
}
export CacheFirst;

Without import but with `importScripts`

Now for the second example. Here the magic actually happens in

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

which has to do something like

// in https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js

// define global var workbox
var workbox = {};
// isolate rest of the declarations so they don't pollute the global namespace
(()=>{
  function CacheFirst(){
    // implementation... - could also be a class with constructor before transpilation etc.
  }
  workbox.strategies = {
    CacheFirst: CacheFirst, //create a member named CacheFirst and assign the function CacheFirst to it - could use AutoProperties
  }
})();

So after the importScripts() call you have a global workbox object. Now you just alias some members of it for easier access. Using destructuring this looks like

const {CacheFirst} = workbox.strategies;
// create actual instance
const myCacheFirstStrat = new CacheFirst();

But you could also just use the global webpack object directly

const myCacheFirstStrat = new workbox.strategies.CacheFirst();

Does that answer your question?

Thanks a lot. This answers at least how the assignment of the the member object to the constant works. But it's still unclear to me how the constant makes it possible to create an object by using "new CacheFirst()" without import statement. I don't understand the relationship between the constant and the "new CacheFirst()". Is this a JS feature or some workbox magic? Sorry, my JS know how is very basic ... — ninsky, Oct 04 '21 at 13:53
[new is pretty weird in JS when coming from OOP languages](https://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript) - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new). `const` is just a keyword of a variable that can't be changed (at least not the reference directly, but you can mutate e.g. the elements of an array that's `const`). That means it can be a function as well, which is commonly used with arrow functions: `const myFunc = ()=>{console.log("bla")}` is a valid function definition. — Taxel, Oct 04 '21 at 14:17
Thanks, I think now it's clear. The link in your answer helped me to find this explanation ("What happens when you add new to a function call is that a new object is created"): https://stackoverflow.com/a/1646957/830006 — ninsky, Oct 04 '21 at 14:45

Instantiate Javascript object from constant

1 Answers1

With import

Without import but with importScripts

Without import but with `importScripts`