JavaScript

Introduction

The term “destruction” means “extracting” data from a data structure (object or array) and creating new smaller structures that are assigned values based on the “extracted” data.
Before ES2015, it was necessary to write code that would perform destructuring, but luckily with the new JavaScript standard came a syntax that allows the JavaScript compiler to automatically perform this work for us. This syntax is called “destructuring assignment”, and it does exactly what the name says, it assigns values from a structure to new variables.

Example

“Manual” destructuring

New ES6 syntax

NOTE: [a,b,c] from the previous example new syntax NOT AN ARRAY ! ! !
When square brackets (or curly braces) are to the left of the equals sign, it indicates a variable assignment pattern. They allow us to define to the JavaScript compiler how and under which variable name to store destructured values.

Read more

Symbol

Features

Symbol is a new data type that came with the ES2015 standard. Symbol represents a unique token. A symbol is created using the function Symbol().

A symbol can also be created with a label, which is passed to it as a string. That label does not affect the value of the symbol, but is useful for debugging and can be displayed using the toString() method on the symbol.

Purpose: Object property key

Mostly “symbol” is used as the key of an object property, when we want to protect that property. When using “symbol” as the key of an object’s property, it is necessary to use square brackets to access the property (the so-called “bracket notation”). Such properties have the following characteristics:

• Unique Property
• The property cannot be enumerated through a “for…in” loop
• The property is ignored by the methods: Object.keys(), Object.getOwnPropertyNames() and JSON.stringify()

It should be noted that the privacy of this property is not 100%, because there is still a way to access the property via the methods “.getOwnPropertySymbols()” and .ownKeys():

Strings are iterable collections

String data type became an iterable collection of data from the ES2015 standard. “iterables”. Strings are now accessible by all mechanisms that require the collection to have the “iterable protocol” implemented. So now we can use “for..of” over strings:

or even use the spread operator which also requires an iterable collection to create an array:

See more about this in “Iterators and the Iterable Protocol”

Template literals

Template literals (eng. “template literals”) are character strings (so-called strings) with built-in expressions. They are marked with backtick.
“Template literal” represents a new improved way of string concatenation, which is more transparent and easier to work with. Expressions are allowed to be embedded in the template literal, if they are marked with a dollar sign and curly brackets. The template includes the so-called ” “preset format” while “literal” represents a value that is written exactly as it is intended to be interpreted. Therefore, every newline, extra space (tab) becomes part of that string
Template literals combine the following characteristics:

• String interpolation
  
  let first = 'Pera'; let last = 'Perić'; console.log(`Hello ${first} ${last}!`); // Returns: Hi Pera Perić!

  1 2 3

  let first = 'Pera'; let last = 'Perić'; console.log(`Hello ${first} ${last}!`); // Returns: Hi Pera Perić!

• Multi-line string literals so called. “preset format”, ie. how it is written in the code is how it is interpreted at the output.
  
  let multiLine = `This is it some string which is defined in multiple lines`; // Output: // This is it // some string // which is defined // in multiple lines

  1 2 3 4 5 6 7 8 9 10

  let multiLine = `This is it some string     which is defined in multiple lines`;   // Output: // This is it // some string //    which is defined // in multiple lines

Example

Example done with ES5 and string concatenation:

New approach with template literals:

Read more

Syntax

Arrow function or so-called “fat arrow” is a new syntax for writing JavaScript functions. The most important feature of the arrow function is its shorter syntax, which implies better visibility. Depending on the number of parameters and the body of the function, the syntax has several different ways of writing the code:.

a) Syntax appearance when the function body has several expressions

In this case, the syntax of the arrow function is the most similar to an ordinary function, and the only difference is obtained by removing the keyword “function” and adding “fat arrow”. This syntax is used when there are multiple expressions in the function body:

b) Syntax layout when the function body has one expression

If the body has only one expression that is returned with “return” then we can drop both the curly braces and the reserved word “return”:

Example

c) Appearance of the syntax when no parameters are passed to the function

If no parameters are passed to the function then there must be empty parentheses () in the section reserved for function parameters

d) Appearance of the syntax when only one parameter is passed to the function

If only one parameter is passed to the function, then we can remove the brackets around the parameters:

Example

The benefit of the new syntax is even better seen when we use the new methods for iterating over arrays:

Example

e) Syntax layout when returning “Object Literal”

Returning an object literal with ES5 syntax looks like this:

According to the current rules, the previous task with the arrow function would look like this:

However, this syntax is not good, and the function returns undefined, because the parser parses the curly braces as the body of the function and not as an object literal. Therefore, according to him, the syntax with a colon in the body of the function is not good. In order for the parser to recognize that it is ES6 syntax, it is necessary to put ordinary brackets around the object literal:

Read more

Array.from()

Using the method “from()” we can make an array from “array-like” or “iterable”:

Array.prototype.find()

This method returns the first member of the array that satisfies the condition (the condition within the callback function). The method passes three parameters to the callback function:

• string member value
• index of array member
• an array (on which the method is executed)

In addition to the callback function, the argument thisArg can (optionally) be passed, which defines what the reserved word this will point to within the callback function.

Example

The findIndex() method does a similar thing, except that instead of the first element that met the condition, it returns its index in the array.