Mastering the art of utilizing class attributes and functions from within modules

Currently, I am developing classes in ES6 modules using object literals and my intention is to update object attributes within a function. Although modules run in strict mode by default which ensures safe usage of this, I am uncertain whether calling the function foo() will modify the object in the main script file or if it only affects the local object within Controller.mjs. Will both function calls produce the same outcome?

//Controller.mjs
const Controller = {
    someAttr1: [],
    someAttr2: true,

    foo: function () {
        this.someAttr1.push("some value");
        Controller.someAttr1.push("some value");
    }
};

//export Controller's interface...

//SomeOtherFile.mjs
import { Controller } from 'Controller.mjs'

Controller.foo();

Answer №1

the item I am accessing in the 'parent' script file or simply the local item that only exists in Controller.mjs

Your code actually only contains one item. The use of the import statement just creates a reference for the const Controller variable from the imported module. There is no creation of a separate, second item.

In terms of whether to use this or Controller to refer to the object, you can check out this resource: Javascript: Object Literal reference in own key's function instead of 'this'. This choice is relevant regardless of whether the code is divided among different modules or not.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a JavaScript function to generate a multiple selection form

Hey there! I have a question... Can I use JavaScript to create a multiple select form? Here's an example: <select name="item[]"> <option value="0">Option 1</option> <option value="1">Option 2</option> </select> &l ...

Tips for building dynamic web interfaces that allow for interactive communication in both directions

I'm struggling to find the right keywords to search for, so I'll explain what I'm attempting to accomplish using a basic example and see if anyone can suggest some potential techniques or technologies. Imagine a scenario where one or more i ...

Bring in SASS variables to enhance Material UI theme in NextJS

Within my project, I currently have the following two files: materialTheme.ts import { createMuiTheme, Theme } from "@material-ui/core/styles"; const theme: Theme = createMuiTheme({ palette: { primary: { main: "#209dd2", contras ...

Utilizing the power of Koa.js in conjunction with MongoDb for seamless development

Having an issue, or maybe just lacking some knowledge here. The question is pretty straightforward - I have this code: router.get('/', (ctx, next) => { MongoClient.connect(url, {useNewUrlParser: true}, function (err, db) { if (err) th ...

The onblur function is not being triggered

Recently, I encountered an issue while trying to invoke a JavaScript function onblur of a field. The main problems I faced were: 1) The popup inside the function call was triggered automatically during page load. 2) When attempting to access the functio ...

Error with Ajax-bound selection (dropdown) - possibly due to an empty list in certain browsers

Upon taking over a project involving ASP.Net AJAX and JSON, I encountered an issue on a page that loads a large select (combo box) list of 1,430 entries. This list loads successfully on our main search page but produces an error in MicrosoftAjaxTemplates.d ...

Unexplained quirks observed in AngularJS $watch during the initialization of a controller

I am working with a code snippet that utilizes AngularJS: var app = angular.module('Demo', []); app.controller('DemoCtrl', function ($scope) { function notify(newValue, oldValue) { console.log('%s => %s', oldValue, ...

Firestore information does not appear visible

I encountered an issue with my custom hook where I am fetching images from a Firestore collection. Everything was working smoothly until I attempted to retrieve the metadata of the images as well. The problem arose when I included the getMetaData function, ...

Discover the secret to toggling Bootstrap 4 cards visibility when hovering over the navigation menu using CSS

Hey, I'm currently working on a project where I want to show and hide specific sections of cards by just hovering over the menu list. While I can successfully hide the cards using CSS, I am facing issues with displaying them using the display:block pr ...

What is the best way to implement JQuery Ajax in order to invoke a PHP file on the server side, which will then execute returned javascripts?

I am currently working on a client website that requires a cross-domain JQuery Ajax call to a PHP file on my server. The purpose of this call is to query the database for various stored JavaScripts, which will then be returned to the client and executed on ...

The passport authentication process is malfunctioning as there seems to be an issue with the _verify function

Having an issue and could use some assistance. I am currently implementing passport in my express application. While I am able to successfully register a user, I encounter an error when trying to log in. TypeError: this._verify is not a function at Str ...

Purging browser cache with the help of jQuery or AngularJS

I am currently working on clearing the browser cache through programming. This is necessary because I have updated the application to a new version, but the browser continues to display the old version and content stored in the cache. I want to ensure that ...

When attempting to send emails, SendGrid encounters an error and fails to provide an error code

Earlier today, I successfully sent out a series of emails using SendGrid. It was quite a large number of emails, as I needed to create multiple user accounts with attached email addresses. Thankfully, everything went smoothly and all the emails were delive ...

Leveraging AJAX to transmit a JavaScript variable to PHP within the same webpage

I have a webpage where I want to update a PHP variable based on the value of a name attribute when a user clicks on a link. Here is an example of what I am attempting to accomplish: // PHP <?php $jsVar = $_POST['jsVar']; echo $jsVar; ...

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

The challenge with our unique PHP/JS Analytics Solution

Here's an illustration of the code snippet for Google Analytics: <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'userIDhere']); _gaq.push(['_trackPageview']); _gaq.push([&apos ...

Dealing with errors such as "Failed to load chunk" can be resolved by implementing lazy-loading and code-splitting techniques

Our team is currently working on a Vue.js application using Vue CLI 3, Vue Router, and Webpack. The routes are lazy-loaded and the chunk file names include a hash for cache busting purposes. So far, everything has been running smoothly. However, we encoun ...

Experiencing issues with exporting <SVG> file due to corruption

I received some downvotes on my previous post, and I'm not sure why. My question was clear, and I provided a lot of information. Let's give it another shot. My issue is with exporting <SVG> files from an HTML document. When I try to open t ...

The enigmatic jQuery AJAX glitch is craving additional arguments

My website uses jQuery's ajax function to handle user signups. Despite using similar code throughout the site, I encountered an error while trying to execute the code below: Error Message: uncaught exception: [Exception... "Not enough arguments" nsr ...

Sending a JavaScript function as part of an ajax response

I'm currently working on a system where the user can submit a form through AJAX and receive a callback in response. The process involves the server processing the form data and returning both an error message and a JavaScript function that can perform ...