Functions are objects

Functions are objects you can call

You already know functions as actions. You call them with round brackets, (), pass values in, and get a result back. This lesson shows the other side. In JavaScript, a function is also an object. An object is a value that holds named properties, like user.name.

So a function can do the same things as any other object:

• It has properties you can read, like save.name and save.length.
• You can add your own properties to it, like save.count = 0.
• It has methods you can call, like save.toString() and save.bind(...).

And unlike most objects, you can still call it: save().

This lesson covers these topics, in this order:

• name and length, two properties every function has.
• How JavaScript gives a name to a function that has none.
• Your own properties on a function.
• Named function expressions.
• new Function, which builds a function from text.
• The constructors for generator and async functions.
• toString(), which gives a function's code as text.
• Wrappers: functions that add a little work around another function.

Every function has two built-in properties:

• name is a string. It is the function's name, such as "save".
• length is a number. It counts the function's parameters: the input names in its round brackets. But it only counts the parameters that come before the first one with a default value.

Two words you need for the rule:

• A default value is written with =, like priority = "normal". It is used when the caller leaves that input out.
• A rest parameter is written with three dots, like ...labels. It collects all the extra inputs into an array. It is never counted.

1function save(title, priority = "normal", ...labels) {2  return title;3}4console.log(save.name, save.length);

Line 1 makes a function named save with three parameters:

• title has no default value, so it is counted.
• priority = "normal" has a default value, so counting stops here.
• ...labels is a rest parameter, so it is never counted.

Line 4 prints the name and the length: save 1.

The next example has three functions that all have a length of 0. It also uses bind. add.bind(null, 1, 2, 3) makes a new function, called a bound function. The null sets this. The numbers after it are inputs filled in ahead of time.

1function defaultsFirst(value = 3, later) {}2function restOnly(...items) {}3function add(first, second) { return first + second; }4const boundTwice = add.bind(null, 1, 2, 3);5console.log(defaultsFirst.length, restOnly.length, boundTwice.length);

Line 5 prints 0 0 0. Here is why, line by line:

1. Line 1: the first parameter, value = 3, has a default value. Counting stops before anything is counted.
2. Line 2: ...items is a rest parameter, and rest parameters are never counted.
3. Line 4: add has a length of 2. bind fills in three inputs, so no inputs are left. The new function's length is 0. It never goes below 0.

Step through four functions below and watch JavaScript set each one's name and length.

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);

The table below shows common kinds of functions. Read each row as: "this code gives this name and this length."

Many functions are written without a name, like function () {} or () => {}. These are called anonymous functions. When you save one under a name, JavaScript copies that name onto the function. This is called name inference.

For example, const greet = () => {} gives greet.name === "greet". The function had no name, so it took the variable's name.

Pick a kind of function in the inspector below. It shows the function's name and length, plus two checks: typeof gives the type of a value as text, and instanceof Function asks "is this a kind of Function?"

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

The code below shows five more places a name can come from. Lines 9 to 13 each print one name:

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());

1. Line 1 saves an unnamed function in assigned. So line 9 prints assigned.
2. Line 3 is a method called run. So line 10 prints run.
3. Line 4 is a getter: a function that runs when you read a property, here object.total. Its name gets get and a space in front. Line 7 uses Object.getOwnPropertyDescriptor to reach the getter function itself, and line 11 prints get total. A setter gets set in front in the same way.
4. Line 5 uses a symbol as the method's key. A symbol is a unique key value. Symbol("secret") has the description secret. The method's name is that description in square brackets, so line 12 prints [secret].
5. Line 8 gives the parameter fn an unnamed function as its default value. The function takes the parameter's name, so line 13 prints fn.

Not every function gets a name. A function made with no name nearby has an empty name, "". And a bundler can change a name later. If your code needs a name that never changes, store your own ID next to the function, like { id: "save" }.

A function is an object, so you can add your own properties to it, like any object. For example:

• fn.count = 0 to count how many times it was called.
• fn.meta = {} to keep extra facts about it.
• fn.cache = new Map() to remember results it already worked out.

