DEV Community

Cover image for The obscure `Function#length` property!
Lioness100
Lioness100

Posted on

The obscure `Function#length` property!

Today I found out about another super cool Javascript feature that I'll never use in my life, and I'm here to share it with you! Introducing Function.prototype.length.

// there are 2 expected arguments
function foo(bar, baz) {
  // ...
}

foo.length; // so 2 is outputted
Enter fullscreen mode Exit fullscreen mode

It's as simple as that! The length property exposes the amount of arguments expected by the function in question.

Specifications

Rest parameters are not included in the final count!

function foo(bar, ...baz) {
  // ...
}

foo.length; // 1 - rest parameters are not counted
Enter fullscreen mode Exit fullscreen mode

Also, only parameters before a parameter with a default value are counted.

function foo(bar, baz = true, foobar) {
  // ...
}

foo.length; // 1 - only parameters before one with a default value
Enter fullscreen mode Exit fullscreen mode

What's the difference between arguments.length and Function#length?

As I described above, Function#length will show how many parameters are expected in a function. However, arguments.length (when used inside the function) will show how many were actually passed, regardless of whether they were expected.

function foo(bar, baz) {
  return arguments.length;
}

foo.length; // 2 - expects `bar` and `baz`
foo(1, 2, 3, 4, 5); // 5 - five arguments were actually passed
Enter fullscreen mode Exit fullscreen mode

Use Cases

You tell me! I have no idea 🀣


I hope you learned a bit about the Function#length property! If you have any questions, corrections, or addons, I would love to hear them. Peace ✌

Discussion (9)

Collapse
jonrandy profile image
Jon Randy • Edited on

Not that obscure - I was using it in my project just last week!

I had two different functions to run for attaching methods to objects - one for methods that took arguments, another for methods that didn't. The Function length property was very useful to create a convenience function to automatically pick the correct method adder.

It is also used in the commonly used function that will curry the passed function:

function curry(func) {

  return function curried(...args) {
    if (args.length >= func.length) {
      return func.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      }
    }
  };

}
Enter fullscreen mode Exit fullscreen mode
Collapse
lioness100 profile image
Lioness100 Author

Oooh, genius! (And the project that you linked is super cool too!)

Collapse
jcubic profile image
Jakub T. Jankiewicz

This is very useful and not that obscure, you can use it for curry function. Or any meta/functional programming.

Here is another example of curry function with ES5:

Collapse
foxy4096 profile image
Aditya Priyadarshi

Wow, I also have no idea where to use this, maybe you can use to find out the no. of agrs taken by a builtin function, who knows, or if you are lazy or crazy then you can use it.
:)

Collapse
lioness100 profile image
Lioness100 Author

As someone who is both lazy and crazy, I'm sure I'll find some use eventually :)

Collapse
val_baca profile image
Valentin Baca

"amount of arguments expected by the function in question."

aka the "arity" of the function

Collapse
lioness100 profile image
Lioness100 Author

Oh, I haven't heard that before! TIL :)

Collapse
iamandrewluca profile image
Andrew Luca

Can be used for currying javascript.info/currying-partials

Collapse
lioness100 profile image
Lioness100 Author

Ah, very cool!