Categories
Modern JavaScript

Best Features of ES2019 — Arrays, Strings, and Symbols

Spread the love

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 ES2019.

Array.prototype.flat

The flat method on the array instance is a useful method in ES2019.

It lets us flatten arrays one or more levels deep.

For instance, we can write:

const arr = [1, 2, [3, 4],
  [
    [5, 6]
  ],
  [7, 8]
].flat(0)

Then there’s no change to the array.

If we have:

const arr = [1, 2, [3, 4],
  [
    [5, 6]
  ],
  [7, 8]
].flat(1)

Then we get:

[
  1,
  2,
  3,
  4,
  [
    5,
    6
  ],
  7,
  8
]

And if we have:

const arr = [1, 2, [3, 4],
  [
    [5, 6]
  ],
  [7, 8]
].flat(2)

We get:

[
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8
]

1 is the default value.

Array.prototype.flatMap()

flatMap combines the map and flat methods together.

For instance, we can write:

const arr = [1, 2, 3].flatMap(x => x)

Then we get:

[
  1,
  2,
  3
]

If we have:

const arr = [1, 2, 3].flatMap(x => [x])

then we get the same thing.

And if we have:

const arr = [1, 2, 3].flatMap(x => [[x]])

then we get:

[
  [
    1
  ],
  [
    2
  ],
  [
    3
  ]
]

The callback lets us map the entries to what we want and call flat on each entry.

Object.fromEntries()

The Object.fromEntries() method lets us create an object from an array of key-value arrays.

For instance, we can write:

const obj = Object.fromEntries([
  ['a', 1],
  ['b', 2]
]);

Then obj is {a: 1, b: 2} .

It does the opposite action from Object.entries() :

const obj = {
  a: 1,
  b: 2,
};

const arr = Object.entries(obj);

Then we get:

[
  [
    "a",
    1
  ],
  [
    "b",
    2
  ]
]

String.prototype.trimStart

The trimStart string instance method lets us trim the whitespace at the start of a string.

For instance, we can write:

const str = '  foo  '.trimStart()

Then we get:

'foo  '

String.prototype.trimEnd

The trimEnd method lets us trim the end of a string.

For instance, we can write:

'  foo'

trimLeft and trimRight are equivalent to trimStart and trimEnd respectively.

But those are legacy methods since we want consistent with padStart and padEnd .

What are Whitespaces?

The following characters are whitespaces:

  • <TAB> (character tabulation, U+0009)
  • <VT> (line tabulation, U+000B)
  • <FF> (form feed, U+000C)
  • <SP> (space, U+0020)
  • <NBSP> (no-break space, U+00A0)
  • <ZWNBSP> (zero-width bo break space, U+FEFF)
  • Any other Unicode character with the property White_Space in category Space_Separator (Zs).

Line terminators are also whitespaces. They include:

  • <LF> (line feed, U+000A)
  • <CR> (carriage return, U+000D)
  • <LS> (line separator, U+2028)
  • <PS> (paragraph separator, U+2029)

Symbol.prototype.description

The Symbol.prototype.description method returns the description of the symbol.

For instance, if we have:

const sym = Symbol('description');

console.log(sym.description)

Then 'description’ is logged.

Conclusion

ES2019 introduced various arrays, strings, and symbol methods.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *