Functions are objects

Functions are callable objects

You already know functions as reusable actions: call them with parentheses, pass values in, and get a result back. This lesson adds the other half of the picture: in JavaScript, a function is also an object. It can have properties, it has a prototype chain, and other code can inspect its built-in details.

That is why save.name, save.length, save.count, save.toString(), save.bind(...), and Object.defineProperty(save, ...) all make sense. The function is still callable, but it is also a value with labels attached.

We will cover the topics in the curriculum order: name and length, name inference, custom properties, named function expressions, new Function, generator and async function constructors, Function.prototype.toString, and forwarding wrappers (sometimes called decorators, without the later @ syntax).

Every function object has a name string and a length number. name is the best label JavaScript can infer. length is the number of parameters before the first default parameter. Rest parameters never count.

1function declared(a, b) {Run2  return a + b;3}4const inferred = function (first, second = 2, ...rest) {5  return first + second + rest.length;6};7const arrow = (value, index) => value + index;8const bound = declared.bind(null, 1);9console.log(declared.name, declared.length);10console.log(inferred.name, inferred.length);11console.log(arrow.name, arrow.length);12console.log(bound.name, bound.length);

Anonymous functions often receive useful names from their surroundings. JavaScript writes the variable’s name on an unlabeled tool when you store it: const greet = () => gives greet.name === "greet". Object literal keys, default values, getters, setters, and symbol keys can also provide names.

1function add(a, b) { return a + b; }

The code below shows more inference rules. Assignment gives assigned, method shorthand gives run, a getter descriptor has get total, a symbol method with description becomes [secret], and a default parameter initializer can name the anonymous function fn.

1const assigned = function () {};2const object = {3  run() {},4  get total() { return 42; },5  [Symbol("secret")]() {},6};7const descriptor = Object.getOwnPropertyDescriptor(object, "total");8const fallback = (fn = function () {}) => fn.name;9console.log(assigned.name);10console.log(object.run.name);11console.log(descriptor.get.name);12console.log(Object.getOwnPropertySymbols(object).map((key) => object[key].name)[0]);13console.log(fallback());

Because functions are objects, you can attach your own data: fn.count = 0, fn.meta = , or fn.cache = new Map(). That is handy for tiny utilities and debugging. It is also public: any code with the function reference can read or replace the property. Closures, from the Closure patterns lesson, are better for private state.

1function makeCounter(fn) {2  fn.count = 0;Run3  return function counted(...args) {4    fn.count += 1;5    return fn(...args);6  };7}8function double(n) { return n * 2; }9const countedDouble = makeCounter(double);10console.log(countedDouble(3));11console.log(countedDouble(4));12console.log(double.count);

1function memoize(fn) {2  function memoized(n) {3    if (!memoized.cache.has(n)) {4      memoized.cache.set(n, fn(n));5    }6    return memoized.cache.get(n);7  }8  memoized.cache = new Map();9  return memoized;10}

This memoizer stores its cache on the returned function. That makes it easy to inspect or clear with memoized.cache.clear(). If you need the cache to be private, close over a Map instead.

Named function expressions

A named function expression gives an internal name to a function value: const factorial = function inner(n) { … }. The outside variable is factorial. The inside-only name inner is visible inside the function body, which makes recursion safe even if the outer variable is reassigned later.

1const factorial = function inner(n) {2  if (n <= 1) return 1;3  return n * inner(n - 1);4};5console.log(factorial(4));6try {7  console.log(inner);8} catch (error) {9  console.log(error.name);10}

Running that code prints 24, then ReferenceError. inner exists for the recursive call on line 3, but it is not a variable in the outer scope.

The new Function syntax

JavaScript has a constructor that builds a function from strings: new Function("a", "b", "return a + b"). This site never executes it in lesson code. It is included here because you will see it in documentation and older metaprogramming examples.

1function demo() {2  const secret = 7;3  globalThis.shared = 3;4  const addShared = new Function("value", "return value + shared;");5  console.log(addShared(4));6  try {7    const readSecret = new Function("return secret;");8    console.log(readSecret());9  } catch (error) {10    console.log(error.name);11  }12}13demo();

GeneratorFunction, AsyncFunction & AsyncGeneratorFunction

Ordinary Function is not the only function constructor in the language. Generator functions, async functions, and async generator functions each have their own constructor. You almost never call these constructors directly. The useful fact is how to recognize them safely: get the constructor from a real function’s prototype.

1const GeneratorFunction = Object.getPrototypeOf(function* () {}).constructor;2const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;3const AsyncGeneratorFunction = Object.getPrototypeOf(async function* () {}).constructor;4console.log(GeneratorFunction.name);5console.log(AsyncFunction.name);6console.log(AsyncGeneratorFunction.name);

This prints GeneratorFunction, AsyncFunction, and AsyncGeneratorFunction. Generators and async code get full lessons later; here we only inspect their object identities.

Function.prototype.toString

Function.prototype.toString returns source text for functions the engine has source for. Built-ins usually return a native-function marker. In a Next.js page, however, the browser receives compiled bundled JavaScript, not your original TypeScript or JSX. So the article uses displayed source strings and tests to verify examples, instead of asking the production bundle to be pretty.

1function sample(a) {2  return a * 2;3}4console.log(sample.toString().includes("return a * 2"));5console.log(Math.max.toString());

Here, a decorator means an ordinary wrapper function, not the later @ syntax. A wrapper can add logging, timing, caching, or “run only once” behavior around another function. The key is forwarding: methods need the same this, and callers expect every argument to arrive unchanged.

1function withLogging(fn) {2  function wrapper(...args) {3    console.log("calling", fn.name, args.join(","));4    return fn.apply(this, args);5  }6  Object.defineProperty(wrapper, "name", { value: "logged" + fn.name[0].toUpperCase() + fn.name.slice(1) });Run7  return wrapper;8}9const cart = {10  prefix: "Item",11  label(id) { return this.prefix + " #" + id; },12};13cart.label = withLogging(cart.label);14console.log(cart.label(7));15console.log(cart.label.name);

1function withLogging(fn) {2  function wrapper(...args) {3    console.log("calling", fn.name, args.join(","));4    return fn.apply(this, args);5  }6  Object.defineProperty(wrapper, "name", { value: "logged" + fn.name[0].toUpperCase() + fn.name.slice(1) });7  return wrapper;8}9const cart = {10  prefix: "Item",11  label(id) { return this.prefix + " #" + id; },12};13cart.label = withLogging(cart.label);14console.log(cart.label(7));15console.log(cart.label.name);

Where you’ll use this

Function-object facts show up in practical code more often than they first appear:

• Logging libraries read fn.name to make traces easier to understand, while staying robust when names are missing.
• Test helpers and form validators sometimes read fn.length as an arity hint, not as a guarantee.
• Memoization utilities store cache metadata on a wrapper or in a closure.
• UI frameworks, analytics, and permission checks wrap callbacks while preserving this and arguments.

Common misconceptions

Every answer explains itself. Try to predict code output before clicking.

Key takeaways

• Functions are callable objects: they can be invoked and inspected.
• name is a useful label; length counts leading parameters before defaults.
• Name inference covers variables, object keys, getters, bound functions, defaults, and symbol-keyed methods.
• Custom properties are public object properties; closures are better for private state.
• A named function expression’s inner name is visible inside the function only.
• new Function compiles strings as code, cannot see local variables, and should be avoided in app code.
• Transparent wrappers forward with fn.apply(this, args).

Up next: Methods on primitives.