5.6 Functions are Objets

One of the most surprising concepts in JavaScript is that functions are objects. Take any function, type the dot operator after its name, and the IDE happily lists members on it: violet icons for methods like bind, call and apply, blue icons for properties like name and length.

Circle.name      // "Circle"
Circle.length    // number of declared parameters
Circle.constructor   // the built-in Function constructor

Every object has a constructor property, and the constructor of a function is the built-in Function object. When you write function Circle(radius) { ... }, the engine internally builds the function object using this Function constructor. We can even mimic that ourselves:

const Circle1 = new Function("radius", `
  this.radius = radius;
  this.draw = function () { console.log("draw"); };
`);

const c = new Circle1(1);

call and apply

  • Circle.call(thisArg, 1) — calls the function with an explicit this and arguments listed individually.
  • Circle.apply(thisArg, [1]) — same idea, but the arguments come as an array.
  • Both are equivalent to using new Circle(1) when thisArg is a fresh empty object.

If you call a constructor without new, this defaults to the global object (window in the browser) instead of a brand-new empty object. call and apply are useful when you already have an arguments array somewhere in your code and want to forward it. See you in the next video.

Summary

This lesson reveals that functions in JavaScript are first-class objects with their own properties and methods. Students explore the Function constructor used internally by the JavaScript engine, examine key properties like `name` and `length`, and master essential methods—`call()` and `apply()`—that enable dynamic function invocation with explicit context binding.

Key points

  • Functions are objects in JavaScript with accessible properties (name, length) and methods (bind, apply, call)
  • The Function constructor is used internally by the JavaScript engine whenever you declare a function
  • The call() method invokes a function while explicitly setting the 'this' context as the first argument
  • The apply() method works identically to call() except it accepts arguments as an array rather than individually
  • The 'new' operator internally creates an empty object and passes it as 'this' context via the call() method
  • Understanding function methods unlocks powerful patterns for context manipulation and object instantiation

FAQ

Why does JavaScript treat functions as objects?

Functions being objects allows them to have properties, methods, and be passed around as values. This first-class nature enables powerful patterns like callbacks, higher-order functions, and dynamic context binding through methods like call() and apply().

What is the practical difference between call() and apply()?

Both invoke a function with a specified 'this' context. Use call() when you have individual arguments: circle.call(obj, arg1, arg2). Use apply() when arguments are already in an array: circle.apply(obj, [arg1, arg2]). Choose based on how your arguments are organized.

How does the 'new' operator use the Function constructor internally?

When you use 'new' with a function, JavaScript creates an empty object, passes it as the 'this' context via the Function constructor's call() method, and returns that initialized object. This is why constructor functions require the 'new' keyword.