These properties are public. Any code that can reach the function can read them or change them. If the data should be private, use a closure instead. A closure is a function that keeps using the variables from the place where it was made. You met closures in the Closure patterns lesson.

1function greet(name) {2  return "Hi, " + name;3}4greet.calls = 0;5greet.calls += 1;6console.log(greet("Asha"));7console.log(greet.calls);

1. Lines 1 to 3 make a function, greet, that returns a greeting.
2. Line 4 adds a property called calls to the function and sets it to 0.
3. Line 5 adds 1 to it, the same way as with any object property.
4. Line 6 calls the function and prints Hi, Asha.
5. Line 7 prints 1. Calling greet did not change calls; only line 5 did.

Any code that can reach greet can also read or change calls. So this is public information about the function, not private data.

The next example counts calls for you. makeCounter puts a count property on the function double. Then it returns a new function that adds 1 to the count each time it runs. Step through it and watch the count change.

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);

To memoize a function means to remember its results, so the same input is not worked out twice. The code below keeps the remembered results in a property.

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}

1. Line 1: memoize takes the original function as fn.
2. Line 2 makes a new function, memoized, which takes one input, n.
3. Line 3 checks whether the cache already has an answer for n.
4. If not, line 4 works it out with fn(n) and saves it in the cache.
5. Line 6 returns the saved answer.
6. Line 8 puts an empty Map called cache on memoized, as a property.

Because the cache is a property, other code can look inside it, or empty it with memoized.cache.clear(). If the cache should be private, keep the Map in a closure instead.

How to choose where to keep the data:

• Use a property when other code should be able to see or reset the data.
• Use a closure or a WeakMap when other code must not change it. You'll see a WeakMap near the end of this lesson.
• If you do add a public property, give it a name that other code is unlikely to use too.

Named function expressions

A function expression is a function written where a value goes, such as on the right of =. It can have its own name, like this: const factorial = function inner(n) { … }. Now the function has two names:

• factorial is the variable that holds the function. Code outside the function can use it.
• inner is the function's own name. Only code inside the function can use it.

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}

1. Line 1 saves the function in factorial. The function's own name is inner.
2. Line 2 stops when n is 1 or less and returns 1.
3. Line 3 calls inner from inside the function. A function that calls itself like this is using recursion.
4. Line 5 calls factorial(4) and prints 24, which is 4 × 3 × 2 × 1.
5. Line 7 tries to read inner from outside the function. It doesn't exist there, so it throws an error. Line 9 prints the error's name, ReferenceError.

The inner name has one more use. It keeps working even when the outside variable changes.

1let factorial = function inner(n) {2  return n <= 1 ? 1 : n * inner(n - 1);3};4const saved = factorial;5factorial = null;6console.log(saved(4));

Line 4 saves the function in a second variable, saved. Line 5 sets factorial to null, so that name no longer holds the function. Line 6 still prints 24. The function calls itself with inner, not with factorial, so the change to factorial doesn't matter.

new Function: a function built from text

JavaScript can build a function from strings of text: new Function("a", "b", "return a + b"). The last string is the function's body. The strings before it are the parameter names.

This site never runs new Function on the page. It is here because you will see it in documentation and in older code. Two words help with the example:

• A global variable can be seen by all the code. globalThis.shared = 3 makes one.
• A local variable lives only inside its function, like secret inside demo.

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();

1. Line 2 makes a local variable, secret. Line 3 makes a global one, shared.
2. Line 4 builds addShared from text. Its body reads shared.
3. Line 5 calls it with 4. It can see the global shared, so it prints 7.
4. Line 7 builds a function whose body reads secret.
5. Line 8 calls it. Functions built by new Function can't see local variables, so the call throws. Line 10 prints ReferenceError.

If you need behavior that settings can change, use one of these instead: a lookup table (an object that maps names to normal functions), a normal function, or a small reader for the simple text you accept. These keep code apart from data, and they still work under a strict CSP.

Constructors for generator and async functions

