How Do Functions Work in JavaScript?

The core requirement is a function that takes two parameters and returns the result. Everything else is style.

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

console.log(add(2, 3));   // 5
console.log(add(2));      // NaN - the missing argument is not an error
console.log(add(2, 3, 4)); // 5 - extra arguments are ignored

Three behaviours are worth being able to state out loud. A missing argument is not an error in JavaScript. The parameter simply holds the empty value, so adding two of them produces not-a-number rather than throwing an error. Extra arguments are ignored completely. And the return statement ends the function immediately, so any code after it never runs.

For anything beyond a two-line function, add a default so that the missing case is handled explicitly, and think about whether the parameters should be an options object instead. An options object explains itself at the call site, and it lets you add parameters later without breaking the callers.

There is one more habit worth mentioning here. Return the value instead of logging it. A function that returns a result can be tested, reused, and combined with other code. A function that only writes to the console can do none of those things, and mixing the two habits makes code much harder to move later.

Functions are objects inside the language, and not a separate kind of thing. A function value has properties, it can carry its own state, and it can be given extra behaviour. That is why you can attach a property to a function, store one inside an object, and read properties back off it.

function tagged() {}
tagged.version = '1.0';
tagged.isEnabled = true;

console.log(tagged.version);        // '1.0'
console.log(Object.keys(tagged));  // ['version', 'isEnabled']
console.log(typeof tagged);         // 'function'

// A function can hold private state, which is how closures are built.
function counter() {
  let count = 0;
  return {
    increment() {
      count += 1;
      return count;
    },
    value() {
      return count;
    },
  };
}

const c = counter();
c.increment();
c.increment();
console.log(c.value());        // 2
console.log(counter().value()); // 0 - a fresh counter

The built-in properties are the ones that you are most likely to be asked about. The name property holds the name that the function was declared with, and for an anonymous function that is assigned to a variable, the engine takes the name from the assignment. The length property holds the number of parameters that come before the first one with a default or a rest parameter. The prototype property exists on ordinary functions, and it holds the object that new instances inherit from.

Two consequences of functions being objects are worth naming. First, you can implement the mixin pattern, where a function copies its own methods onto a target object. Second, the prototype property is exactly what the new keyword uses, and that is why calling new on an arrow function fails. An arrow function has no prototype property, because it is not a constructor.

There is one caveat to finish with. The name and length properties are configurable but they are not writable, so trying to change them quietly fails in sloppy mode and throws an error in strict mode.

Functions are objects in the language, not a separate kind of thing. A function value has properties, can carry its own state, and can be given behaviour. That is why you can attach a property to a function, store one in an object, and read properties off it.

function tagged() {}
tagged.version = "1.0";
tagged.isEnabled = true;

console.log(tagged.version);        // "1.0"
console.log(Object.keys(tagged));  // ["version", "isEnabled"]
console.log(typeof tagged);         // "function"

// A function can hold private state, which is how closures are built.
function counter() {
  let count = 0;
  return {
    increment() { count += 1; return count; },
    value() { return count; },
  };
}

const c = counter();
c.increment();
c.increment();
console.log(c.value());   // 2
console.log(counter().value());   // 0 - a fresh counter

The built-in properties are the ones you are most likely to be asked about. The name property holds the name the function was declared with, and for an anonymous function assigned to a variable the engine infers it from the assignment. The length property holds the number of parameters before the first one with a default or a rest parameter. The prototype property exists on ordinary functions and holds the object that new instances inherit from.

Two consequences of functions being objects are worth naming. First, you can implement the mixin pattern, where a function copies methods onto a target object. Second, the prototype property is exactly what the new keyword uses, which is why calling new on an arrow function fails: an arrow function has no prototype property, because it is not a constructor.

One caveat: the name and length properties are configurable but not writable, so attempting to change them silently fails in sloppy mode and throws in strict mode.