Name or term of javascript syntax for function without function text?

Question

I've been using a new method that I just learned for keeping outside scope inside of another function but I can't remember the term for the syntax used. Below is an example of how it works:

Api.get().then( (data) => {
   console.log('do something with data', data);
}, ( e ) {
   console.log('Error: ', e );
});

Basically, its a callback function but what is the term or name of this type of syntax. The reason I like using this is because you can still reference this and its values and methods, whereas using function( data ) would lose this context. I want to know the name or term of this syntax because it doesn't seem to be supported by iphone or safari and I would like to look further into support and documentation on support for this method.

it is arrow function for the first one. the second one is a syntax error. you need (e) => {} — eltonkamami
– eltonkamami, Commented Jul 22, 2016 at 5:12
@torazaburo fat arrow function to be correct. Some call it incorrectly lambda — Bálint
– Bálint, Commented Jul 22, 2016 at 5:12
Thanks @torazaburo I believe you are correct, Mozilla Developer Network refers to it as arrow functions developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. I knew it wasn't support just wanted to figure out what it was called so I could find out what browsers and versions were supporting it. — Tom Bird
– Tom Bird, Commented Jul 22, 2016 at 5:16
You can still use arrow functions to program while making your code compatible with older browsers, see my answer below for more on this :) — sgarcia.dev
– sgarcia.dev, Commented Jul 22, 2016 at 5:21

sgarcia.dev · Accepted Answer · 2016-07-22 11:44:57Z

2

It's an arrow function and it's part of the latest 6th Edition of the ECMAScript standard (Also called ECMAScript 2015 since it was released in 2015). It's not as well supported by many browsers as you can see here.

You can use them in older browsers using something called a transpiler, which in essence all it does is convert ECMAScript 6 code (which isn't all that well supported) into more compatible ECMAScript 5 code. There are many, but Babel is the most popular one. You can try it out here and watch how arrow functions transform into compatible, ECMAScript 5 code that works across all browsers.

The reason I like using this is because you can still reference this and its values and methods

You can get the same results that arrow functions give you using bind(). Try this:

Api.get().then(function(data) {
   console.log('do something with data', data);
}.bind(this), function(e) {
   console.log('Error: ', e );
}.bind(this));

What bind() does is it creates a new function that sets whatever object you send to it as the first parameter, to this. This way you can still get access to the current scope you are working on. You can read more about bind() here.

I hope this answers your question.

edited Jul 22, 2016 at 11:44

answered Jul 22, 2016 at 5:20

sgarcia.dev

6,22014 gold badges53 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Patrick Roberts Over a year ago

Well to be fair, in this case, the context isn't even used, so bind is unecessary. But you have the right idea.

sgarcia.dev Over a year ago

I'm aware the context isn't used, but Tom specifically mentioned his main reason for using arrow functions is that he can use the this in the current lexical scope. This is why I suggested the use of bind().

Tom Bird Over a year ago

Thank you for this, you answered my question in its entirety and within the context of what I was asking!!! I appreciate the clarification which was just what I was looking for!

Nina Scholz Over a year ago

function(data) => { looks not valid.

Collectives™ on Stack Overflow

Name or term of javascript syntax for function without function text?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related