Our Global Presence

Canada
57 Sherway St,
Stoney Creek, ON
L8J 0J3

India
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049

USA
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
When you write a class in JavaScript, you might have had to add more features to the methods in a class. But sometimes they look quite nasty and messy.
How can you make the process more elegant? In this post, we will talk about a promising feature, a decorator.
This feature isn’t included in the newest ECMA-262, JavaScript in other words. You should always use Babel to use this in your project.
The examples I’ve attached to this post were written in JSFiddle, with the Babel + JSX configuration. If you want to use this feature in your project, you ought to set up Babel on your own.
class Medium { constructor(writer) { this.writer = writer; } getWriter() { return this.writer; } }
There’s a class, Medium
, that takes the name of the writer in its constructor. And there’s a function that returns the writer’s name.
Let’s create a property that is of Medium
type.
const medium = new Medium('Jane'); const fakeMedium = { writer: 'Fake Jane', getWriter: medium.getWriter, };
medium
is created using Medium
‘s constructor function, unlike fakeMedium
which is an object literal. But it has the same properties as medium
.
Now, let’s compare the result of getWriter
from each.
medium.getWriter(); // Jane fakeMedium.getWriter(); // Fake Jane
Why are the values different?
It’s because JavaScript’s normal function this
is bound to the object that actually invokes the function.
medium.getWriter()
is called by the medium
object, however, fakeMedium.getWriter()
is called by fakeMedium. So, the this
inside the function, getWriter, looks up the value from fakeMedium
.
This article outlines the difference between normal functions and arrow functions.
To get the same result as when medium.getWriter
is called, let’s use Object.defineProperty
. What Object.defineProperty
does is define new properties on the object or modify the existing properties on the object and then it returns the object.
const fakeMedium = { ... }; let isDefining; let fn = fakeMedium.getWriter; Object.defineProperty(fakeMedium, 'getWriter', { get() { console.log('Access to getWriter'); if (isDefining) { return fn; } isDefining = true; const boundFn = this.getWriter.bind(medium); isDefining = false; return boundFn; } });
Whenever fakeMedium.getWriter
is called, Access to getWriter
will be printed twice. But why twice?
fakeMedium.getWriter()
, its getter-mode is detected and runs the customized get
method.get
method, the getWriter
is newly bound by medium
– this.getWriter.bind(medium)
. Here, this
refers to fakeMedium
itself. So it’s the same as fakeMedium.getWriter.bind(medium)
. That’s why its get
is called once again.isDefining
is set to true, so the codes under the if-condition won’t be executed until isDefining
is set back to false again.But this way is really a pain in the neck. Because every time you make a new instance of Medium
, you should do this again.
Can’t we do this in a more elegant way?
Any function can be a decorator. Basically, you can use a decorator for either a class or a method in a class. It takes three arguments – target, value, and descriptor.
function decorator(target, value, descriptor) {}
target
refers to either the class or a prototype of the class.value
is undefined
for a class and is the name of the method for a method.descriptor
is an object that contains definable properties on an object – such as configurable, writable, enumerable, and value. It’s undefined
for a class.function autobind(target, value, descriptor) {} class Medium { ... @autobind getWriter() { return this.writer; } }
A decorator is used with an at sign (@
), with the name of the function that you’ll use as a decorator — and it takes three arguments as we just explained.
function autobind(target, value, descriptor) { const fn = descriptor.value; return { configurable: true, get() { return fn.bind(this); } } }
descriptor.value
is the name of the function on which you put the decorator function – in this case, it’s getWriter
itself.
Note that the return value of autobind
is a new object, then getWriter
adopts the return value to its environment.
What’s good about using decorators is that they are reusable. All you need to do after defining the decorator function is merely to write @autobind
on functions.
Here’s another example of making class member properties read-only, which is even easier.
function readonly(target, value, descriptor) { descriptor.writable = false; return descriptor; } class Medium { @readonly signUpDate = '2019-04-23'; } const medium = new Medium(); medium.signUpDate; // 2019-04-23 medium.signUpDate = '1999-11-11'; medium.signUpDate; // 2019-04-23 ^ The value isn't changed!
This time, the descriptor of the property has been changed by setting the writable
property as false
and that is all. Dead simple. Right?
Here’s the comparison of the full code.
class Medium { constructor(writer) { this.writer = writer; } getWriter() { console.log(this.writer); } } const medium = new Medium('Jane'); const fakeMedium = { writer: 'Fake Jane', getWriter: medium.getWriter, }; medium.getWriter(); // Jane fakeMedium.getWriter(); // Fake Jane /* Do auto-binding job for the same values */ let isDefining; let fn = fakeMedium.getWriter; Object.defineProperty(fakeMedium, 'getWriter', { get() { if (isDefining) { return fn; } isDefining = true; const boundFn = this.getWriter.bind(medium); isDefining = false; return boundFn; } }); medium.getWriter(); // Jane fakeMedium.getWriter(); // Jane
function autobind(target, value, descriptor) { const fn = descriptor.value; return { configurable: true, get() { return fn.bind(this); } } } class Medium { constructor(writer) { this.writer = writer; } @autobind getWriter() { console.log(this.writer); } } const medium = new Medium('Jane'); const fakeMedium = { writer: 'Fake Jane', getWriter: medium.getWriter, }; medium.getWriter(); // Jane fakeMedium.getWriter(); // Jane
Try it out by yourself!
A decorator is very useful, powerful, amazing, and remarkable. Honestly, we don’t see any reason to say no to use this awesome feature.
But, remember that it’s still at stage 2 and the way we used this in this post is more like Babel’s style, not the currently proposed one at stage 2. So, things might be different, like how to use it or what you can actually do with it.
So, we absolutely recommend you use this feature with the appropriate Babel configurations for your project but we also want to mention to keep an eye on this feature in TC39.
For more information and to develop your web app using front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.
Content Source:
ECMAScript has grown to be one of the world’s most widely used general-purpose programming languages. ECMAScript is based on several originating technologies, the most well-known being JavaScript (Netscape) and JScript (Microsoft). Here are the new features of ES2020.
Now, you can import a file dynamically.
import { max } from '../math.js'; const nums = [1, 2, 3]; max(...nums); // 3
This has been the way we could import a file. And the JavaScript engine reads the modules in the file and bring them into the file where those modules are called. But now, you can do this as follows.
const numbs = [1, 2, 3]; if (numbs.length) { const math = '../math'; import(math) .then(module => { module.max(...numbs); }) }
A dynamic import returns a promise. Which means you can write it this way as well.
const math = '../math.js'; const module = await import(math); module.max(...numbs);
Why this feature is good is that you can use a dynamic import in a regular JavaScript code like the example above.
Here’s the browser support for Dynamic Import.
When you had to add two numbers that are too big enough to cause an overflow, weren’t you suffered?
Number.MAX_VALUE * 2 // Infinity
BigInt is a savior in this case.
You can make a BigInt by calling BigInt()
with parenthesis or 2n
with ‘n’ at the end of a number.
const num = 2; const bigNum = BigInt(num); bigNum; // 2n bigNum === 2n; // true
You can also add, subtract, multiply and divide it.
const bigN = BigInt(10); bigN + bigN; // 20n bigN * 3n; // 30n bigN - BigInt('55'); // 45n bigN / 3n; // 3n
Note that bigN / 3n
returns 3n
, not 3.33333n
. Because as you also can assume from its name, it only handles the integers. So bigN / 3n
is similar to Math.floor(10 / 3)
.
However, unfortunately, you can’t make a BigInt with a float number. And also, you can’t use a BigInt and a Number together, either.
BigInt(3.3); // Uncaught RangeError BigInt('3.3'); // Uncaught SyntaxError BigInt(1) + 1; // Uncaught TypeError // Cannot mix BigInt and other types
Instead, the only allowed case to mix the operations is when you compare the size of the operations.
BigInt(1) < 2 // true
And a BigInt can be evaluated like a Number if it’s in if condition.
function print(n) { if (BigInt(n)) { console.log('hi'); } else { console.log('bye'); } } print(1); // hi print(0); // bye
Here’s the browser support for BigInt
This is quite similar to Promise.all , but there’s a significant difference between them. Promise.all waits for all the promises being fulfilled or an any promise being rejected. On the other hand, Promise.allSettled doesn’t care about that. What it cares is to know if all the promises are done, whichever their status is. So every input promise could be fulfilled or rejected, but it doesn’t matter to Promise.allSettled . Just all of them have to be done.
const promises = [ Promise.resolve(1), Promise.reject(2), Promise.resolve(3) ]; const onResolve = (data, prefix) => { console.log(prefix, 'Resolved with', data); }; const onReject = (err, prefix) => { console.log(prefix, 'Rejected with', err); }; Promise.all(promises) .then(onResolve.bind(null, 'all')) .catch(onReject.bind(null, 'all')); // Result: // all Rejected with 2 Promise.allSettled(promises) .then(onResolve.bind(null, 'allSettled')) .catch(onReject.bind(null, 'allSettled')); // Result: // allSettled Resolved with // [ // { // "status": "fulfilled", // "value": 1 // }, // { // "status": "rejected", // "reason": 2 // }, // { // "status": "fulfilled", // "value": 3 // } // ]
This might be quite useful when you want to do some works before some action, for example, getting all of the required data before the user sees the list page. But the user could see the empty items because the fetch might be failed.
Here’s the browser support for Promise.allSettled
.
This is lit. It’s dead simple and easy to use.
globalThis
refers to the global this
context on which your running context is. If you’re on Browsers, globalThis
will be this , if you’re on Node, globalThis
will be global
. Hence no need to think about the different environmental issues anymore.
// worker.js globalThis === self // node.js globalThis === global // browser.js globalThis === window
And this is how it works under the hood, but don’t use it in your code!
var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('unable to locate global object'); };
Here’s the environmental support for gloablThis
.
For more information and to design a website using front-end technology, Hire Front-End Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.
Content Source:
JavaScript is the standard technology for implementing a seamless interaction between a user and the web page. Almost all modern browsers support it. It is the main technology behind driving the modern UX and/or server-side frameworks such as Angular, Node.JS and ReactJS. Here are top 5 best practices to write more robust JavaScript.
If you don’t know what a factory function is, it’s simply a function (that isn’t a class or constructor) that returns an object. This simple concept allows us to take advantage of JavaScript and its features to create powerful robust applications.
It’s important to know that they’re no longer factory functions when they’re called with the new
keyword.
Factory functions can be used to easily produce instances of objects without having anything to do with classes or the new
keyword.
What it essentially means is that they ultimately become treated as just functions, which means they can be used to compose objects, functions, and even promises. This means you can mix and match factory functions together to create an enhanced factory function, then continue composing with other functions or objects to create even further enhanced ones. The possibilities are endless.
When we take that into consideration and combine it with good code practices, it really begins to shine.
Here is a simple example of a factory function:
function createFrog(name) { const children = [] return { addChild(frog) { children.push(frog) }, } } const mikeTheFrog = createFrog('mike')
When you’ve used factory functions enough, you begin to realize that compared to its class constructor counterpart, it promotes stronger reusability. This results in less code, an easier time refactoring since factory functions ultimately return arbitrary objects, and an easier time managing one code to another.
If you’re new to JavaScript, this section might be a little new to you as it was for me for the first two years of my experience with JavaScript.
(Keep in mind that this does not apply to classes because classes already attach methods onto their prototypes.)
Here’s an example of a constructor:
function Frog(name, gender) { this.name = name this.gender = gender } Frog.prototype.leap = function(feet) { console.log(`Leaping ${feet}ft into the air`) }
Why do this instead of directly attaching the leap method, like in the example below?
function Frog(name, gender) { this.name = name this.gender = gender this.leap = function(feet) { console.log(`Leaping ${feet}ft into the air`) } }
When we attach methods directly on the prototype, they get shared among all instances created by the constructor.
In other words, using the last example, if we created three separate Frogs (from this.leap = function() {…}), then we end up creating three separate copies. This is a problem because the leap method will always stay the same and doesn’t need to have its own copy to its instance.
Ultimately, this results in lower performance, when it could have been avoided. The this.name and this.gender properties need to be defined on the instance because in real life, frogs probably have their own names and gender so it makes sense to have them created on the instance level.
Here’s an example on GitHub of this approach used by the popular request package.
This practice works so well that it’s in extensive use today. If you’re a React developer, you’ve probably already been seeing this every day, especially when you’ve been working with Redux.
Using similar approaches also makes it extremely easy for you in your development flow since it even documents itself extremely well:
function createSpecies(type, name, gender) { if (type === 'frog') { return createFrog(name, gender) } else if (type === 'human') { return createHuman(name, gender) } else if (type == undefined) { throw new Error('Cannot create a species with an unknown type') } } const myNewFrog = createSpecies('frog', 'sally', 'female')
TypeScript has become widely adopted in the JavaScript community due to its ability to provide a strong defense for type safety as well as its ability to help us catch bugs before they even occur.
Using TypeScript will enable your compiler to detect and show warnings about any potential errors in code before the code even runs.
But that’s not even close to a complete list of reasons why adopting TypeScript is good for any situation. One of the best things about TypeScript is that it allows you to use new features in JavaScript before they’re supported by major browsers since they get compiled down to earlier versions of JavaScript, ultimately being able to run in old browsers.
try/catch
when using JSON.parse
or JSON.stringify
In JavaScript, when we pass JSON as input to the JSON.parse
method, it expects a properly formatted JSON as the first argument. If it’s formatted incorrectly, it will throw a JSON parse error.
The danger coming from JSON parse errors is that receiving invalid JSON crashes your app. We’ve recently been in a situation at work where one of our web projects was failing because another internal package did not wrap a JSON.parse
in a try/catch
. This ended up making a web page fail, and there was no way to get past this error unless the internal package fixed it. This happened because the JavaScript runtime was broken.
SyntaxError: Unexpected token } in JSON at position 107
You shouldn’t always expect valid JSON input as it can receive weird characters like the >character, which is not uncommon today.
For more information and to design a website using front-end technology, Hire Front-End Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.
Content Source:
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
© 2025 — HK Infosoft. All Rights Reserved.
© 2025 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap