Exploring the Power of Namespaces in ECMAScript 6 Classes

Question

Exploring the Power of Namespaces in ECMAScript 6 Classes

My goal is to create a class within the namespace TEST using ECMAScript 6. Previously, I achieved this in "old" JavaScript with:

var TEST=TEST || {};
TEST.Test1 = function() {
}

Now, I am attempting the following approach:

var TEST=TEST || {};
class TEST.Test2 {

}

However, I am encountering an error regarding the dot between TEST and Test2:

Uncaught SyntaxError: Unexpected token

How can I successfully achieve what I am attempting without the use of transpilers, relying solely on native browser JavaScript?

javascript class namespaces ecmascript-6

Answer 1

Answer №1

Similar to functions, class declarations and class expressions are available. An alternative approach is to use a class expression and then assign the output to TEST.Test1:

TEST.Test1 = class { // or `TEST.Test1 = class Test1 {`

};

Answer 2

Similar to functions, class declarations and class expressions are available. An alternative approach is to use a class expression and then assign the output to TEST.Test1:

TEST.Test1 = class { // or `TEST.Test1 = class Test1 {`

};

Answer 3

Answer №2

ES6 modules are designed for this purpose:

export class Test2 { ... }

...

import * as TEST from './test';

new TEST.Test2(...)

If you have a single file with class definitions, you can do it like this:

const TEST = window.TEST || {};

{
  class Test2 { ... }
  ...

  Object.assign(TEST, { Test2, ... });
}

Another approach is to use class expressions, as suggested in another response.

Answer 4

ES6 modules are designed for this purpose:

export class Test2 { ... }

...

import * as TEST from './test';

new TEST.Test2(...)

If you have a single file with class definitions, you can do it like this:

const TEST = window.TEST || {};

{
  class Test2 { ... }
  ...

  Object.assign(TEST, { Test2, ... });
}

Another approach is to use class expressions, as suggested in another response.

Exploring the Power of Namespaces in ECMAScript 6 Classes

Answer №1

Answer №2

Similar questions

What is the best way to incorporate npm packages and ES6 features into Django?

Error: Encountered an unexpected token within the node_modules/aws-iot-device-sdk/thing/index.js file

Vuetify's personalized date selection tool

A method for expanding the menu upwards to make room for newly added items

Discovering if an input field is read-only or not can be achieved by using Selenium WebDriver along with Java

Getting the (x,y) Coordinate Value from jQuery Script and Saving it as a NSString

The data I am trying to obtain is not being returned by my hook as expected

Is it possible to add a class to a child element deep within the component hierarchy while using TransitionGroup/CSSTransition in React?

Vue.js - experiencing issues with conditional styling not functioning as expected

Using a different method to handle multiple callbacks in Angular or a suitable replacement for $.Callbacks

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

What is the best way to show search suggestions on Google Maps autocomplete once three characters have been entered?

Converting long date format to short date format: yyyy-mm-dd

Switch between GeoJSON layers by using an HTML button within Mapbox GL JS, instead of relying on traditional links

Encountering an issue with importing createSagaMiddleware from 'redux-saga' while working on my create-react-app project

Although hiding and showing elements in jQuery is quick, the rendering engine is too sluggish

Automating Python functions with Selenium API after exceeding page load time

Unable to minimize or hide the ace editor widget with Cypress

What is causing the issue preventing me from running npm run dev on CentOS 7?

List of nested HTML tags in Javascript