New JavaScript Elements for Basic Programming

This post contains a description of the most relevant new JavaScript language components, which are useful for a wide range of simple programming tasks.

We can see many articles and blog posts about the latest language elements that ECMAScript from 2015 afterward, added to JavaScript. Typically, these papers introduced a large number of new technologies without regard for their relevance, and sometimes with artificial programming examples that do not help to demonstrate the possible use of a new function, unless you are not a beginner.

Here, we discuss the most important new JS elements in this article, which are generally useful for all forms of basic programming tasks. It doesn’t matter if you are a pro, knowing these features will make you a pro. Let’s jump into the content.

Variable Declarations in Block-Scope with ‘let’ and ‘const’

ES5 did not permit declaring variables in the scope of a block denoted by a pair of curly braces, { block }, or specified by a for a loop. Rather, all variables declared with var have either a function scope or a global scope, even if they are declared inside a block. Block-scope variable declarations with ‘let’ and ‘const’ are a modern feature that allows declaring local variables with a sharper scope, which helps prevent unnecessary variable duplications and contributes to a more flexible code.

There is only a single meaning variation Between these ‘let’ and ‘const’. Variables declared with const are eternal or fixed, and hence constant, while variables declared with let are not. For all variables that aren’t supposed to adjust their values, it’s best to use ‘const’. Otherwise, or if this is uncertain, declare the variable if it is inside a block-scoped with ‘let’, or if it is a global or function-scoped variable with ‘var’.

Arrow Functions =>

Arrow functions were added in the ES6 formation of javaScript. We can write shorter function syntax using arrow functions. If the function does have only one statement which calculates the value, you are allowed to erase the brackets with the return keyword. You move parameters within the parentheses if you have any. In addition, if there is just one parameter, you are allowed to omit the parentheses.

Example 1

This is how to did before the ES6.

let evenNumbers= [0,2,4,6,8];
evenNumbers.map( function (val) {
 return val+1;
})

With the user of the arrow function, we can write the same code as below.

let oddNumbers = evenNumbers.map( val => val+1);

The output of both code segments will be [1,3,5,7,9].

Use of ‘this’ keyword with arrow functions

The way arrow functions do ‘this’ differs from how regular functions handle it. In short, there is no binding of this with arrow functions. ‘this’ keyword was used in regular functions to denote the object that named as a function, which may be a window, a text, a button, or something else. A ‘this’ keyword always represents the object that described the arrow function, in its usages.

Example 2

This is how to did before the ES6.

this.numbers = [1,3,5,8,10,12,15,17];
this.fives = [];
this.numbers.forEach( function (val) {
 if (val % 5 === 0)
   this.fives.push(val);
}, this)

With the user of the arrow function, we can write the same code as below.

this.nums.forEach( val => {
 if (val % 5 === 0)
  this.fives.push(v);
});

The output of both code segments will be [5,10,15].

Iterable Objects in For-Of Loops

Iterable objects contain Strings, arrays, array-like objects, some instances of datatype objects, TypedArrays, Maps, Sets, and user-defined iterables.

Consider the following example below.

const Elements = document.getElementsByTagName(“div”);
for (let devElements of Elements ) {
 console.log(devElements.id);
}

As a counter variable isn’t required, a for-of loop is often more convenient than a for a loop. A for-of loop, as compared to a forEach loop, allows iterating over HTMLCollections and can even be closed with a break.

Template Literals

Instead of double or single quotations, literals are enclosed by backtick symbols (such as `…`), allowing for a simple syntax for (In most cases for multi-line) strings resulting from a collection of static text parts and variables or expressions.

Consider the following example:

const classNames = “card important”;
const name = “Hearts”;
const htmlTemplate = `<div class=”${classNames}”>
<p>This is a ${name}!</p>
</div>`

The Spread Operator …

This makes for the following:

• the slots of a Javascript object in cases where name-value pairs are expected,
• the components of an iterable collection in instances where arguments for function calls either array elements are expected.

Consider the following example:

let numbers = [3,4,5],
// cloning an array
let numbersClone = […numbers];
// cloning an object
let article = {title:”New JavaScript Elements for Basic Programming”};
let articleClone = {…article};