What does "=>" mean in javascript when used with export default?

Question

I am analyzing some angular js source code of angular-file-upload plugin and I have some problems trying to understand some code.

I know that export is part of the new ES6 standards and it used to export functions and objects from a given file (or module).

But the following syntax is a bit weird me :

let {
    copy,
    extend,
    forEach,
    isObject,
    isNumber,
    isDefined,
    isArray,
    element
    } = angular;


    export default (fileUploaderOptions, $rootScope, $http, $window, 
                      FileLikeObject, FileItem) => {


        let {
            File,
            FormData
            } = $window;


        class FileUploader { 

          // class implemention.... 
        }

        return FileUploader;
    }

What is the use of the => operator in this statement?

I couldn't figure out the operator name actually, I tried some research... — KAD, Sep 16 '15 at 20:39

score 17 · Accepted Answer · answered Sep 16 '15 at 20:38

17

This is an arrow function (or fat arrow function):

(a, b, c) => { /* ... */ }

Is (almost) equivalent to:

function(a, b, c) { /* ... */ }

The only difference between arrow functions and functions declared with function is that this has lexical binding in arrow functions instead of the confused morass of binding in regular functions.

answered Sep 16 '15 at 20:38

Ethan Brown

26,892
4
80
92

5

There is another thing it does. If you do `(a, b, c) => a + b + c` it's equivalent to `function (a, b, c) { return a + b + c; }`. When not using braces, if it has only one command, the result of it is returned. – Buzinas Sep 16 '15 at 20:46
Also, there's no "free" `arguments` variable pointing to an object of arguments. – Sep 16 '15 at 20:46
Good point, Buzinas! It seems so obvious to me that I forgot to point it out. Will update my answer – Ethan Brown Sep 16 '15 at 20:47
Thank you guys.. this is really useful.. – KAD Sep 16 '15 at 20:49
Also true, squint: I consider that less interesting, though, because the spread operator is making the `arguments` operator redundant. But as far as I know, you're correct. – Ethan Brown Sep 16 '15 at 20:50
Confused morass? Well, now it's even more "confusing" as you need to take the call of your parent function (which still has its `this` with usual rules) into account. – Bergi Sep 16 '15 at 21:39
I think consistency is less confusing; for arrow functions `this` follows the same scoping rules as variables. Also, the behavior of binding to the global scope of called from within a function UNLESS I'm strict mode, in which case it is null...madness. You could argue it introduces an inconsistency because arrow functions behave differently than `function` functions, and that argument carries some weight.... – Ethan Brown Sep 16 '15 at 21:44

Jon Snow · Answer 2 · 2015-09-16T20:48:32.960

Its an ES6 arrow function. In your case, it accounts to something like:

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var _angular = angular;
var copy = _angular.copy;
var extend = _angular.extend;
var forEach = _angular.forEach;
var isObject = _angular.isObject;
var isNumber = _angular.isNumber;
var isDefined = _angular.isDefined;
var isArray = _angular.isArray;
var element = _angular.element;

exports["default"] = function (fileUploaderOptions, $rootScope, $http, $window, FileLikeObject, FileItem) {
    var File = $window.File;
    var FormData = $window.FormData;

    var FileUploader = function FileUploader() {
        _classCallCheck(this, FileUploader);
    };

    // class implemention....

    return FileUploader;
};

module.exports = exports["default"];

Note that this was compiled by Babel.

What does "=>" mean in javascript when used with export default?

2 Answers2