Skip to main content

Javascript ECMAScript6 New Feature

Arrow functions 


I think that an arrow functions are one of the best features of ECMAScript 6, excluding class-es and OOP programming at all.
It has really very helpful and useful syntax for scripting language. So let’s check it out:

Syntax

    //Function with no parameters:
    () => { statements } ]

    //Function with single parameter:
    singleParam => { statements }

    //Function with one and more parameter:
    (param1, param2, …, paramN) => { statements }
   
    //Function with simple return statement:
    n => n*2

How did it look in ECMASript 5?

    //Function with no parameters:
    function() { statements }

    //Function with single parameter:
    function( singleParam ) { return statements }

    //Function with one and more parameter:
    function (param1, param2, …, paramN) { return statements }
   
    //Function with simple return statement:
    function(n){return n*2}

Use case

I love the syntax of arrow functions in ECMAScript 6! I always asked myself a question why do I need to write word ‘function’ all the time. And now I don’t have to.
Let’s see some examples:
    square = n=>n*n;
    square(5); //25
This is simple function that returns square of number passed as a parameter. Isn’t it pretty?
In ECMAScript 5 it should be written like this:
    function square(n){ return n*n }
But to understand where the new syntax is really helpful, let’s look at injected functions:
    //ECMAScript 6:
    list.map(item => item*2)
   
    //instead of ECMAScript 5:
    list.map(function(item){return item*2})
    //ECMAScript 6:
    {
        list.forEach(n => {
            if(n>0){
                list2.push(n)
            }
        })
    }
   
    //instead of ECMAScript 5:
    (function(){
        list.forEach(function(n){
            if(n>0){
                list2.push(n)
            }            
        })
    }()   
Don’t you see that ECMAScript 6 is more about program you wrote, not about syntax of it!
* In last example in ECMAScript 6 I used a block-scope, in ECMAScript 5 only function was block scoped. Read more about block-scopes in ECMAScript 6 here:


Comments

Post a Comment

Popular posts from this blog

Claims Class For security in .NET4.5 with C#

What is Claim ? A claim in the world of authentication and authorization can be defined as a statement about an entity, typically a user. A claim can be very fine grained: Ram is an admin Ram’s email address is Ram@yahoo.com Ram lives in Mumbai Tom’s allowed to view sales figures between 2009 and 2012 Tom’s allowed to wipe out the universe Claims originate from a trusted entity other than the one that is being described. This means that it is not enough that Tom says that he is an administrator. If your company’s intranet runs on Windows then Tom will most likely figure in Active Directory/Email server/Sales authorisation system and it will be these systems that will hold these claims about Tom.  The idea is that if a trusted entity such as AD tells us things about Tom then we believe them a lot more than if Tom himself comes with the same claims . This external trusted entity is called an  Issuer . The KEY in the key-value pairs is called a  Typ...
1 comment
Read more

Javascript ECMAScript6 New Feature

Extended Parameter Handling Another nice set of features introduced in ES6 is the extended parameter handling. These provide a very nice set of idioms that bring us very close to languages like C# or Java. Default parameter values and optional parameters Default parameters allow your functions to have optional arguments without needing to check arguments.length or check for undefined. Let’s take a look at what that might look like: let greet = (msg = 'hello', name = 'world') => {   console.log(msg,name); } greet(); greet('hey'); Looking at the preceding code, you can see that we are using the new fat arrow (=>) syntax as well as the new let keyword. Neither of those are necessary for this example, but I added it to give you more exposure to the new syntax. Running the preceding code produces the following result: hello world hey world  Rest parameter Handling a function with a variable number of arguments is always t...
Post a Comment
Read more

What's New in Visual Studio 2017 RC

What's  New in Visual Studio 2017 RC We have many new as well as improved features and experiences in Visual Studio 2017  to make you more productive at things you do every day IntelliSense  IntelliSense comes enhanced with added filtering that makes it much easier to use . Filtering makes long lists much more manageable. With features like Camel Case search you only need to type in the 2 letters in capitals for IntelliSense to appropriately filter results for you that match 2 different words with those letters capitalized. IntelliSense is also smarter now; it will select the best matching result from the list instead of simply picking the top result. Navigation Navigation . Navigate To is much more powerful with better filtering and preview.  We have also fixed Find All Reference by adding color, grouping, and a peek preview in the Find All Ref window. Live editing One of the most useful features is l...
Post a Comment
Read more