Javascript Advanced: A List of the Features of ES6 – Part I

ECMAScript 6 (ES6)

The ECMAScript 2023 Language is defined by this Ecma Standard. The ECMAScript Language Specification is in its fourteenth version. Since the first version was published in 1997, ECMAScript has evolved to become one of the world’s most frequently used general-purpose programming languages. It is best recognized as the language used in web browsers, but it is also widely used in server and embedded applications.

ECMAScript is built on numerous technologies, the most well-known of which are JavaScript (Netscape) and JScript (Microsoft). Brendan Eich created the language at Netscape, and it originally debuted in the company’s Navigator 2.0 browser. It has appeared in all future Netscape browsers as well as all Microsoft browsers beginning with Internet Explorer 3.0.

The most recent version of the ECMAScript standard is ECMAScript 6, commonly known as ECMAScript 2015. ES6 is a major upgrade to the language, and it is the first version since ES5 was standardized in 2009. These functionalities are currently being implemented in major JavaScript engines.

The ECMAScript 6 language is fully specified in the ES6 standard.

ES6 Features

ES6 includes the following new features:

1. arrows
2. classes
3. enhanced object literals
4. template strings
5. destructuring
6. default, rest & spread
7. let & const
8. iterators & for..of
9. generators
10. Unicode
11. modules
12. module loaders
13. map, set, weakmap & weakset
14. proxies
15. symbols
16. subclassable built-ins
17. promises
18. math, number, string, array & object APIs
19. binary and octal literals
20. reflect API
21. tail calls

ES6 Features Description – Part I

Arrows

Arrows are a type of function shorthand that uses the => syntax. They are syntactically equivalent to analogous features in C#, Java 8, and CoffeeScript. They support both statement block bodies and expression bodies that return the expression’s value. Unlike functions, arrows have the same lexical this as the code around them.

Example:

 
list = [1,2,3,4,5,6,7,8,9,10]
factor_five = []
 
var nums = list.map(v => v + 1);
var odds = list.map((v, i) => v + i);
var pairs = list.map(v => ({even: 2*v, odd: 2*v+1 }));
 
console.log(nums)
console.log('----------------')
console.log(odds)
console.log('----------------')
console.log(pairs)
console.log('----------------')
 
nums.forEach(v => {
   if (v % 5 === 0)
   factor_five.push(v);
});
 
console.log(factor_five)
console.log('----------------')
 
var man = {
 _name: "Tuhin",
 _friends: ['Tarek', 'Tondra', 'Zahid'],
 printFriends() {
   this._friends.forEach(f =>
     console.log(this._name + " knows " + f));
 }
}
 
man.printFriends()
 

Output:

 
[
 2, 3, 4,  5,  6,
 7, 8, 9, 10, 11
]
----------------
[
  1,  3,  5,  7,  9,
 11, 13, 15, 17, 19
]
----------------
[
 { even: 2, odd: 3 },
 { even: 4, odd: 5 },
 { even: 6, odd: 7 },
 { even: 8, odd: 9 },
 { even: 10, odd: 11 },
 { even: 12, odd: 13 },
 { even: 14, odd: 15 },
 { even: 16, odd: 17 },
 { even: 18, odd: 19 },
 { even: 20, odd: 21 }
]
----------------
[ 5, 10 ]
----------------
Tuhin knows Tareq
Tuhin knows Tondra
Tuhin knows Zahid

Classes

ES6 classes are only an extension of the prototype-based OO design. Having a single accessible declarative form simplifies the usage of class patterns and supports interoperability. Prototype-based inheritance, super calls, instance, and static methods, and constructors are all supported by classes.

Example:

class Coordinates {
   constructor(x, y) {
     this.x = x;
     this.y = y;
   }
   static pointName = "Between two Points in the cartesian Coordinate system.";
   static distance(a, b) {
     const dx = a.x - b.x;
     const dy = a.y - b.y;
      return Math.hypot(dx, dy);
   }
 }
 const p1 = new Coordinates(5, 5);
 const p2 = new Coordinates(10, 10);
 console.log(Coordinates.pointName);
 console.log('Distance:', Coordinates.distance(p1, p2), 'Unit');

Output:

Between two Points in the cartesian Coordinate system.
Distance: 7.0710678118654755 Unit

Enhanced Object Literals

Setting the prototype upon creation, shorthand for foo: foo assignments, creating methods, making super calls, and computing property names using expressions are all supported by object literals. Together, these bring object literals and class declarations closer, giving the object-based design some of the same benefits.

Example:

const expertise = 'Javascript';
 
function skillType(name) {
 return name === 'Java' ? name : `Sorry, I'm not used to in ${name}.`;
}
 
const skillSet = { myExpertise: 'Web Assembly', getExpertise: skillType('Python'), special: expertise };
 
console.log(skillSet.myExpertise);  
console.log(skillSet.getExpertise); 
console.log(skillSet.special);
 
const testObject = {
   '': 'An empty string',
   '!': 'Bang!'
 }
 
console.log(testObject['']); 
console.log(testObject['!']);

Output:

Web Assembly
Sorry, I'm not used to in Python.
Javascript
An empty string
Bang!

Template Strings

Template strings serve as syntactic sugar for creating strings. This is analogous to string interpolation functionality in Perl, Python, and other programming languages. A tag can be added as an option to allow the string creation to be adjusted, avoiding injection attacks and generating higher-level data structures from string contents.

Example:

// Normal String using "..." or '...'
const str = 'Javascript is Awesome';
console.log(str)
 
// Template String literals by using `...`
const str2 = `Javascript is Awesome`
console.log(str2)
 
const str3 = `Python and ${str2}`;
console.log(str3)
 
 
 
const person = "Karim";
const age = 22;
 
function myTag(strings, personExp, ageExp) {
 const str0 = strings[0];
 const str1 = strings[1];
 const str2 = strings[2];
 
 const ageStr = ageExp > 99 ? "centenarian" : "youngster";
 
 return `${str0}${personExp}${str1}${ageStr}${str2}`;
}
 
const output = myTag`That ${person} is a ${age}.`;
 
console.log(output);
 

Output:

Javascript is Awesome
Javascript is Awesome
Python and Javascript is Awesome
That Karim is a youngster.