Amongst the new features released with the new ES6 standard in Javascript are a bounty of new built-in methods. These new methods aim to simplify and standardize some familiar scenarios that developers encounter when working with JS data types like Numbers, Strings, Object and Arrays.
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
Introducing Javascript 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.
Object Merge
Object.assign merge
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.
Object Clone
Object.assign clone
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.
String Repeating
ES6 has added a simple new String.repeat() method.
string repeating
String Searching
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.
string searching
Number Type Checking
There are several new functions for checking for non-numbers and finite numbers. Number.isNaN() and Number.isFinite()
number type checking
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.
number sign determination
So that’s it for Proxies in ES6. Let us know your thoughts and questions and PLEASE follow us on twitter. Keep after it.