JS “tricks” good or not (part 4)

Tram Ho

Hello friends,

This time we continue with the JS tricks just nice but no less flimsy JSTip series okay. Hope you have watched my series in the last 3 sections, if not, then just take a look at it, maybe the tips I have collected are somewhat helpful for you:

[JS tips series] JS “tricks” thought not good or not

In this section, we go through some of the next “tricks” to gradually be able to “control” JS better and better.

1. A nice trick with Object properties

Have you ever tried to create an object in which in some necessary situations in which its property is a read-only property, that is, it does not change the value of that property?

In JS, we can do this easily without your knowledge. This is a feature from ECMAScript 5.1. So do not worry, it supports all new browsers today (new browsers, do not bring IE to ask yourself: v).

No longer verbose, we will implement it as follows:

Here we use the defineProperty function, its syntax is as follows:

or when we declare many attributes:

And we will have a few options:

  • value : If the attribute is defined without a getter , this option is required (see example below). So {a: 12} will be equivalent to Object.defineProperty(obj, 'a', {value: 12})
  • writable : This option is the key to our first tip, which will determine whether this attribute is readonly or not.
  • enumerable : this option sets the attribute to hidden. That is, when we use the for ... of loop or stringify , the result will not include this property, but this attribute is still in the object, it’s just hidden. Note that, this does not mean that your property has become private, it can still be accessed from outside, just that it is not printed for you to see.
  • configurable : The set for your property is non-modifiable, for example, it will be protected from deletion and redefined (redefined). Recall that, if your property is a nested object, it can still be modified and redefined.

So if you want to create an object with private properties, we will do the following:

In addition to allowing us to configure properties, the defineProperty function also allows us to create dynamic properties. Wow, what is the motion ??? It sounds very right, is like this:

The getTypeFromExternal function returns the desired property name. That’s so awesome, right?

But that’s not all, the good part is still going on. The defineProperty method also allows us to create getter and setter like any other object-oriented language. But note that, when doing so, we can no longer use writable , enumerable and configurable as usual.

This has an advantage, in an aspect of context context, that you see that we don’t call the getter as usual, we just “get” the property without any parentheses. any application. It is interesting, isn’t it? This may not sound very good unless you see the following example:

Instead of writing that abc[0].d to get the value, we can do it in a more wonderful way:

Note at the end of the article : If you define getter without defining setter and intentionally set the value for that attribute, then you will get an error. This is an important thing so be careful!

2. A “disastrous” operation reduces performance

In JS functions, there is a variable named arguments that allows you to access all the parameters passed to the function. arguments is an array-like object (I don’t want to translate because … I don’t know how to translate it 😄 ), it can be accessed using the array notation [], which also has the length attribute like any other array. But ironically, it doesn’t have some of the array’s default methods, such as filter , map , and forEach . Therefore, there is a fairly common way to convert parameters into an array as follows:

Using the slice function of the Array prototype will return a copy of the arguments a new array.

Unfortunately, passing arguments is the reason why the V8 JS engine used in Chrome and Node ignores the optimization for function execution, leading to slower performance. For more information, please read this article .

So instead of using the short and dangerous way, we will use it in a safer and safer way like this:

3. Speed ​​up the recursive function

“Please write to me the nth Fibonacci function!”

“I’ll give you 20s”

And swirl clams … you can close your eyes to write with the basic recursive algorithm as follows:

It works as you wish and returns the result, but this is not an optimal way. In this tip, I want to talk about optimizing this function a bit.

Why don’t we cache the values ​​of our previous calculations to speed up this recursive function a little bit? Let’s try it:

We can completely split the function like this:

And a little fussier when we use ES6:

And now that’s good, we can use this memoize function whenever we want. For example, the following 2 small code:

  • Greatest Common Divisor – GCD

  • Factorial calculation


Phew, finally went through the 3 tips of this section, do not rush to turn off the tab when you find your tips bring something useful for you, leave a comment or upvote to motivate me to write more. Next post! Hope you continue to support your “tricks”.

Thank you!

References http://www.jstips.co/

Share the news now

Source : Viblo