A constructor is a function that makes new objects. Function is the constructor for ordinary functions. Three other kinds of functions each have their own constructor:

• Generator functions, written function*, use GeneratorFunction.
• Async functions, written async function, use AsyncFunction.
• Async generator functions, written async function*, use AsyncGeneratorFunction.

These constructors are not global names, so you can't just type AsyncFunction. You almost never need them. If you do, get one from a real function, as the code below shows. It never builds code from text.

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);

1. Line 1 makes an empty generator function. Object.getPrototypeOf gets the object it inherits from, and .constructor on that object is the function that makes generator functions.
2. Lines 2 and 3 do the same for an async function and an async generator function.
3. Lines 4 to 6 print GeneratorFunction, AsyncFunction, and AsyncGeneratorFunction.

Generators and async functions get their own lessons later. Here you only need to know they are function objects too.

Each page, iframe, and worker has its own copy of these constructors. An iframe is a page shown inside another page. A worker is code that runs in the background. A function made in an iframe uses that iframe's constructor, not yours. So a check like fn.constructor === AsyncFunction can fail for a function that came from an iframe.

toString: a function's code as text

fn.toString() returns a function's source text: its code, as a string. It works like this:

• For a function you wrote, it usually returns your code.
• For a function built into JavaScript, like Math.max, it returns a short text with [native code] in it.

On a real site, the browser doesn't get the files you wrote. A tool like Next.js turns your TypeScript and JSX into plain JavaScript first. So toString() shows that changed code, not your original file. This lesson shows its code as fixed text, and its tests check that the code works.

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

Line 4 checks that the text of sample includes return a * 2, and prints true. Line 5 prints the text of Math.max, which contains [native code].

Don't save that text to turn it back into a function later. Comments, spaces, changes made by build tools, and built-in markers can all make the text wrong for that job.

A wrapper is a function that calls another function and adds a little work around the call. The extra work can be:

• writing a log line,
• timing the call,
• remembering results (caching),
• letting the function run only once.

People often call this kind of wrapper a decorator. In this lesson, decorator just means a wrapper function. It is not the @ syntax you may see in other code; that comes in a later lesson.

A good wrapper is transparent: the caller can't tell it is there. To be transparent, it must pass two things on to the original function, unchanged:

• this, the object the method was called on.
• Every argument the caller passed in.

So write the wrapper as a normal function, not an arrow function. A normal function gets this from the call, like cart.label(7). An arrow function takes this from the place where it was written. That only fits when you want this fixed on purpose.

Step through a logging wrapper below. It wraps the label method of a cart object.

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);

Here is the same wrapper as plain code:

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);

1. Line 1: withLogging takes the original function as fn.
2. Line 2 makes wrapper. Its ...args collects every argument into an array.
3. Line 3 logs calling label 7 before the real work.
4. Line 4 calls the original with fn.apply(this, args). apply calls a function with a this you choose and an array of arguments. Here it passes on the same this the wrapper got.
5. Line 6: you can't change name with =, so Object.defineProperty sets it to loggedLabel.
6. Line 13 puts the wrapper in place of cart.label.
7. Line 14 calls cart.label(7). The wrapper gets cart as this and passes it on, so it prints Item #7. Line 15 prints loggedLabel.

A wrapper must also hand back the original result. The next example has two arguments and returns a value.

1function withTrace(fn) {2  return function (...args) {3    const result = fn.apply(this, args);4    console.log("result", result);5    return result;6  };7}8function join(first, second) { return first + " & " + second; }9const tracedJoin = withTrace(join);10console.log(tracedJoin("tea", "toast"));

1. Line 2 returns the wrapper. Its ...args collects both arguments, "tea" and "toast".
2. Line 3 passes both to join with apply, and keeps the result.
3. Line 4 logs result tea & toast.
4. Line 5 returns the same result, so line 10 prints tea & toast.

The wrapper added a log line, but the caller still gets the same value.

Where you'll use this

You will meet these facts about functions in real code:

