Chapter 4: Chapter 4. Functions for the journeyman: understanding function invocation
Introduces the implicit function parameters `this` and `arguments` and explains that how a function is invoked influences their values.
After this chapter you will be able to
- Implicit function parameters. Explain that functions receive `this` and `arguments` implicitly: `this` represents the function context, and `arguments` represents the arguments passed in the call. State that the way a function is invoked influences how these implicit parameters are determined.
- Implicit function parameters. Explain that function invocations usually provide `arguments` and `this` in addition to explicitly declared parameters, and describe what makes them implicit.
- Access to passed arguments. Explain how a function can use arguments.length and indexed entries to access every argument passed to it, including arguments without declared parameters. Describe how this lets a function handle a variable number of values.
- Nonstrict parameter aliasing. Describe how, in the nonstrict example, an arguments entry and its matching named parameter reflect changes to one another.
- Strict mode aliasing behavior. Explain how the section enables strict mode and how it changes the effect of reassigning arguments[0] on its matching parameter.
- Implicit this and function context. Explain that a function receives an implicit `this` parameter in addition to its explicit arguments, and that `this` refers to an object associated with the invocation.
- Invocation influences this value. Distinguish JavaScript’s `this` from the expectation that it is determined only by where a method is defined: how the function is invoked can strongly influence its value.
- Invocation and function context. Explain that how a function is invoked affects how its `this` parameter, or function context, is established.
- Four function invocation forms. Distinguish invocation as a function, as an object's method, as a constructor, and through `call` or `apply`, using the examples given in the section.
- Function invocation form. Distinguish invocation as a function from other invocation forms by identifying a call with () where the called expression does not reference the function as an object property.
- Function call context by mode. Explain what this refers to when a function is invoked as a function in nonstrict and strict modes, and why the section finds the strict-mode result more straightforward.
- Method invocation and function context. Distinguish calling a function directly from calling it through an object property, and explain how each invocation determines `this` in the section’s nonstrict-mode example.
- Object creation with new. Trace what happens when a function is invoked with `new`: a new empty object becomes its `this` context, the function can initialize that object, and the object is normally returned.
- Explicit constructor return values. Distinguish what a `new` expression returns when its constructor explicitly returns an object versus a nonobject value, using the `Ninja` and `Emperor` examples.
- Explicit Context With Call And Apply. Describe how `call` and `apply` invoke a function with a chosen context, distinguish how they receive arguments, and explain which form fits arguments already at hand.
- Callback Context During Iteration. Trace how the simplified iteration function uses `call` to invoke a callback for each array entry with a selected context and an index argument.
- Unexpected callback function context. Explain that a callback, such as an event handler, may run with a function context different from the one expected, and that call and apply can be used to get around this problem.
- Constructor Callback Context. Explain why a click-handler arrow function created inside the Button constructor updates the button’s clicked state even when the browser calls the handler.
- Object Literal Context Caveat. Trace why an arrow-function click property on the object literal in this example sets `clicked` on `window` rather than on the button object.
- Bound function context. Explain that bind returns a new function with the original function’s body but a this value fixed to the object passed to bind. Describe why a button-click handler bound to the button uses that button as its context when clicked, without changing the original function.
What it builds on
- Arguments and function parameters (chapter 3) · Introduces function call arguments and explicitly named parameters.
- Rest parameters (chapter 3) · The rest parameter introduced in the preceding chapter.
- Functions as first-class objects (chapter 3) · Functions can be referenced as first-class objects.
- Callback functions (chapter 3) · Introduces callback functions.
- Arrow functions (chapter 3) · The definition of arrow functions
Section by section
Introduction
Introduces the implicit function parameters `this` and `arguments` and explains that how a function is invoked influences their values.
- Implicit function parameters: Explain that functions receive `this` and `arguments` implicitly: `this` represents the function context, and `arguments` represents the arguments passed in the call. State that the way a function is invoked influences how these implicit parameters are determined.
Why it matters: This distinction sets up the chapter’s discussion of function calls and function context.
Key terms: implicit function parameters, this, arguments, function context
4.1 Using implicit function parameters
This section introduces `arguments` and `this` as parameters usually available to a function without being named in its definition.
- Implicit function parameters: Explain that function invocations usually provide `arguments` and `this` in addition to explicitly declared parameters, and describe what makes them implicit.
Why it matters: It explains why a function can refer to `arguments` and `this` without declaring them in its parameter list.
Key terms: implicit parameters, arguments, this, function signature
4.1 Do you know?
Poses three diagnostic questions about function context, methods, and constructor return values.
4.1.1 The arguments parameter
This section explains how the arguments object exposes every argument passed to a function, why it is not an array, and how strict mode changes its relationship with named parameters.
- Access to passed arguments: Explain how a function can use arguments.length and indexed entries to access every argument passed to it, including arguments without declared parameters. Describe how this lets a function handle a variable number of values.
Why it matters: It explains how a function such as the section’s sum example can accept any number of values. - Array-like object distinction: Distinguish the arguments object from a JavaScript array and explain the advantage of a rest parameter noted here.
Why it matters: Indexed access does not mean array methods will work on arguments. - Nonstrict parameter aliasing: Describe how, in the nonstrict example, an arguments entry and its matching named parameter reflect changes to one another.
Why it matters: This explains a surprising effect of changing an argument entry or a named parameter. - Strict mode aliasing behavior: Explain how the section enables strict mode and how it changes the effect of reassigning arguments[0] on its matching parameter.
Why it matters: Strict mode removes the parameter-aliasing behavior demonstrated in the nonstrict example.
Key terms: arguments object, arguments.length, function parameters, variadic functions, array-like, rest parameter, array methods, alias, nonstrict mode, strict mode
4.1.2 The this parameter: introducing the function context
Introduces `this` as an implicit function parameter and explains why its value cannot be inferred solely from where a function is defined.
- Implicit this and function context: Explain that a function receives an implicit `this` parameter in addition to its explicit arguments, and that `this` refers to an object associated with the invocation.
Why it matters: This gives you the basic meaning of function context before examining particular calls. - Invocation influences this value: Distinguish JavaScript’s `this` from the expectation that it is determined only by where a method is defined: how the function is invoked can strongly influence its value.
Why it matters: It prevents you from assuming a function has the same context regardless of how it is called.
Key terms: this parameter, implicit parameter, function context, invoked as a method
4.2 Invoking functions
This section introduces four ways to invoke a JavaScript function and explains that the invocation form affects its function context.
- Invocation and function context: Explain that how a function is invoked affects how its `this` parameter, or function context, is established.
Why it matters: The same function can operate differently depending on how it is called. - Four function invocation forms: Distinguish invocation as a function, as an object's method, as a constructor, and through `call` or `apply`, using the examples given in the section.
Why it matters: Recognizing the invocation form prepares you to reason about function context. - Parentheses as invocation operator: State the section's rule for the parentheses invocation operator and its exception for `call` and `apply`.
Why it matters: It gives a concise way to recognize the ordinary invocation syntax described here.
Key terms: this parameter, function context, invoked, function, method, constructor, apply, call, function invocation operator, function reference
4.2.1 Invocation as a function
This section defines invocation as a function and explains how strict mode changes the value of this for that invocation.
- Function invocation form: Distinguish invocation as a function from other invocation forms by identifying a call with () where the called expression does not reference the function as an object property.
Why it matters: The form of a call helps determine its function context. - Function call context by mode: Explain what this refers to when a function is invoked as a function in nonstrict and strict modes, and why the section finds the strict-mode result more straightforward.
Why it matters: The same function-call form can give this a different value depending on strict mode.
Key terms: invocation as a function, () operator, method invocation, function context, this, nonstrict mode, strict mode, global context, window object
4.2.2 Invocation as a method
This section explains how calling a function through an object property makes the object its function context, and how one function can serve as a method on multiple objects.
- Method invocation and function context: Distinguish calling a function directly from calling it through an object property, and explain how each invocation determines `this` in the section’s nonstrict-mode example.
Why it matters: The way you call a function determines which object its `this` refers to. - Shared function across objects: Explain why `ninja1` and `ninja2` can use the same function as a method while receiving different function contexts.
Why it matters: One function can do the same work for different objects without making a separate function copy for each.
Key terms: method, function context, this parameter, global context, nonstrict mode, function reference, this
4.2.3 Invocation as a constructor
This section explains how calling a function with `new` creates and initializes an object, how explicit return values affect the result, and why constructor functions are written and used differently from ordinary functions.
- Object creation with new: Trace what happens when a function is invoked with `new`: a new empty object becomes its `this` context, the function can initialize that object, and the object is normally returned.
Why it matters: It explains where a constructor’s `this` comes from and what a `new` expression normally produces. - Explicit constructor return values: Distinguish what a `new` expression returns when its constructor explicitly returns an object versus a nonobject value, using the `Ninja` and `Emperor` examples.
Why it matters: An explicit object return can make the result different from the object the constructor initialized. - Ordinary calls to constructors: Explain why a function written to initialize `this` is generally unsuitable for an ordinary call, including the `Ninja` example’s nonstrict and strict-mode outcomes.
Why it matters: It helps explain why accidentally omitting `new` can cause a bug rather than create an instance. - Constructor reuse and naming: Describe how a constructor avoids repeating initialization code for similar objects and state the naming convention that distinguishes constructors from ordinary functions and methods.
Why it matters: The convention signals intended invocation, while reuse makes it easier to create objects with a common pattern.
Key terms: constructor function, new, this parameter, function context, constructor return values, new expression, nonobject, normal functions, nonstrict mode, strict mode
4.2.4 Invocation with the apply and call methods
This section explains why a function can receive an unexpected `this` context and how `call` and `apply` let code choose that context when invoking a function.
- Event Handler Context Surprise: Explain why the button click handler updates the wrong object even though it was defined as a method on the backing object.
Why it matters: A function’s owner does not necessarily determine its context when something else invokes it. - Explicit Context With Call And Apply: Describe how `call` and `apply` invoke a function with a chosen context, distinguish how they receive arguments, and explain which form fits arguments already at hand.
Why it matters: These methods let you select `this` for a particular invocation without changing the function. - Callback Context During Iteration: Trace how the simplified iteration function uses `call` to invoke a callback for each array entry with a selected context and an index argument.
Why it matters: The example shows how the code invoking a callback can deliberately control what that callback sees as `this`.
Key terms: function context, this, event handler, target element, apply, call, invocation arguments, callback function, iteration entry, loop index
4.3 Fixing the problem of function contexts
This introduction identifies unexpected function context in callbacks as a problem and previews two further ways to address it.
- Unexpected callback function context: Explain that a callback, such as an event handler, may run with a function context different from the one expected, and that call and apply can be used to get around this problem.
Why it matters: Recognizing the context mismatch clarifies the problem the following sections address.
Key terms: function context, callback functions, event handlers, call, apply
4.3.1 Using arrow functions to get around function contexts
This section shows how arrow functions retain the `this` value from where they are created, fixing one button-click callback but causing a subtle bug in an object-literal version.
- Constructor Callback Context: Explain why a click-handler arrow function created inside the Button constructor updates the button’s clicked state even when the browser calls the handler.
Why it matters: It explains why changing the handler to an arrow function lets the button track its clicked state. - Object Literal Context Caveat: Trace why an arrow-function click property on the object literal in this example sets `clicked` on `window` rather than on the button object.
Why it matters: An arrow function can preserve the wrong context if it is created somewhere other than intended.
Key terms: arrow function, this parameter, Button constructor, callback function, object literal, global code, window object, clicked property
4.3.2 Using the bind method
This section explains how bind creates a new function whose this value stays tied to a chosen object, illustrated with a button-click handler.
- Bound function context: Explain that bind returns a new function with the original function’s body but a this value fixed to the object passed to bind. Describe why a button-click handler bound to the button uses that button as its context when clicked, without changing the original function.
Why it matters: Binding lets a handler retain the intended this value when it runs.
Key terms: bind method, bound function, this parameter, function context
4.4 Summary
4.5 Exercises
Where this is used later
- Tracking code execution with execution contexts (chapter 5) · Introduces ways functions are invoked.
- Object construction and prototypes (chapter 7) · The example motivates creating objects from a shared pattern instead of setting up each object and method separately.
- Mimicking private variables (chapter 5) · Explains invoking a function as a constructor.
- Instance properties (chapter 7) · Calling a function as a constructor
- Reusing built-in array functions (chapter 9) · Using call to set a function’s context.
Concepts explained in this chapter
- thisThe implicit JavaScript function binding whose value is determined by how the function is called.
- argumentsAn array-like object available inside non-arrow JavaScript functions that exposes the arguments passed to the current invocation.
- applyA JavaScript Function method that invokes a function with an explicit this value and arguments supplied as an array-like object.
- callA JavaScript Function method that invokes a function with an explicit this value and arguments supplied individually.
- constructor functionA function intended to create and initialize an object when invoked with new.
- strict modeA JavaScript mode that applies stricter parsing and runtime semantics.
- constructor return valueThe value produced by a constructor call, where an explicitly returned object replaces the newly created instance and a nonobject return is ignored.
- new keywordA JavaScript operator that creates an object instance and invokes a constructor function with that object as its this value.
- callThe act of executing a function through a function invocation mechanism.
- arguments aliasingThe non-strict-mode behavior in which indexed values of the arguments object and corresponding function parameters share changes.
- arrow functionA concise JavaScript function syntax that captures this lexically from its creation context rather than creating its own binding.
- callbackA function supplied to other code to be invoked later when a condition or event occurs.
- forEachAn Array method that invokes a callback once for each array element.
- rest operatorA function parameter syntax that collects remaining supplied arguments into a single array-like value.
- global codeJavaScript source text that is not enclosed in a function and is evaluated in the global execution context.
← Chapter 3: Chapter 3. First-class functions for the novice: definitions and arguments
Chapter 5: Chapter 5. Functions for the master: closures and scopes →
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.