0

I'm attempting to contribute to a project and I've noticed a function declaration syntax that I don't understand, or at least I don't appreciate the value of it. Here is the syntax:

export const getRecordById: (number) => number| undefined = (id: number) => {
  return id + 1  //  not real logic
}

I interpret that as getRecordById is declared as a function type that takes a single number parameter and returns either a number type or undefined. It is assigned to a function with a number parameter named id

If I've got that right, I would write that function like this:

export function getRecordById(id: number): number| undefined {
  return id + 1  //  not real logic
}

My question is, what is the value in the more verbose and, to me, cryptic syntax in the first example? I suspect there IS a reason, but I don't understand or know it. What am I missing?

NV_steve
  • 45
  • 4
  • 1
    One is an arrow function assigned to a variable and the other is a function statement; do you understand the difference between those in JavaScript? – jcalz Feb 16 '22 at 20:56
  • Please provide a [mre] that clearly demonstrates the issue you are facing. Ideally someone could paste the code into a standalone IDE like [The TypeScript Playground (link here!)](https://tsplay.dev/mAj18W) and immediately get to work solving the problem without first needing to re-create it. So there should be no pseudocode, typos, unrelated errors, or undeclared types or values. – jcalz Feb 16 '22 at 20:56
  • This is *almost* a duplicate of [this Q&A](https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname), but none of the answers there seem to talk about using `const` in this pattern. Nonetheless, the answer to this is basically the answer to that, plus "`const` declarations can't be reassigned accidentally". – kaya3 Feb 16 '22 at 21:23
  • @jcalz I have a basic understanding of the differences, but not much experience working with them. In my example I should have used ```export const getRecordById = function (id: number): number| undefined``` The reason to use arrow function isn't apparent. I'll keep looking into it. Thanks for the reply. – NV_steve Feb 16 '22 at 23:51
  • When you say "I should have used", do you want to [edit] it? Right now `(number) => number | undefined` is problematic because it [doesn't mean what you think it means](https://stackoverflow.com/q/60114432/2887218). Either you need something like `(id: number) => number | undefined` instead, or you should edit the question to use the `function` expression instead of the arrow function. Let me know once the question stabilizes. – jcalz Feb 17 '22 at 04:33

1 Answers1

-1

The preferred style is the one the project is mostly made of. If they established a code standard of exporting arrow functions instead of exporting function then the most sensible approach is to use the arrow functions, because of consistency.

Having said that... in this particular case I would go with the function, because it's less cryptic.

MAP
  • 397
  • 2
  • 8