From the beginning, the arrow was part of JavaScript. In the first JavaScript, it is recommended to wrap inline script code in HTML comments, which prevents browsers that do not support JavaScript to display your code as plaintext. You may have written the following code:
<script language="javascript"> <!-- = "brown"; // red // --> </script> <script language="javascript"> <!-- = "brown"; // red // --> </script>
Ancient browsers will see two unsupported tags and a comment that will only be parsed into JavaScript code by new browsers that support JavaScript.
To support this weird feature, the browser's JavaScript engine uses <!-- as the beginning of a single-line comment. This is no joke. It has always been part of the language and is still available today, not only in the first line of the <script> tag, but in any part of the JavaScript code, and it can even be used in Node.
Coincidentally, this style of comments was standardized for the first time in ES6. But that's not the arrow we'll talk about.
--> also represents a single-line comment. Unlike HTML, in HTML, the part before --> is the comment content, while in JavaScript, the line after --> is the comment.
Only when --> appears at the beginning of a line does it mean that the arrow is a comment, because in other cases --> is an operator (goes to).
function countdown(n) {
while (n-->0) // "n goes to zero"
alert(n);
blastoff();
}
function countdown(n) {
while (n-->0) // "n goes to zero"
alert(n);
blastoff();
}
The above code is really possible. The loop runs until n is 0, which is not a new feature of ES6, but it is very misleading in combination with the features we are familiar with. Can you figure out how the above code runs? You can find the corresponding answers on .
Of course there is another arrow, which is the operator <=. Maybe you can find a place to use the arrow, but we still stop and look at an arrow that we have never seen before:
- <!-- Single line comment
- --> goes to operator
- <= Less than or equal to operator
- => ???
So, what does => mean? This is the topic that will be discussed in this article.
First, let’s talk about functions.
Function expressions everywhere
An interesting feature of JavaScript is that any time you need a function you can easily create them.
For example, bind a click event for a button:
$("#confetti-btn").click(
$("#confetti-btn").click(
jQuery's .click() method requires a function as a parameter, and we can easily create a function on the spot:
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
Now for us, it is the most natural thing to write such code. But before JavaScript became popular, this style of code still seemed a bit strange because there was no such feature in other languages. In 1958, Lisp had function expressions, also called lambda functions, but this feature was not available in C++, Python, C#, and Java that have existed for many years.
Now, these four languages have lambda expressions, and new languages generally have lambda expressions built-in. JavaScript now supports this feature, thanks to developers of libraries that rely heavily on lambda expressions, which has driven the widespread adoption of this feature.
Compared to several other languages, JavaScript's syntax is slightly longer:
// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java
// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java
Arrow function
ES6 introduces a new syntax to write functions:
// ES5
var selected = (function (job) {
return ();
});
// ES6
var selected = (job => ());
// ES5
var selected = (function (job) {
return ();
});
// ES6
var selected = (job => ());
When you need a function with only one parameter, the syntax of the arrow function can be simplified to Identifier => Expression, directly omitting the function and return keywords, and the brackets and ending semicolons are also omitted at the same time.
To write a function with multiple (or no parameters, or Rest parameters and parameter default values, or deconstructed parameters) parameters, you need to enclose the parameters in brackets:
// ES5
var total = (function (a, b) {
return a + b;
}, 0);
// ES6
var total = ((a, b) => a + b, 0);
// ES5
var total = (function (a, b) {
return a + b;
}, 0);
// ES6
var total = ((a, b) => a + b, 0);
Arrow functions can also be used perfectly with some tool function libraries, such as and Immutable. In fact, all examples in the Immutable documentation are written in ES6, and many of them have used arrow functions.
In addition to using an expression, the function body can also contain a statement block, recalling the examples we mentioned before:
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
Here is the way to write the arrow function:
// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});
It should be noted that the arrow function using a statement block does not automatically return a value, and it must be explicitly used to return a value.
There is also a piece of advice, when using arrow functions to return an object, always use brackets to enclose the returned object:
// create a new empty object for each puppy to play with
var chewToys = (puppy => {}); // BUG!
var chewToys = (puppy => ({})); // ok
// create a new empty object for each puppy to play with
var chewToys = (puppy => {}); // BUG!
var chewToys = (puppy => ({})); // ok
Because an empty object {} looks exactly the same as an empty statement block {}, ES6 will always treat { immediately after => as the beginning of a statement block, rather than the beginning of an object, then puppy => {} is parsed into an arrow function without a function body, and the return value is undefined.