Initialize classes at run time: Javascript

Sometimes, initialize the classes at run time is helpful for debug messages or when using the class name as an identifier.

Have you faced any such problem or ever needed it?

Dear readers,

If your response is exactly what the above GIF is expressing then this article gonna be fruitful for you.

Let’s get up to make your hands grubby with some coding pieces of stuff.

I am going to take an example of a Random Number Game that will initialize the classes at run time. I am using Vuejs (for the functional part) and Vuetify (For the user interface).

Let’s create a directory of name classes and create three files inside it of names class_1.js, class_2.js, and index.js and in Vuejs, we already have an app file App.vue.

Now, just drop the below code snippets in the respected files.

Now, run your Vuejs server with either yarn serve or npm run serve, and you will find a UI page at the served port.

Let’s explore the important concepts of code-

• class_1.js and class_2.js:- These files are having the definitions of classes that have a constructor, and a function, “getClassDefinition” which when called, will get the introduction of class. I default exporting these classes with names, “ClassOne” and “ClassTwo”, you can also export these as a constant.
• index.js:- This class has imported both above-defined classes. This file includes a class named, “DynamicClass” which has a constructor that is going to return an object of any class at run time.

Many conceptual things are happening here. First, when this class will be initialized which basically means, its constructor will be called. The constructor will have an argument (in our case it will be a class name). Second, the meaning of, classes[class_name] is that class_name is being searched inside the constant “classes”. Third, the keyword “new”, which works is to provide an object of class at run time. Last one, the parenthesis, “()”, which job is to give a function prototype to a class’s constructor.

That’s the concept for which this article has been written.

• App.vue:- If you have copied the code from the URL, I have provided, you will notice that this file is having the UI part. Now, let’s understand the terms defined inside it-

1. generateRandNum:- This function will generate any number between 1 to 10 when clicked on the button “Generate Random Number”.
2. getClassName:- This function will take an argument which will be the name of any class. When the same argument is passed to “DynamicClass”, it returns an object of the respected class from which we can call the function “getClassDefinition”.
3. Watch:- This is a property of Vuejs which tracks the data at run time, so whenever any random number will generate, it will check the condition and pass the relevant class name to the “getClassName” function.

Let’s understand, how to get the result-

You would have noticed in the code that for all numbers which are less than and equal to 5, “ClassOne” will be initialized and for the rest, “ClassTwo” will be initialized. Now, Click on the button to generate a random number, and the result will be like this-

If you are using the technology other than Vuejs and Vuetify, the good announcement is, “no complications”. You can also do the above kinds of stuff by using only a single HTML file.

In order to make the above statement work, you need to create a single file “test.html” and pastes the below code inside it.

The explanation and logic are the same as the previous method, every time when you reload the page, a random number will be generated which will decide the class to be initialized.

So just open the HTML file in your browser and you will get the result like below-

Applause!! you did it perfectly.

Thanks for reading.