Using _ (underscore) variable with arrow functions in ES6/Typescript

by

The reason why this style can be used (and possibly why it was used here) is that _ is one character shorter than ().

Optional parentheses fall into the same style issue as optional curly brackets. This is a matter of taste and code style for the most part, but verbosity is favoured here because of consistency.

While arrow functions allow a single parameter without parentheses, it is inconsistent with zero, single destructured, single rest and multiple parameters:

let zeroParamFn = () => { ... };
let oneParamFn = param1 => { ... };
let oneParamDestructuredArrFn = ([param1]) => { ... };
let oneParamDestructuredObjFn = ({ param1 }) => { ... };
let twoParamsFn = (param1, param2) => { ... };
let restParamsFn = (...params) => { ... };

Although is declared but never used error was fixed in TypeScript 2.0 for underscored parameters, _ can also trigger unused variable/parameter warning from a linter or IDE. This is a considerable argument against doing this.

_ can be conventionally used for ignored parameters (as the other answer already explained). While this may be considered acceptable, this habit may result in a conflict with _ Underscore/Lodash namespace, also looks confusing when there are multiple ignored parameters. For this reason it is beneficial to have properly named underscored parameters (supported in TS 2.0), also saves time on figuring out function signature and why the parameters are marked as ignored (this defies the purpose of _ parameter as a shortcut):

let fn = (param1, _unusedParam2, param3) => { ... };

For the reasons listed above, I would personally consider _ => { ... } code style a bad tone that should be avoided.

More Related Contents:

  1. When should I use a return statement in ES6 arrow functions
  2. ECMAScript 6 arrow function that returns an object
  3. What does “this” refer to in arrow functions in ES6?
  4. Why doesn’t my arrow function return a value?
  5. Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)
  6. How to load external scripts dynamically in Angular?
  7. Curly Brackets in Arrow Functions
  8. How do I write a named arrow function in ES2015?
  9. Official information on `arguments` in ES6 Arrow functions?
  10. Arrow Functions and This [duplicate]
  11. New es6 syntax for importing commonjs / amd modules i.e. `import foo = require(‘foo’)`
  12. ES6 arrow functions not working on the prototype?
  13. Arrow Function in Object Literal [duplicate]
  14. What does arrow function ‘() => {}’ mean in Javascript? [duplicate]
  15. Typescript export vs. default export
  16. JavaScript ES6: Test for arrow function, built-in function, regular function?
  17. Can I use arrow function in constructor of a react component?
  18. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  19. Immediate function using JavaScript ES6 arrow functions
  20. ESCMAScript 6 arrow functions – parentheses around parameter
  21. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  22. Get list of duplicate objects in an array of objects
  23. `this` is undefined in Dev Tools when using arrow function
  24. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  25. Should we use useCallback in every function handler in React Functional Components
  26. How to loop over object properties with ngFor in Angular
  27. spread operator vs array.concat()
  28. How can I differentiate between an arrow function, class and a normal function?
  29. Why is `throw` invalid in an ES6 arrow function?
  30. $(‘elems’).each() with fat arrow

Leave a Comment