The new objects methods
Object.assign() method has multiple jobs. It can copy an object, clone from another object, or concatenate two or more objects.
- copy the values from another object:
- Clone an object to a new object
- Also, you can merge duplicate properties with Object.assign() by setting two empty brackets as the first argument:
Object.entries() method returns the keys and values of the object as an Array.
Object.getOwnPropertyDescriptors allow us to get the properties descriptor for an object.
It’s really helpful to check the property of the object descriptor, for example, see if it is writable or enumerable.
The new Array methods
Array.includes() allows us to check if a property exists in an array. You can see the difference between the old code and the new syntax (ES6). The new method is short and more readable.
Array.find() helps us to find an element in an Array. It takes a callback function as an argument. The callback function provides more options to find and extract complex data.
If the property we are looking for exists, it returns the found value. Otherwise, it returns undefined.
Array.findIndex() returns the index of the found element instead of the value.
This new method returns an Array iterator of the values so we can run a for loop to extract each value of the Array.
Array.entries() returns both the key and value and in an Array format.
Array.from() was introduced in the ES6 release. It can do multiple things by running a map() function on the data. It can convert a String to an Array or even create a new Array from the data.
As the name implies, this method returns the keys of the Array.
The new String methods
String.repeat() method allows you to repeat a string.
String.includes() works like Array.includes(). It returns a Boolean if the value entered exists.
The new Number methods
Like the previous method, Number.isInteger() checks to see if the value passed is an integer or not. It will return true if the value is an integer and false if it is not.
You might always want to validate the users’ input to make sure it is a number. Number.isSafeInteger() checks if the number is a safe number.
Number.isFinite() checks if the value passed in is a finite number or not.
The new Number methods are almost supported by the major browser except for Opera Mini and IE-11. Support is shown in the image below:
New Specific objects
- validating user data
- data correction
- property lookup
- function invocation
Check other uses of Proxy and its methods here.
For understanding proxy, we are going to write two examples.
In this example, we validate data while getting it from a user. We will try to define the behavior of an undefined error.
As you see in the example above userInfo.favCar returns
undefined. What if we want to handle this error message? If we want to create a custom behavior for the error, for example, displaying another message instead of undefined, we can use Proxy in this case.
We defined a new proxy and gave it two arguments — the object and the handler. The handler runs some validation code and checks if the property exists in the object. It returns the property if it exists. Otherwise, it returns the message we defined and this is called property lookup.
In this example, we will create a validation for a specific value in the object using the set method.
In this example, we can validate the datatype and returns a new TypeError(). This makes debugging much easier. You can understand more with this helpful Article.
Proxy works quite good for all major browser as you see below:
Learn more about Set() object here.
You can find me on Twitter and Instagram
- Learn Bootstrap 4 in 30 min by building a Landing a Website
- Angular 6 and it’s new features, all explained in three minutes
- How to use routing in Vue.js to create a better user experience
- Learn how to create your first Angular app in 20 minutes