This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

JavaScript learning – special symbols – bit operators, JavaScript learning – logical operators – short circuit? In this article, learn about the JavaScript arrow function

Arrow functions in JavaScript

The arrow function is another representation of a function, which looks very different from the other representations. The keyword that defines a normal function is replaced by an arrow function with an arrow => consisting of an equal sign = and a greater than sign >.

The greater than or equal operator is written as (>=)/ less than or equal to (<=), so the writing of the arrow function is easily confused with the two operators, so He wrote in his book, “It’s not worth stealing a little bit of typing.”

Arrow function expressions have a much cleaner syntax than function expressions and don’t have their own this, arguments, super, or new.target. The arrow function expression is more useful where anonymous functions are needed, and it cannot be used as a constructor.

Function defines a normal function

Function A normal method defines a function
const fn = function (base = 'parameters', args = 'You can have multiple arguments') {
  const args = [...arguments]
  console.log(args, arguments.arguments.length)
}
Copy the code

The arrow function defines a function

The arrow is placed after the argument list (multiple arguments passed), followed by the function body, which can be understood as: what condition (argument list) produces what effect (function body).

Look at a simple example:

// Define a variable for traversal
const myArticles = [
  'JavaScript Learning - Special Symbols - Bit Operators'.'JavaScript learning - Logical Operators - Short circuit? '.'logical operators or "| |" ".'Logical operators and "&&"',]console.log(myArticles.map((article) = > article.length))
// The arrow function can omit the parentheses for an argument, but automatic formatting is added anyway.
Copy the code

The arrow function here, passing in an argument, iterates through the child element of myArticles, printing the length of that element