Have you heard about ECMAScript 6? Find Out What’s New in JavaScript ES6 (Part 2)

In my previous post, I explained what destructuring assignment, enhanced object properties, template strings, and block-scoped variables are.

In this post, we will discover 4 more features that were included in ECMAScript 6.

• Arrow functions
• Classes
• Extended Parameters handling
• New built-in methods

Arrow functions

Arrow functions (also called “fat arrow functions”) is a new syntax for writing functions in a shorter way. This is one of the most popular features in ES6.

It is important to mention that arrow functions are anonymous (they are not named) Which means that they will be hard to debug and they cannot be self-referenced. But still, it is a very convenient way to write functions.

Let’s see how arrow functions work in an example

This is how functions are written before ES6

And this is using ES6 arrow functions

As you can notice, the function declaration is shorter and can be written in only one line. But there are some variations that you may want to know.

Return statement

The return statement is only mandatory when you need to write a block and you need to return a value, in other cases, it can be omitted.

When you need to write a block, once the curly braces are present and you need to return a value, you always need to write return as well.

Parameters parenthesis

Parenthesis can be omitted when there is only one Parameter.

Return objects

If you are returning an object literal, it needs to be wrapped in parentheses. This forces the interpreter to evaluate what is inside the parentheses, and the object literal is returned.

Lexical this

In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions, however, this is lexically bound. It means that it uses this from the code that contains the arrow function.

Before ES6 binding this would be required in this example to work. Otherwise, the default this would be undefined.

This cannot be bound to arrow functions, so it will go up in the scope hierarchy and use the value of this in the scope in which it was defined.

Classes

JavaScript classes are introduced in ES6 and they are a syntactical improvement of the existing prototype-based inheritance.

It can be said that classes in JavaScript are very similar to functions but there is one important difference. Functions are hoisted but Classes aren’t. This means that you need to declare the class before access to it. The body of a class is executed in strict mode.

So let’s see how a prototype is implemented and how a class is implemented.

The class Person contains

• a prototyped method named concatNameSurname()
• 2 getters functions get fullName() and get Gender()
• a setter function set Gender(g)
• a constructor: it is a special method for creating and initializing an object created with a class. This method is called when a class is instantiated using the new keyword. There can only be only one constructor method in a class. A syntax error will be thrown if the class contains more than one occurrence of a constructor method.

Static Methods

Classes allow us to define static methods by writing the keyword static. Static methods are called without instantiating their class. If you try to call from an instance of the class you will get an error.

Inheritance

Classes can be inherited. If you want to create a child class from another class you need to use the keyword extends in the class declaration. All methods and properties are going to be inherited but can be overridden in the child class.

• The super keyword is used to call the corresponding methods of the superclass. This is one advantage over prototype-based inheritance. In this example, the customer constructor uses the keyword super to refer to the constructor of person (the father class).
• Method sayHello() is inherited from person.
• Method allData() is overridden so it has two different implementations, one for person and another for customer.

Extended Parameter Handling

Spread operator: spread elements of an iterable collection (arrays or strings) into literal elements and function parameters

It allows an expression to be expanded in places where multiple elements/variables/arguments are expected.

You can expand an array, an object or a string using the spread operator.

Before ES6 if we need to convert the items of an array into the parameters of a function we have two choices.

Now we can use the spread operator (…) which is more readable.

Spread Operator: create copies of arrays or objects

• Create a copy of an array using the spread operator.

Something that is important to mention is that spread syntax effectively goes one level deep while copying an array.

• Create a copy of an object using spread operator

But as arrays, when copying an object using spread operator nested objects are only references.

Spread operator: creating arrays using the spread operator with strings.

Spread operator: merging arrays and objects

• arrays

• objects

Rest Operator

Rest syntax looks exactly like spread syntax but is used for destructuring arrays and objects. In a way, rest syntax is the opposite of spread syntax: spread ‘expands’ an array into its elements, while rest collects multiple elements and ‘condenses’ them into a single element.

Default parameters values

Before ECMAScript 6, sometimes when we pass undefined to a parameter because inside the function it was the logic to replace the undefined by the default value.

Now it is possible to define the default values of each parameter, next to them using the =. This prevents us from writing the assignment logic inside which makes our function shorter and more readable.

New built-in methods

New build in methods were introduced in ECMAScript 6. These new methods aim to simplify and standardize some familiar scenarios that developers encounter when working with JavaScript data types. Here is a list of them classified by types.

Array:

• Array.prototype.find(callback)
• Array.prototype.findIndex(callback)

String:

• string.prototype.startsWith(searchString, position)
• string.prototype.endsWith(searchString, length)
• string.prototype.includes(searchString, position)

Number

• Number.prototype.isNaN(value)

Math

• Math.trunc(n)
• Math.sign(n)

Let’s see how each of them work and provide some examples for better comprehension.

Array.prototype.find(callback): this method will iterate through an array and return the first element that causes the given callback to return true.

• It will take a callback function as a parameter.
• The callback function takes an object as a parameter (which will be the array[i] item) that should be evaluated in the function.
• The callback function should evaluate if the parameter matches the condition and return true or false.
• If there is no item evaluated as true in the callback condition, then the find method will return undefined

It is important to mention that array.find() is different from array.filter() since filter returns an array with all the items that cause the given callback to return true, while find() only returns the first occurrence.

Array.prototype.findIndex(callback): this method works similar to find, but instead of returning the object that causes the given callback to return true, it will return the index of the object

• It will take a callback function as a parameter.
• The callback function takes an object as a parameter (which will be the array[i] item) that should be evaluated in the function.
• The callback function should evaluate if the parameter matches the condition and return true or false.
• If there is no item evaluated as true in the callback condition, then the findIndex method will return -1

string.prototype.startsWith(searchString, position): this method determines whether or not a string starts with the string passed as a parameter or not.

• it is case sensitive.
• Position parameter is optional. It is the position in this string at which to begin searching for searchString by default is 0.
• Returns true if the string starts with the string passed as a parameter or false if not.

string.prototype.endsWith(searchString, length): this method determines whether or not a string ends with the string passed as a parameter or not.

• it is case sensitive.
• length parameter is optional. If provided it is used to cut the string at this position. If omitted, the default value is the length of the string
• Returns true if the string ends with the string passed as a parameter or false if not.

string.prototype.includes(searchString, position): This method lets you determine whether or not a string includes another string.

• it is case sensitive.
• Position parameter is optional. It is the position in this string at which to begin searching for searchString by default is 0.
• Returns true if the string contains the string passed as a parameter or false if not.

Number.prototype.isNaN(value): this method returns true if the value passed as a parameter is a Number and is NaN and false if not.

Math.trunc(n): Truncate a floating point number to its integral part, completely dropping the fractional part.

• trunc() is a static method of Math
• if the value passed as a parameter is not a number, JavaScript will try to convert it into a number. If it could be converted to a number, then it will return its integral part, else it will return NaN

Math.sign(n): this function static method of Math returns:

• 1 if the value passed as a parameter is positive.
• 0 if the value passed as a parameter is 0
• -0 if the value passed as a parameter is -0
• -1 if the value passed as a parameter is negative

As Math.trunc(), Math.sign() tries to convert the value passed as a parameter to a number if it is not a number.

In the following post I will explain Iterators and for…of operator, generators and promises. Stay tuned…

Source:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
• http://es6-features.org/
• https://en.wikipedia.org/wiki/ECMAScript
• https://app.pluralsight.com/library/courses/es6-the-right-parts/table-of-contents

Would you like to know more? Do you need our help? Contact Us!
www.quadiontech.com

Have you heard about ECMAScript 6? Find out what is new in JavaScript ES6. (Part 2) was originally published in Quadion Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.