Best Features of ES2017 — String and Object Methods

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at the best features of ES2017.

Object.entries()

Object.entries() is an object static method introduced with ES2017.

It returns an array of key-value pairs of an object with each key-value pair in an array.

For instance, if we have:

const obj = {
  foo: 1,
  bar: 2
};

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Object.entries takes an object and returns the key-value pairs.

Then we loop through the key-value pairs by destructuring the key-value pair array.

Maps via Object.entries()

Since Object.entries returns an array of key-value pairs in an array and the Map constructor takes that array, we can convert an object into a map with it.

For instance, we can write:

const map = new Map(Object.entries({
  foo: 1,
  bar: 2,
}));
console.log(JSON.stringify([...map]));

Then we get:

[["foo",1],["bar",2]]

Object.values()

Object.values() returns an array of values from the object.

It also takes an object as its argument.

For instance, we can write:

const obj = {
  foo: 1,
  bar: 2
};

Object.values(obj)

Then we get [1, 2] returned.

Object.getOwnPropertyDescriptors()

The Object.getOwnPropertyDescriptors method lets us get the property descriptors of an object.

It only returns the descriptor of non-inherited properties.

For instance, we can write:

const obj = {
  [Symbol('foo')]: 100,
  get bar() {
    return 'abc'
  },
};
console.log(Object.getOwnPropertyDescriptors(obj));

Then we get:

{
  bar: {
    configurable: true
    enumerable: true
  },
  Symbol(foo): {
    configurable: true
    enumerable: true
    value: 100
    writable: true
  }
}

configurable indicates whether we can change the property descriptors.

enumerable indicates whether the property is listed with the for-in loop.

value is the property value.

And writable indicates whether the property value can be changed.

We can use it to copy properties into an object.

If we just copy the value, then we miss all the other property descriptors.

Instead, we can call Object.getOwnPropertyDescriptors to get the object.

So we can write:

const source = {
  foo: 1
};
const target = {};

Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
console.log(Object.getOwnPropertyDescriptor(target, 'foo'));

Then we get all the property descriptors of source copied to target .

And we can set the property descriptors of target.foo to check if everything has been copied over.

String Methods

ES2017 introduced new string method.

New methods include the padStart and padEnd methods.

padStart lets us pad a string to the given name by adding one or more characters repeated to the start of the string.

For instance, if we have:

'x'.padStart(5, 'yz')

then we get:

"yzyzx"

Likewise, there’s a padEnd method that pads a string to a given length with one or more characters repeated to the end of the string.

For instance, we can write:

'x'.padEnd(5, 'yz')

Then we get:

"xyzyz"

returned.

In each method, the first argument is the length, and the 2nd is the string that we want to pad our original string with.

Conclusion

ES2017 has some handy object and string methods we can use.