What's the Meaning of "=≫" (An Arrow Formed from Equals & Greater Than) in JavaScript

What's the meaning of = (an arrow formed from equals & greater than) in JavaScript?

What It Is

This is an arrow function. Arrow functions are a short syntax, introduced by ECMAscript 6, that can be used similarly to the way you would use function expressions. In other words, you can often use them in place of expressions like function (foo) {...}. But they have some important differences. For example, they do not bind their own values of this (see below for discussion).

Arrow functions are part of the ECMAscript 6 specification. They are not yet supported in all browsers, but they are partially or fully supported in Node v. 4.0+ and in most modern browsers in use as of 2018. (I’ve included a partial list of supporting browsers below).

You can read more in the Mozilla documentation on arrow functions.

From the Mozilla documentation:

An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous. These function expressions are best suited for non-method functions and they can not be used as constructors.

A Note on How this Works in Arrow Functions

One of the most handy features of an arrow function is buried in the text above:

An arrow function... lexically binds the this value (does not bind its own this...)

What this means in simpler terms is that the arrow function retains the this value from its context and does not have its own this. A traditional function may bind its own this value, depending on how it is defined and called. This can require lots of gymnastics like self = this;, etc., to access or manipulate this from one function inside another function. For more info on this topic, see the explanation and examples in the Mozilla documentation.

Example Code

Example (also from the docs):

var a = [
"We're up all night 'til the sun",
"We're up all night to get some",
"We're up all night for good fun",
"We're up all night to get lucky"
];

// These two assignments are equivalent:

// Old-school:
var a2 = a.map(function(s){ return s.length });

// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );

// both a2 and a3 will be equal to [31, 30, 31, 31]


Notes on Compatibility

You can use arrow functions in Node, but browser support is spotty.

Browser support for this functionality has improved quite a bit, but it still is not widespread enough for most browser-based usages. As of December 12, 2017, it is supported in current versions of:

  • Chrome (v. 45+)
  • Firefox (v. 22+)
  • Edge (v. 12+)
  • Opera (v. 32+)
  • Android Browser (v. 47+)
  • Opera Mobile (v. 33+)
  • Chrome for Android (v. 47+)
  • Firefox for Android (v. 44+)
  • Safari (v. 10+)
  • iOS Safari (v. 10.2+)
  • Samsung Internet (v. 5+)
  • Baidu Browser (v. 7.12+)

Not supported in:

  • IE (through v. 11)
  • Opera Mini (through v. 8.0)
  • Blackberry Browser (through v. 10)
  • IE Mobile (through v. 11)
  • UC Browser for Android (through v. 11.4)
  • QQ (through v. 1.2)

You can find more (and more current) information at CanIUse.com (no affiliation).

What does it mean equal and greater-than sign (= ) in Javascript?

I was actually about to downvote this question, but googling the answer proved surprisingly difficult if you don't already know what its called. As you can see in the links in the comments, that's a fat arrow function (sometimes referred to as just an arrow function).

There are some confusing aspects of arrow functions, so I'll hit some highlights:

Normal functions have a this pointer set depending on the context: functions called with new have it set to the newly-created object, functions called as methods have it bound to the object the method was called from, its otherwise bound to undefined or the global object (depending on the 'strict mode' pragma), and can of course be set with Function.prototype.bind et al.

But arrow functions have no binding for the this pointer created by the runtime (nor can it be specified via Function.prototype.bind), meaning it gets lexically looked up through scope chain resolution just like any other var. The MDN article is at best slightly confusing on this point (see link above).

Additionally, arrow functions have an implicit return, the return value will automatically be the last evaluated expression in the function body.

Arrow functions have no arguments psuedo-array. You can use ES 6 rest parameters instead.

For functions of arity 1, the parens around the parameter may be omitted.

What does a fat arrow function followed by a closure do?

It returns an object. The parenthesis is to denote that this is an object not a block.

() => {return {hello: 'world' } } === () => ({hello: 'world'})

Why is my arrow function returning `undefined`?

Arrow functions support two different styles of bodies: expressions and blocks.

If a single expression is provided (e.g. a + b) without braces { } around it, that expression is automatically returned:

const add = (a, b) => a + b

If a block enclosed by { } is provided, it works like a regular function body and requires a dedicated return statement to return a value:

const add = (a, b) => {
return a + b
}

Single-expression bodies are often used to write simple functions in a concise way which execute one operation or condition, as in the following examples:

if (users.every(user => user.age >= 18)) { /* ... */ }

const emails = users.map(user => user.email)

const titleCased = string.replace(/\b\w/g, s => s.toUpperCase())

// in the following example, the return value is irrelevant
setTimeout(() => doStuff(1, 2, 3), 1000)

In most other cases, especially if you want to have multiple statements, loops or conditions in your function body, a block is used.

Note that you can have a function body spanning multiple lines even without a block if it is still a single expression, but if you would like to turn it into a block for readability reasons, you must not forget to add return (unless your function isn't supposed to return anything).

Now, this is the reason why your add function is returning undefined - it neither has a single-expression body (the { } make it a block) nor does it have any return statement in its body. So, what happens is that a + b is evaluated, but the result isn't used for anything - it is thrown away and execution continues, reaching the end of the function and returning without any return value since none was given, i.e. returning undefined.


In the React case, the problem is the same. You are embedding the return value of a .map call, which should be an array of further content to render, but because your callback is not returning any value, you are mapping the items to several undefined values and rendering that at the end.

There is another twist here though: you may often need multiple lines in the element(s) that you return from a function like a map callback, but you will find that neither of the following two options looks quite clean:

<ul>
{list.map(item => <li>
<a href="{item.url}">{item.name}</a>
</li>)}
</ul>

<ul>
{list.map(item => {
return <li>
<a href="{item.url}">{item.name}</a>
</li>
})}
</ul>

Instead, what is usually done is enclosing the expression in parentheses ( ). It is a still a single expression at the end, avoiding the need for an extra return statement, but is a lot nicer to work with:

<ul>
{list.map(item => (
<li>
<a href="{item.url}">{item.name}</a>
</li>
))}
</ul>

For more information about arrow functions in general, see here. To read about other differences between arrow functions and regular functions (such as different behavior of this), see here.



Related Topics



Leave a reply



Submit