Consider using arrow functions for callbacks JS-0241
Anti-pattern
Minor
9 months ago
—
2 years old
Unexpected function expression
1236 // Expose the library as an AMD module
1237 if (typeof define === 'function' && define.amd) { // eslint-disable-line no-undef
1238 global.WordCloud = WordCloud
1239 define('wordcloud', [], function () { return WordCloud }) // eslint-disable-line no-undef1240 } else if (typeof module !== 'undefined' && module.exports) { // eslint-disable-line no-undef
1241 module.exports = WordCloud // eslint-disable-line no-undef
1242 } else {Unexpected function expression
1180 }
1181
1182 var removeEventListener = function removeEventListener (type, listener) {
1183 elements.forEach(function (el) {1184 el.removeEventListener(type, listener)1185 }, this)1186 }
1187
1188 var anotherWordCloudStart = function anotherWordCloudStart () {Unexpected function expression
1174 }
1175
1176 var addEventListener = function addEventListener (type, listener) {
1177 elements.forEach(function (el) {1178 el.addEventListener(type, listener)1179 }, this)1180 }
1181
1182 var removeEventListener = function removeEventListener (type, listener) {Unexpected function expression
1069
1070 var gx, gy, i
1071 if (!canvas.getContext || settings.clearCanvas) {
1072 elements.forEach(function (el) {1073 if (el.getContext) {1074 var ctx = el.getContext('2d')1075 ctx.fillStyle = settings.backgroundColor1076 ctx.clearRect(0, 0, ngx * (g + 1), ngy * (g + 1))1077 ctx.fillRect(0, 0, ngx * (g + 1), ngy * (g + 1))1078 } else {1079 el.textContent = ''1080 el.style.backgroundColor = settings.backgroundColor1081 el.style.position = 'relative'1082 }1083 })1084
1085 /* fill the grid with empty state */
1086 gx = ngxUnexpected function expression
1025 return !el.dispatchEvent(event)
1026 }, this)
1027 } else {
1028 elements.forEach(function (el) {1029 var event = new CustomEvent(type, {1030 detail: details || {}1031 })1032 el.dispatchEvent(event)1033 }, this)1034 }
1035 }
1036
Description
It is recommended to use arrow functions as callbacks.
Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments.
For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior.
Additionally, arrow functions are:
less verbose, and easier to reason about.
bound lexically regardless of where or when they are invoked.
Bad Practice
func(function(a) { return a; }); // ERROR
// prefer: func(a => a)
func(function() { return this.a; }.bind(this)); // ERROR
// prefer: func(() => this.a)
Recommended
// arrow function callback
func(a => a); // OK
// generator as callback
func(function*() { yield; }); // OK
// function expression not used as callback or function argument
var funcVar = function func(a) { return a; }; // OK
// unbound function expression callback
func(function() { return this.a; }); // OK
// recursive named function callback
func(function recursiveFunc(n) { return n && n + recursiveFunc(n - 1); }); // OK