What does () => {} mean in gulpfile.js

Question

I'm in the learning path of js, and just started using the yeoman generators. And I use gulp for the pre-processing and other stuffs. When I was going through the gulpfile.js, I found this block of code.

gulp.task('serve', ['styles', 'html', 'watch'], () => {
    browserSync({
        notify: false,
        port: 9000,
        server: {
            baseDir: 'app'
        }
    })
});

I can understand that when we execute gulp-serve, it runs styles, html and watch task and opens a development server in the port 9000.

But I don't understand what does this () => means.

Will be very grateful if someone can tell me what does that mean.

Thanks in advance.

its an anonymous function, () => {} can act as an substitute for function(){} — Shrikantha Budya, Apr 22 '17 at 13:39
@ShrikanthBuds: [The aren't always anonymous](http://stackoverflow.com/a/37488652/157247). — T.J. Crowder, Apr 22 '17 at 13:41
my mistake, I always used them as an anonymous function so I mistook them as anonymous functions — Shrikantha Budya, Apr 22 '17 at 13:46

score 5 · Accepted Answer · answered Apr 22 '17 at 13:38

They are called Arrow functions

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

Mozilla Docs

In simple words, its a substitute for function(){} except for this context

This is how your code would look:

gulp.task('serve', ['styles', 'html', 'watch'], function() {
    browserSync({
        notify: false,
        port: 9000,
        server: {
            baseDir: 'app'
        }
    })
});

(An anonymous function passed in as third argument)

It's an ES6 Feature anyways, you can explore more features like this in this link :P

Wow! Thanks. That made things clear :) – Unknown User Apr 22 '17 at 13:42 — Unknown User, Apr 22 '17 at 13:42
Nice to know :) Feel free to accept it – Tilak Madichetti Apr 22 '17 at 13:43 — Tilak Madichetti, Apr 22 '17 at 13:43

score 1 · Answer 2 · answered Apr 22 '17 at 13:37

1

It is defining an inline function that takes no params. The body of the function is in the {}. This new function is then passed as a callback to the task() function.

answered Apr 22 '17 at 13:37

bhspencer

13,086
5
35
44

score 1 · Answer 3 · answered Apr 22 '17 at 13:39

ES6 Arrow function

Its an anonymous function. The code you have could be

gulp.task('serve', ['styles', 'html', 'watch'], function () { browserSync({ notify: false, port: 9000, server: { baseDir: 'app' } }) });

The awesome thing about arrow functions is that you can still use this in context. you dont have to define something like let self = this; outside of the function.

What does () => {} mean in gulpfile.js

3 Answers3

ES6 Arrow function