Home javascript Operator = & gt; in JavaScript

Operator = & gt; in JavaScript

Author

Date

Category

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}

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions