DEV Community

Discussion on: Namespaces and Javascript: I Don’t Know What I’m Doing

Collapse
 
joelnet profile image
JavaScript Joel • Edited

So, I’m curious: What is the best way to handle JS namespaces?

I don't namespace.

I use es modules and bundle them with webpack (for web apps). This way I never pollute the global namespace. This is the approach I would recommend.

In the past (previous to webpack) I have also use an IIFE to encapsulate my code to prevent it from being exposed globally.

(function(global) {
  // code goes here
}(window || global))

However... I have had some times where I am forced to make something global. This was in a legacy application that was a mess.

I used a function similar to this:

const namespace = (context, name = '', object) => {
  const [head, ...tail] = name.split('.')
  if (tail.length > 0) {
    return namespace(context[head] = context[head] || {}, tail.join('.'), object)
  }
  context[head] = object
}

namespace(window, 'math.add', (x, y) => {
  return x + y
})

window.math.add(3, 4) //=> 7

p.s. I would run through a little testing with that function, I just kinda whipped it up on the spot, so I don't know if it's buggy.

Cheers!

Collapse
 
jacoby profile image
Dave Jacoby

I'd be happy to learn more about this approach. I'm very trailing-edge in most of the technologies I use, because I regularly switch between dev to admin to helpdesk, so a link that goes into how this works and why would be appreciated.

Thanks!

Collapse
 
joelnet profile image
JavaScript Joel

If you are just starting out with this, I would recommend looking into Parcel (Getting Started). It's an easy to configure bundler. You can get up and running in a few minutes.

I personally prefer Webpack (Getting started) because I am more familiar with it. You'll have to be familiar with other toolsets, like babel or webpack-devserver, etc. It's more work.

Got questions, hit me up on Twitter!

Cheers!