-1

I am working on an existing project and trying to move part of it to another build using gulp (grunt to gulp) and it seems one of the errors I am getting is the use of '=>' seeming to refer to lodash but I am not sure.

this is what one of the lins look like:

 Object.keys(highlightTerms).forEach((k) => { msg = _highlightList(highlightTerms[k], k, msg); });

and I am not sure why the error is being called or how I can change it so that the gulp builder compiles it.

This occurs in multiple files. Hopefully some light can be shed on this, I can't find anything related to it.

Ryan
  • 14,392
  • 8
  • 62
  • 102
capa_matrix
  • 115
  • 3
  • 10
  • 1
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Maxx Aug 11 '16 at 14:49
  • 1
    Its ES6 features, equivalent to function (k) { msg = _highlightList(highlightTerms[k], k, msg); } – hylimR Aug 11 '16 at 14:49
  • 3
    Possible duplicate of [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](http://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) – slugo Aug 11 '16 at 14:50
  • Thanks Harry, also @self I obviously didn't know that, hence my question... – capa_matrix Aug 11 '16 at 15:07
  • Object.keys isn't even lodash – Ryan Aug 11 '16 at 15:14
  • but forEach is, at least from what I've seen, so if you don't want to help that's cool, again this goes with the fact, that I didn't know. – capa_matrix Aug 11 '16 at 15:49

2 Answers2

3

This is javascript ES6 syntax. It is a lambda function which is short hand for an anonymous function. It is equivalent to:

Object.keys(highlightTerms).forEach(function(k) { 
    msg = _highlightList(highlightTerms[k], k, msg); 
}.bind(this));

More information here.

Lew
  • 1,248
  • 8
  • 13
  • 1
    The difference is that the arrow lambda inherits context from the caller, and anonymous function that you used here has its own context (I'm referring to value of `this`). – Mjh Aug 11 '16 at 14:55
  • wait what is the 'bind' function for? – capa_matrix Aug 11 '16 at 15:19
  • 1
    For your purpose, it is irrelevant and can be left off. I included it as @Mjh pointed out there is a difference as to the context of `this` which is assigned by default when using an anonymous function to using a lambda. Using bind like that sets the context of `this` to be the same context of the calling block. – Lew Aug 11 '16 at 15:29
1

The => syntax is an arrow function, which is only avalible in enviornments that support ES6, or ES2015. It's a shorter alternative to normal anonymous function notation.

You can fix the error either using a transpiler like babel in your gulp workflow (which compiles ES6 to ES5), or by changing the syntax to the ES5 function expression.

drewatk
  • 23
  • 5
  • thanks for the link to babel, I have looked into it and I am not sure how to incorporate it into my gulp. Right now it seems we are using wiredep. – capa_matrix Aug 11 '16 at 18:05
  • also why doesn't gulp, by default use es6 – capa_matrix Aug 11 '16 at 18:05
  • @capa_matrix It's not gulp, it's whatever environment you're running the code in that doesn't support the new es6 syntax (yet). For example, node v6 and Chrome are almost fully supported, but Babel allows you to compile the code down to the old syntax for most browsers. http://kangax.github.io/compat-table/es6/ – drewatk Aug 11 '16 at 22:51