JavaScript features you may not have used before

❗ IMPORTANT: Some features mentioned in this article are no longer in use, EcmaScript has banned their use. But they can still be found in many other libraries, so it’s still worth checking out.

Tagged Template Literals

If you’ve ever used styled-components in React, then you’ve probably used tagged template literals .

They allow us to control the parse of characters through a function more efficiently.

Above, taggingThis is a function whose first parameter is an array of strings, the other parameter is related to expressions.

Inside the function, we can manipulate the strings to return the desired results.

In the above example, the corresponding strings parameter would be [ "Hey!!, I'm ", '"!!" ] , and the rest of the parameters will be passed to the array, vals["Alex"] .

Operator, (comma)

, is an operator that separates expressions and returns the last expression in the string.

For example, when you want to write a shorter lambda function

The test() function does two things, first pushes the result a*b into the array array, and performs a*b calculation. When calling the function, the return result is the result of a*b .

with ⚠

with is banned entirely in strict mode so it is no longer recommended. In addition, using block with with can lead to some security and performance issues.

with is a keyword in JS, used to extend the scope of the string of statements:

or

Evaluates the expression and creates a scope around that expression . expression and the scope cha of with are available inside {}.

with package exp inside scope string. exp and other variables declared outside the block are still accessible from within the block.

But with the variables let and const declared inside block with is only accessible in that block, it cannot be used outside. When trying to access, a ReferenceError will be generated.

print

We are all too familiar with the for..in loop, but surely many people do not realize that in is a keyword in JS: v. It is used to check for the existence of an attribute in an object, return true if the object has that property, and vice versa.

For example,

Array constructor

The order of the parameters passed to the constructor will correspond to their index in the array. Similar to using array literal:

• Creating arrays with new Array () usually applies when the parameter is greater than or equal to 2.

• JS engine will allocate space for the array with the size equal to the parameter value passed.

will create an array with 4 elements and length of 4. Same as

Function constructor

similar to

good

or

The variables passed to Function() form the input parameters and the body of the function. The variable mul is the function name, the last variable is the function body, and the variables in front are the parameters of the function.

According to MDN:

Calling the constructor directly can create dynamic functions, but it will have the same security and performance issues as eval . However, unlike eval, the Function constructor creates functions that execute only globally.

Destructuring Array

We can unstruct the elements of an array by using their index .

In essence, Array is also an object. Therefore, we can destroy the structure of Array as we do on object.

On the object,

Similarly, for Array

Use index to extract elements. Index is a property that determines the position of the elements in the array. So,

is equivalent to:

In addition, there is also a special array decomposition syntax:

avoid having to know the specific position of the elements in the array.

Modify the Array using the length property

The length property in an array indicates the number of elements in the array.

Changing the length will cause the JS engine to change the array elements (from the right) so that the number of elements is equal to the length value.

Conversely, if the length increased, the JS engine adds undefined elements to make the number of elements in the array increase to a value equal to length.

Arguments

We can use the arguments object to get the arguments passed to a function without having to explicitly define the parameter variables in the function:

The arguments object is similar to an array-indexed with the keys being the corresponding index. arguments object is initialized from Arguments class so it has some interesting properties.

• arguments.callee.name : refers to the name of the function being called.

• arguments.callee.caller.name : refers to the name of the function containing the function being executed.

Ignore parentheses ()

Did you know that we can ignore the parentheses () when creating an object?

The brackets are optional, even within existing classes:

The void operator

void is a JS keyword used to evaluate a statement and return undefined .

See, the function hello() will return "Hi!" , but void instead ignores it and returns undefined .

undefined can be assigned a different value before, and this skewed its semantics. So void is used to make sure we’ll have an undefined thực sự .

Function properties

We can set properties in functions like this:

• Functions are also objects. The function property will be a static property for all instances of the function when used as an object.

• Is a global property when used as a function.

Unary operator +

The unary + operator converts its operand to Number type.

Useful for quickly converting variables into Numbers.

Unary operator –

Unary operator - converts its operand to type Number and negates it.

This operator reverses the result of the unary + operator. It first converts the operand to the Number value, then negates the value.

What happens here is, the string “12” will be converted to its Number 12 . This positive number will then be converted to a negative form of -12 .

If the result of the transformation is NaN , the negation will not be applied.

Negation +0 produces -0 and negation -0 produces +0 .

Power operator **

This operator is used to find the exponent of a number. It’s like finding the powers of a number raised to a certain level of precision.

In Mathematics, if we raise 2 to the power of 3 (i.e. find the exponent of 2), that means multiply 2 by three times:

We can do the same in JS using the ** operator:

Inheritance via __proto__

__proto__ is a way to inherit properties from an object in JavaScript. It is an attribute of Object.prototype .

__proto__ will set all properties of the object set in its [[Prototype]] to the target object.

For example:

We have two objects: obj and obj2. obj has method properties, method. obj2 is an empty object, meaning it has no properties.

Access the __proto__ of obj2 and set it to obj. This will copy all the properties of obj accessible through Object.prototype to obj2. That’s why we can call method() on obj2 without getting an error even though it’s undefined.

obj2 has inherited obj’s properties, so the method function properties will be available in its properties.

__proto__ is used on objects such as object literal, Object, Array, Function, Date, RegEx, Number, Boolean, String.

Refer