0

I am seeing the following behavior in the Chrome dev tools:

var $el = $("<div>", { "data-row-idx": 1, "data-col-idx": 2 })
// n.fn.init [div]

$el.data("row-idx")
// 1

$el.data("col-idx")
// 2

["row-idx", "col-idx"].map(function(x) { return $el.data(x) })
// (2) [1, 2]

["row-idx", "col-idx"].map($el.data)
// jquery.min.js:3 Uncaught TypeError: this.each is not a function
//     at data (jquery.min.js:3)
//     at Array.map (<anonymous>)
//     at <anonymous>:1:24
// data @ jquery.min.js:3

[1,2,3].map(function(x) { return x})
// (3) [1, 2, 3]

(codepen link)

I thought that:

["row-idx", "col-idx"].map(function(x) { return $el.data(x) })

and 

["row-idx", "col-idx"].map($el.data)

were equivalent. Is this not so?

max pleaner
  • 26,189
  • 9
  • 66
  • 118
  • It's not an equivalent, JS does not pass a context together with a function, only a reference to the function. – zerkms May 27 '18 at 23:12
  • @ibrahim mahrir: how is it relevant? (reopened) – zerkms May 27 '18 at 23:12
  • Might work doing `["row-idx", "col-idx"].map($el.data.bind($el[0]))` – charlietfl May 27 '18 at 23:12
  • Read about `Array#map` [**here**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). – ibrahim mahrir May 27 '18 at 23:13
  • 1
    @ibrahimmahrir the question **is not specific** to `Array#map` – zerkms May 27 '18 at 23:14
  • @RaymondChen thank you. I have been using arrow functions for everything and forgot all about the reason for them in the first place. – max pleaner May 27 '18 at 23:14
  • @maxpleaner arrow functions don't solve the original problem here either, btw. – zerkms May 27 '18 at 23:15
  • @zerkms if `$.data` were written an an arrow function it would no? – max pleaner May 27 '18 at 23:16
  • @maxpleaner nope https://jsfiddle.net/3LdgeLgb/ – zerkms May 27 '18 at 23:16
  • @zerkms admittedly I don't know how `$.data` is defined. But given that it is possible to avoid `bind` by using arrow functions in some circumstances, it seems likely to me that jQuery could hypothetically be written in such a way to do that. – max pleaner May 27 '18 at 23:21
  • @maxpleaner "could hypothetically be written in such a way to do that" --- it does not matter how it's *implemented*, it matters how it's called and/or bound. It all is well explained in the duplicate I've referred to. – zerkms May 27 '18 at 23:22
  • @zerkms i'm not really getting you. Is is possible to unbind the self of arrow functions? If not, then the way it is written can control this right? Also, what docs have you referred to? – max pleaner May 27 '18 at 23:25
  • @ maxpleaner `["row-idx", "col-idx"].map(x => $el.data(x))` will work perfectly as expected. – ibrahim mahrir May 27 '18 at 23:28
  • I closed your question as a duplicate, there is a link on the top of the page, it explains everything on how context works in JS. – zerkms May 27 '18 at 23:28
  • @ibrahimmahrir it works, but there is nothing about arrow functions there. `function(x) { return $el.data(x); }` would work as well. – zerkms May 27 '18 at 23:29
  • @zerkms so yeah the duplicate's answer says that a solution is to use arrow functions. Thus my suggestion that it would be nice if jQuery used them to make `bind` unnecessary. – max pleaner May 27 '18 at 23:50
  • @maxpleaner "the duplicate's answer says that a solution is to use arrow functions" --- you really need to read further than a list of titles there in the answer. Arrow functions don't bring any magic functionality, you can solve the problem with either "old-fashion" or arrow functions. The problem is complex, I highly suggest you read about it more thoroughly, it's not as simple as "just throw arrow functions and it's done" as you currently think. "if jQuery used them" --- it wouldn't help. – zerkms May 28 '18 at 00:33

0 Answers0