One of the goals of ES6 was to make coding in JS cleaner and more concise, let’s take a look at how these new methods help move us towards that goal.
In each code snippet below you will see:
//ES6 — this is the new ES6 implementation of the feature
//ES5 — this is the ES5 equivalent(if there is one) of the new ES6 implementation
If you like this post check our last post on JS ES6 Proxies
Object Property Assignment
When working with objects you often need to combine 2 or more objects. The new Object.assign() function provides a clean method for doing just that.
We start off with 3 Objects on lines 2–4 with the intention of combining them into the destination Object. In ES5 you had to loop through and independently append the values to the destination object. In ES6 you can do this with a single line of code(line 15).
What happens when you merge objects with same properties you ask? Let’s see.
Merge With Same Properties
You can also use Object.assign() to clone Objects.
Array Element Finding
Commonly when working with Arrays you will want to find an element OR the index of an element in an Array. ES6 provides 2 new Array methods find() and findIndex() to do this. It is important to note that find() will return the FIRST element in the Array that satisfies the provided testing function. Let’s take a look at these new ES6 functions and their ES5 equivalents(there is no ES5 equivalent for findIndex()).
Line 7 and Line 12 accomplish the same thing, you can see the simplicity in the ES6 implementation on line 12. There is no ES5 equivalent for line 13(findIndex). Line 14 shows the findIndex() function returning the FIRST element to satisfy the test.
ES6 has added a simple new String.repeat() method.
ES6 has added 3 new methods to aid the developer when searching for segments of text within a String. startsWith(), endsWith() and includes(). This one I love because something about indexOf() has always struck me as inefficient and error prone.
Number Type Checking
There are several new functions for checking for non-numbers and finite numbers. Number.isNaN() and Number.isFinite()
There are several things to note here:
- The differences between the new ES6 Number.isNaN() and the global isNaN() are laid out pretty well here and here.
- Infinity is actually NOT infinity, it a numeric value that represents Infinity. The actual value is 1.797693134862315E+308. The same for -Infinity, -1.797693134862315E+308.
Number Sign Determination
ES6 introduces a new function Math.sign() to determine the sign of a number including the special cases of signed zero(-0) and non-number.
So that’s it for Proxies in ES6. Let us know your thoughts and questions and PLEASE follow us on twitter. Keep after it.