Stay dry - Invoke the class method if there is no instance available, otherwise execute the instance method

Situation

When the input is identified as a "start", the program will automatically calculate the corresponding "end" value and update the page with it. If the input is an "end", simply display this value on the page without any modifications.

I am in the process of creating a custom class to manage this task efficiently.

class EndVal(start_value) {
  constructor() {
    this.end_value = start_value + 10
    $("#end").text(this.end_value)
  }

  static prefill(end_value) {
    $("#end").text(end_value)
  }
}

The code provided above allows you to handle "start" inputs by utilizing new EndVal(start_value), while for "end" values, you can directly use EndVal.prefill(end_value). However, I find this approach slightly repetitive. Is there a way to streamline it and establish a connection between instance and class methods?

javascriptclassinstancedry

Answer №1

The prefill function should utilize the provided argument instead of referencing this. This enables calling the method directly from the constructor:

class EndVal {
  constructor(start_value) {
    this.end_value = start_value + 10
    EndVal.prefill(this.end_value);
  }

  static prefill(end_value) {
    console.log(end_value);
  }
}

const endVal = new EndVal(15);

EndVal.prefill(28);

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

The data received by request.responseText is accurate, however JavaScript is unable to interpret it

I am currently diving into the world of AJAX and educating myself using Head First AJAX. I have encountered a strange issue while working on a simple program that makes a request using JavaScript and displays the output. main.js window.onload = initPage; ...

javascriptphpajaxresponsetext

A guide on integrating the MUI Timepicker with the newest 6 version using Formik

I am currently experimenting with the MUI React Timepicker component and facing an issue during integration with Formik for validation. The problem lies in the inability to bind values properly in the initialValues of the form. const [initialValues, setI ...

javascriptreactjsvalidationmaterial-uiformik

Pug template syntax for importing JavaScript files with links

My Programming Dilemma In my NodeJS webserver setup, I use Express and Pug to serve HTML and JavaScript files. Here's a snippet of how it looks: index.pug html head title Hello body h1 Hello World! script(src='s ...

javascriptnode.jsexpresspug

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

javascriptphphtmllaravelvue.js

Filtering data with React's multiselect checkboxes

I have created an amazing app that fetches a list of todos from this incredible source To enhance user experience, I developed a special CheckBoxDropDown component for selecting todo IDs Within the CheckBoxDropDown.js component, I am passing the onChange ...

javascriptreactjsreact-hooksmaterial-uicodesandbox

What is the purpose of using double % in Java or JSP?

Yesterday, while reviewing some code, I came across a line that seemed very peculiar to me. In a JavaScript function, there is a condition checking for a string passed as a parameter in the following manner: "%%unsubscribe%%". See the snippet below for re ...

javajavascripthtmljsp

One creative method for iterating through an array of objects and making modifications

Is there a more efficient way to achieve the same outcome? Brief Description: routes = [ { name: 'vehicle', activated: true}, { name: 'userassignment', activated: true}, { name: 'relations', activated: true}, { name: &apos ...

javascriptfunctiontypescript

Utilize two separate functions within the onchange event of a v-checkbox component in a Vue.js application

I am currently using Vue.js with Vuetify and Laravel. In one of my components, I have a dynamic datatable that fetches data from the database using axios. Within this datatable, there are v-checkboxes. Everything is functioning as expected, but now I want ...

javascriptjqueryvue.jscheckboxvuetify.js

What is the best way to update a JSON object in a file using the file system module in Node.js?

Recently, I've been learning about read and write operations using the 'fs' module in Node.js. Here's my specific situation: I have a file containing data structured like this: [ { "Pref":"Freedom", "ID":"5545" }, { "Pref" ...

javascriptnode.jsfs

Guide on setting a v-model within a v-for loop (using an example from Bootstrap Vue)

Currently, I am utilizing vue-bootstrap for creating input fields using a v-for directive. The objective is quite similar to the example provided in this link. However, I am encountering some difficulties in obtaining the data collected from these inputs i ...

javascriptvue.jsvuejs2bootstrap-vue

Exploring the implementation of waterfall in a Node.js application

async.traverse(map, function(item, tnext){ async.waterfall([ function(wnext){ console.log("One"); //performing MongoDB queries db.collection.find().toArray(function(err){ if(err){ ...

javascriptnode.jsmongodbasynchronousasync.js

Utilize Node.js to proxy Angular requests to a service hosted on Azurewebsites

I am trying to set up a proxy post request in my Node.js server and receive a response from the target of this request. Below is an excerpt from my server.js file code where I have implemented the proxy, but I am facing a issue with not receiving any respo ...

javascriptnode.jsproxyazure-web-app-servicehttp-proxy

Configuring React classes for compilation within Play

After incorporating a basic React class into my Play project at /app/assets/js: var Question = React.createClass({ render: function() { return (<div> <p>{this.props.content}</p> <br> <p>{this.props.an ...

javascriptscalareactjsplayframework

What is the best way to create a React component that renders a class component as a functional component?

My Objective: At the moment, I am in the process of developing an AuthUserRole HOC component to manage user roles like Manager and Employee. However, I encountered a tutorial that uses a functional component to return a class component as referenced here. ...

javascriptreactjstypescriptauthenticationhigher-order-components

The dropdown on my website is malfunctioning

There seems to be an issue with my dropdown button. Previously, it only appeared when clicking on a specific part of the button. I attempted to resolve this problem but unfortunately, the dropdown no longer works at all and I am unable to revert my changes ...

javascriptjqueryhtmlcss

What are the drawbacks of utilizing the onClick function in JavaScript?

What is the rationale behind programmers opting not to use onClick function in Javascript? ...

javascriptjquery

There is an issue showing up in the console: $(…).datepicker is not defined as a function

I am new to using HTML with JavaScript. I attempted to implement a datepicker, but unfortunately, it is not working as expected. The error message I am receiving is '$(...).datepicker is not a function' in the console. I am utilizing multiple f ...

javascriptjqueryhtml

How can you make a button in Vue only visible after all API calls have successfully retrieved the data?

Is there a way to make the report button visible only after all the data has been loaded from the latest click of the budget button? Currently, when the budget button is clicked, it retrieves budgets and displays them in a Vue grid using Kendo Grid. To spe ...

javascriptvue.jsvuejs2

Ever since updating my Node JS, the functionality of the MaterializeCSS carousel methods has ceased to work

Recently, I encountered some issues with my React project that features a materialize-css carousel. The problem arose after updating my nodeJS version from 14.8.1 to 16.13.0. Specifically, these errors kept popping up: TypeError: Cannot read properties o ...

javascriptnode.jsreactjsmaterialize

In React version 16 and d3 version 4, if you try to use the mouse functionality from d3-selection, you may encounter a TypeError stating that it cannot read the property 'sourceEvent' of

Exploring the integration of d3 with React by incorporating the mouse feature from d3-selection module import { selectAll, select, mouse } from 'd3-selection'; Encountering an issue while attempting to utilize : mouse(e.target) or mouse(select( ...

javascriptreactjsd3.jsevent-handlingdom-events