[SOLVED] Explain {target = document.body} = {} in this function parameter

Issue

Can someone help me understand what is going on with {target = document.body} = {} the the function below?

It seems like it’s passing an object as the parameter with a default of an empty object? But target = document.body doesn’t seem like valid object syntax.

const replaceOnDocument = (pattern, string, {target = document.body} = {}) => {

  // Handle `string` — see the last section
  [
    target,
    ...target.querySelectorAll("*:not(script):not(noscript):not(style)")
  ].forEach(({childNodes: [...nodes]}) => nodes
    .filter(({nodeType}) => nodeType === document.TEXT_NODE)
    .forEach((textNode) => textNode.textContent = textNode.textContent.replace(pattern, string)));
};

Solution

In a function’s parameter list, {target = document.body} = {} means:

• The {target} part of it is parameter destructuring. It means "take the target property of the object provided as an argument and put it in the parameter target." This is called a destructured parameter.
• The = document.body part is a destructuring default value. It means that if there is no target property on the object (or its value is undefined), target should get the value document.body.
• The = {} after the closing } of the destructuring is a parameter default value. It means that if there is no argument at all for that parameter (or the argument is undefined), use {} as a default value for the parameter. After which, the destructuring is applied to that parameter default value. (More on this in the example below, it can be a bit confusing.)

The result is that target will either be the target property of the object provided as the argument (if provided and not undefined), or document.body.

For example, if you called replaceOnDocument with no third argument at all, that would trigger the default parameter value ({}); and then the destructuring would see no target property on it, so the destructuring default value (document.body) would be used.

Here’s an example:

function example({target = "a"} = {}) {
    console.log(`target = ${target}`);
}

// Calling with no argument at all triggers the default parameter
// value (`{}`), which in turn triggers the default destructuring
// value since `{}` doesn't have `target`.
example(); // "target = a"

// Calling with an object that doesn't have `target` just triggers the
// default destructuring value
example({randomProperty: 42}); // "target = a"

// But calling with an object that has `target`, the `target` from
// the object gets picked up
example({target: "b"}); // "target = b"

// Let's see a different value for the default parameter value:
function example2({target = "1"} = {target: "2"}) {
    console.log(`target = ${target}`);
}

// Calling with no argument at all triggers the default parameter
// value (`{}`), which in turn triggers the default destructuring
// value since `{}` doesn't have `target`.
example2(); // "target = 2"

// Calling with an object that doesn't have `target` just triggers the
// default destructuring value
example2({randomProperty: 42}); // "target = 1"

// Calling with an object that has `target`, the `target` from
// the object gets picked up
example2({target: "3"}); // "target = 3"

Answered By – T.J. Crowder

Answer Checked By – Marie Seifert (BugsFixing Admin)