I study JavaScript, I met on Wikipedia example of describing multidimensional arrays
the code is like this:
// Create a two-dimensional array of numbers:
var array = [
[11, 12, 13, 14, 15, 16], // First array line
[21, 22, 23, 24, 25, 26], // Second
[31, 32, 33, 34, 35, 36] // Third
];
// Outputting the array to the console:
array.forEach ((subArray) = & gt; {// For each sub-array,
subArray.forEach ((item) = & gt; {// for each of its items,
console.log (item); // - output this element to the console.
});
});
Question: what does the operator = & gt; mean (is it an operator at all)?
I am reading D. Flanagan’s “JavaScript. A Detailed Guide”, this operator does not appear in the text, I could not find a description on the network either.
Answer 1, authority 100%
This operator is called an arrow function. Introduced since ECMA2015.
https://developer.mozilla.org/en/docs/Web / JavaScript / Reference / Functions / Arrow_functions
Arrow functions help to significantly reduce the code, because
var a = a.map (s = & gt; s.length);
looks much better than
var a = a.map (function (s) {return s.length});
Arrow functions solve another painful JavaScript problem: the need to pass this to the function execution context. Each function has its own context, so you either have to assign this
to a variable:
var that = this;
var filter1 = function () {
// this! = that
return that.visible;
};
Or use bind
to bind the context:
var filter1 = (function () {
return this.visible;
}). bind (this);
With an arrow function, everything is much simpler and more compact, because it does not create its own context this
:
var filter1 = () = & gt; this.visible;
Answer 2, authority 42%
() = & gt; {}
is an arrow function. In fact, this is an analogue of the usual anonymous function (function () {}
), but with one important difference : this in an arrow function indicates the context in which this function is defined, in while in a normal anonymous function, this points to the “object before point”.
It is enough to compare the 2 outputs of the following script:
let Namespace = {
a: function () {
return this;
},
b: () = & gt; {
return this;
},
c: {
a: function () {
return this;
},
b: () = & gt; {
return this;
}
}
}
console.log (Namespace.a (), Namespace.b ());
console.log (Namespace.c.a (), Namespace.c.b ());
The first console.log ()
will print the Namespace
object first, and then the window
object. The second console.log ()
will first output the Namespace.c
object (the same “object before point”), and then again the window
object (because as arrow functions in both cases are not defined inside any function, but directly in window
, even though they are inside the Namespace
(or Namespace. c
in the second case)).
This property of arrow functions is extremely useful when using the functional OOP style:
function ClassName () {
function privateMethod () {// *
console.log (this);
}
this.publicMethod = function () {
privateMethod ();
}
}
let instance = new ClassName ();
instance.publicMethod ();
Answer 3, authority 37%
This is a new (ECMAScript2015
) kind of writing functions.
We read the description here , specification here , by googling we find a bunch of examples to study like this , for example this .
In short, this, of course, is less bukaf to write, it does not have its own this
, arguments
and something else. Ideal for callback
, the anguish of closure from loss of context in the past. You already have an example of work, I will not give it.
Answer 4, authority 21%
This is an arrow function https: //developer.mozilla. org / ru / docs / Web / JavaScript / Reference / Functions / Arrow_functions
Here’s some more information stackoverflow.com
// Basic syntax:
(param1, param2, paramN) = & gt; {statements}
(param1, param2, paramN) = & gt; expression
// equivalent to: = & gt; {return expression; }
// Parentheses are optional when there's only one argument:
(singleParam) = & gt; {statements}
singleParam = & gt; {statements}
// A function with no arguments requires parentheses:
() = & gt; {statements}
// Advanced:
// Parenthesize the body to return an object literal expression:
params = & gt; ({foo: bar})
// Rest parameters are supported
(param1, param2, ... rest) = & gt; {statements}