Post
Ask Question

Voice of a Developer: JavaScript ECMAScript 6 Features v2 - Part Twenty

Introduction

 
JavaScript is a language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.
 
Before moving further let us look at the previous articles of the series:
In the last article, we learned about ECMAScript 6 features and now we will learn some more cool features.
  1. Default values
     
    We can add default values to function expressions. In ES5, the default value is undefined if the value is not passed via argument. Example ES5.
    1. function coordinates(x, y)    
    2. {    
    3. console.log(x);    
    4. console.log(y);    
    5. }    
    6. coordinates(10); // 10 undefined   
    In ES6 we will change it to,
    1. function coordinates(x=10, y=20)    
    2. {    
    3. console.log(x);    
    4. console.log(y);    
    5. }    
    6. coordinates(10); //10 20 
  2. Modules
     
    This is the feature I like the most! We need to define each module in a file then export keyword to export. On the receiving side, we use import keyword to import. This modular approach is a really good solution for code reusability and abstraction.
     
    Modules are designed around the export & import keywords.
     
    code
     
  3. Classes
     
    This is a favorite keyword of OOPS developers but JavaScript is prototypal based and function is a first-class citizen in JavaScript. Introducing classes in ES6 is debatable and many people have notion that it is not in favor of JavaScript prototypal nature.
     
    Leaving aside, we can understand what lies in this feature.
     
    Like OOPS programming languages, classes in ES6 are revolving around class & constructor. Example,
    1. class Automobile    
    2. {    
    3.     constructor(type)     
    4.     {    
    5.         this.type = 'bike';    
    6.         this.engine = '150 CC';    
    7.     }    
    8.     getEngine()     
    9.     {    
    10.         return this.engine;    
    11.     }    
    12. }    
    13. var vehicle = new Automobile('Honda');    
    14. console.log(vehicle.getEngine()); // 150 CC   
    Inheritance
     
    Use extends keyword for an inheritance to inherit from the base class. Example
    1. class LogView extends View     
    2. {    
    3.     render()     
    4.     {    
    5.         var compiled = super.render();    
    6.         console.log(compiled);    
    7.     }    
    8. }    
    9. class LogView extends View {}   
  4. Multi-line Strings
     
    It’s a sugar syntax to cut long
    1. var s = 'hello '    
    2. + 'world';    
    3. console.log(s);   

Summary

 
You can try these awesome features of ES6. Please share comments/ feedback.


Similar Articles