javascript箭头函数已传递未定义的参数，这如何工作？

Question

I am confused with the following snippet:

  let counted = countBy(text, char => {
      let script = characterScript(char.codePointAt(0));
      return script ? script.direction : "none";
  }).filter(({name}) => name != "none");

variable char gets defined inside the countBy function: I was trying to separate the arrow functions into separate functions so I can understand the code, but the variable char comes in the way.

I tried to separate the code so arrow functions were standalone functions, because I find the construct very confusing.

// here are the 2 functions in full: I am new to JS :-(

function dominantDirection(text) {
    let counted = countBy(text, char => {
        let script = characterScript(char.codePointAt(0));
        return script ? script.direction : "none";
  }).filter(({name}) => name != "none");

    if (counted.length == 0) return "ltr";

    return counted.reduce((a, b) => a.count > b.count ? a : b).name;
}
function countBy(items, groupName) {
      let counts = [];
      for (let item of items) {
          let name = groupName(item);
          let known = counts.findIndex(c => c.name == name);
          if (known == -1) {
              counts.push({name, count: 1});
          } else {
              counts[known].count++;
       }
     }
     return counts;
}

Answer 1

Your countBy function receives two things:

1. An array of items
2. Another function that is called with every item in items , returning for each item its corresponding group name. The name of that other function within countBy is groupName , that's why it's invoked with groupName(item) .

So your dominantDirection function receives a text and counts characters by direction, using an anonymous function that receives a character and does its logic with it (that's the function that countBy will call groupName ). Maybe a more clear way of putting it would be:

const getDirection = char => { // This line could also have been: function getDirection(char) {
  let script = characterScript(char.codePointAt(0));
  return script ? script.direction : "none";
}

function dominantDirection(text) {
    let counted = countBy(text, getDirection).filter(({name}) => name != "none");

    if (counted.length == 0) return "ltr";

    return counted.reduce((a, b) => a.count > b.count ? a : b).name;
}

I hope that helps clear out the confusion a bit, feel free to ask if it's still not clear!

Btw if you want to read more about arrow functions, check the MDN web docs .

Answer 2

You never answered my question about what ""dominantDirection()" is supposed to do.

I found the answer here:

https://www.freecodecamp.org/forum/t/reading-eloquent-javascript-can-i-ever-get-this-good/181511

... a program to take a string and identify what percentage of whatever Unicode scripts are present in it out of the total. the program also accounts for Unicode characters which take up more than one code unit

Here's some very useful advice from the same thread:

That book ( Eloquent Javascript ) is not for everyone, including me :wink: and many others too don't like it…

A Better and Practical alternative for Eloquent Javascript is The Javascript Way followed by Programming for the Web with JavaScript .

Regarding your initial question, I hope lipusal's most excellent post gave you the answer you were looking for. In particular, these two snippets are basically equivalent:

// "Classic" JS syntax:
countBy(text, function(char) {
      var script = characterScript(char.codePointAt(0));
      return script ? script.direction : "none";
});

vs.

// ES6 syntax:
countBy(text, char => {
      let script = characterScript(char.codePointAt(0));
      return script ? script.direction : "none";
});

PS:

From Amazon.com:

Alright, but NOT a good book if you're just starting to learn JavaScript

and

not for beginners