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

Home /

Table of Contents

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.
Share The Tutorial With Your Friends
Twiter
Facebook
LinkedIn
Email
WhatsApp
Skype
Reddit
Other Recommended Article