2

The following code is example code from an answer to a question on arrow functions.

var a = [
  "We're up all night 'til the sun",
  "We're up all night to get some",
  "We're up all night for good fun",
  "We're up all night to get lucky"
];

// These two assignments are equivalent:

// Old-school:
var a2 = a.map(function(s){ return s.length });

// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );

// both a2 and a3 will be equal to [31, 30, 31, 31]

I'm new to javascript, so I'm wondering what's the point of defining a function this way at all? It seems to me it would be much easier to just pass in the s.length value itself. Even with more complex operations, it seems like it would make more sense to either save the output of those operations into a variable and pass that variable into the function a.map or just define the operations inside of the parentheses following a.map.

jaredad7
  • 998
  • 2
  • 11
  • 33
  • Can you show an example of what you mean by `Even with more complex operations, it seems like it would make more sense to either save the output of those operations into a variable and pass that variable into the function`? –  Aug 23 '18 at 17:30
  • It's because `Array#map` expects a function that take an element of the array and return a new value. – ibrahim mahrir Aug 23 '18 at 17:30
  • What do you mean by _“just pass in the `s.length` value itself”_? Can you provide an example of that? – Sebastian Simon Aug 23 '18 at 17:30
  • 2
    I get the feeling that this Q isn't so much about the usefulness of arrow functions but rather about a severe misconception about how callback using functions like `map()` work. –  Aug 23 '18 at 17:31
  • @ChrisG, that may be the case. Could you explain the misunderstanding? – jaredad7 Aug 23 '18 at 17:34
  • 1
    @jaredad7 Could you address my first comment / Xufox's first? –  Aug 23 '18 at 17:36
  • Sure. By more complex operations, I mean something like, perhaps, a binary operation, eg `a.map(s.length - 1)`, or other such operations. By just pass in `s.length`, I mean something like `a.map(s.length)`. I see that @ibrahimmahrir mentioned that this particular function expects a function as input, but then the question is why doesn't it just take a single value (`s.length`), since that seems to be all it needs. I want to know why it's useful to do things this way. – jaredad7 Aug 23 '18 at 17:43
  • 2
    `a.map(s.length)` wouldn’t work. What would `s` be? You’ve never defined that. In `(s) => s.length`, `s` is each string in the `a` array, for each iteration. JavaScript _could_ have a method similar to Underscore.js’s [`pluck`](https://underscorejs.org/#pluck) method, which could look like `a.pluck("length")`; but there is no such method. – Sebastian Simon Aug 23 '18 at 17:45
  • 1
    Because JavaScript doesn't know what `s` is. It's simply not how JavaScript works (or any other programming language). All array functions expect a function as parameter, because that function is called on every element. To be clear, the arrow function is *already* partly syntactic sugar, meant to shorten lines as your `a2` one. Not sure what would be gained by saving 3 characters and making the code weird to read. –  Aug 23 '18 at 17:45
  • In addition, you can define a function elsewhere, then use it in multiple `map()` calls by simply passing its name. Like `const tolength = s => s.length;`, then later `var a2 = a.map(tolength);` –  Aug 23 '18 at 17:51
  • I was wondering about the necessity for creating a separate function in the first place. The fact that the `map()` function is using a function to run on each element answers the question. I didn't realize that's what was going on. – jaredad7 Aug 23 '18 at 17:53
  • 1
    You have to distuinguish between a function and something else. In kotlin for example it is done by using different brackets for callbacks, e.g. `a.map(0)` just passes a value, `a.map { it.length }` passes a callback that is called for each array element where `it` is the element. However JS solved it differently. – Jonas Wilms Aug 23 '18 at 17:54
  • 1
    @jaredad7 See the [`map` docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). It’s all explained there. – Sebastian Simon Aug 23 '18 at 17:55
  • Have a look at https://stackoverflow.com/a/4383321/5260024 for "why `forEach` at all? – Jonas Wilms Aug 23 '18 at 17:59

0 Answers0