• Logging tools read fn.name to label their messages. They still work when a name is missing.
• Test helpers and form checkers sometimes read fn.length to guess how many inputs a function wants. It is only a hint, not a promise.
• Memoize helpers keep their cache on the wrapper, or in a closure.
• Frameworks, analytics tools, and permission checks wrap your callbacks. A good wrapper passes on this and every argument.
• An ID that must never change belongs in your own data, like { id: "save" }. Don't use fn.name for it, because names can change.

The table below compares three places to keep data about a function. Read each row as: "if I keep it here, what is it good for, and what does it cost?"

A WeakMap is a map whose keys are objects, such as functions. Here is how it keeps data about a function outside the function:

1const labels = new WeakMap();2function saveDraft() {}3labels.set(saveDraft, { status: "draft" });4console.log(labels.get(saveDraft).status);5console.log(saveDraft.status);

1. Line 1 makes an empty WeakMap called labels.
2. Line 2 makes a function, saveDraft.
3. Line 3 links saveDraft to the object { status: "draft" }.
4. Line 4 looks it up and prints draft.
5. Line 5 prints undefined, because the function itself never got a status property.

Library code uses this to keep its own private notes about functions. Its names can't clash with properties that other code adds.

Common misconceptions

Here are six common wrong ideas about functions. Each one comes with what is really true.

Guess the answer before you run each program. Use the hints if you get stuck.

function save(a, b = 1, ...rest) {}
const wrapped = save.bind(null, "draft");
console.log(save.name, save.length);
console.log(wrapped.name, wrapped.length);

function track(fn) {
  fn.count = 0;
  return function (...args) {
    fn.count += 1;
    return fn(...args);
  };
}
function shout(word) { return word.toUpperCase(); }
const tracked = track(shout);
tracked("hi");
tracked("bye");
console.log(shout.count);

function track(fn) {
  fn.count = 0;
  return function (...args) {
    fn.count += 1;
    return fn(...args);
  };
}
function shout(word) { return word.toUpperCase(); }
const tracked = track(shout);
tracked("hi");
tracked("bye");
console.log(shout.count);

function logCalls(fn) {
  return function (...args) {
    return fn.apply(this, args);
  };
}
const user = {
  prefix: "User",
  label(id) { return this.prefix + ":" + id; },
};
user.label = logCalls(user.label);
console.log(user.label(5));

function logCalls(fn) {
  return function (...args) {
    return fn.apply(this, args);
  };
}
const user = {
  prefix: "User",
  label(id) { return this.prefix + ":" + id; },
};
user.label = logCalls(user.label);
console.log(user.label(5));

function demo() {
  const secret = 7;
  globalThis.shared = 3;
  const readShared = new Function("return shared;");
  console.log(readShared());
  try {
    const readSecret = new Function("return secret;");
    console.log(readSecret());
  } catch (error) {
    console.log(error.name);
  }
}
demo();

function wrap(fn) {
  return function (...args) {
    return fn.apply(this, args);
  };
}
const box = {
  value: 9,
  getValue() { return this.value; },
};
box.getValue = wrap(box.getValue);
console.log(box.getValue());

function wrap(fn) {
  return function (...args) {
    return fn.apply(this, args);
  };
}
const box = {
  value: 9,
  getValue() { return this.value; },
};
box.getValue = wrap(box.getValue);
console.log(box.getValue());

Try to guess each output before you click. For each code question, first ask what is printed: a name, a length, or the result of a wrapper. Every answer explains why it is right or wrong.

Key takeaways

• A function is an object you can call. You can run it, and you can read and add properties.
• name is the function's name. length counts the parameters before the first default value. Rest parameters are never counted.
• An unnamed function takes a name from where it is saved: a variable, an object key, a getter, a default value, or a symbol. bind adds bound in front.
• Your own properties on a function are public. Use a closure for private data.
• The inner name of a named function expression works only inside the function.
• new Function turns text into code. It can't see local variables. Avoid it in your app.
• A good wrapper passes the call on with fn.apply(this, args).

Up next: Methods on primitives. It explains how simple values, like strings, seem to have methods.