Exploring the Depackaging of ES6 Nested Objects

Question

Exploring the Depackaging of ES6 Nested Objects

How can I implement ES6 with Destructuring to give users options? I'm having trouble dealing with nested objects and preventing the defaults from being overwritten by partial objects.

Check out this simple example on MDN:

function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
{
  console.log(size, cords, radius);
  // perform some chart drawing
}

drawES6Chart({
  cords: { x: 18},
  radius: 30
});

The result displayed is

big {"x":18} 30

but what I actually want to see is

big {"x":18,"y": 0} 30

The provided cords object is incomplete and removes the default y value. My goal is to retain any value that is not explicitly replaced.

javascript

Answer 1

Answer №1

To properly destructure the coords object and assign default values to its x and y components, you should do so individually:

function drawES6Chart({size='big', cords: {x=0, y=0} = {}, radius=25} = {}) {
    const coords = {x, y}
    console.log(size, coords, radius);
}

Your initial approach would only set default values if no cords object was provided at all.
You were on the right track with using the complete options object pattern, where the default value is an empty object - instead of this incorrect syntax:

function drawES6Chart({size, cords, radius} = {size:'big', cords:{x:0, y:0}, radius:25}) {
    // not working

Answer 2

To properly destructure the coords object and assign default values to its x and y components, you should do so individually:

function drawES6Chart({size='big', cords: {x=0, y=0} = {}, radius=25} = {}) {
    const coords = {x, y}
    console.log(size, coords, radius);
}

Your initial approach would only set default values if no cords object was provided at all.
You were on the right track with using the complete options object pattern, where the default value is an empty object - instead of this incorrect syntax:

function drawES6Chart({size, cords, radius} = {size:'big', cords:{x:0, y:0}, radius:25}) {
    // not working

Answer 3

Answer №2

Providing defaults for the main options object is feasible (as you are doing), however, it is not possible to do so directly for nested objects within it.

I personally appreciate bergi's response, but as Paul mentioned, it explicitly defines the symbols x and y inside the function.

If this isn't desired, an alternative approach would be to use Object.assign within the function:

cords = Object.assign({}, {x: 0, y:0}, cords);

Though it may have a resemblance to ES5...

To prevent redundancy, you can store the defaults in a variable: (live copy on Babel's REPL)

let cordsDefaults = {x: 0, y: 0};
function drawES6Chart(
  {size = 'big', cords = cordsDefaults, radius = 25} = {}
  )
{
  cords = Object.assign({}, cordsDefaults, cords);
  console.log(size, cords, radius);
  // do some chart drawing
}
drawES6Chart({cords: {x:18}});

Result:

big {"x":18,"y":0} 25

Answer 4

Providing defaults for the main options object is feasible (as you are doing), however, it is not possible to do so directly for nested objects within it.

I personally appreciate bergi's response, but as Paul mentioned, it explicitly defines the symbols x and y inside the function.

If this isn't desired, an alternative approach would be to use Object.assign within the function:

cords = Object.assign({}, {x: 0, y:0}, cords);

Though it may have a resemblance to ES5...

To prevent redundancy, you can store the defaults in a variable: (live copy on Babel's REPL)

let cordsDefaults = {x: 0, y: 0};
function drawES6Chart(
  {size = 'big', cords = cordsDefaults, radius = 25} = {}
  )
{
  cords = Object.assign({}, cordsDefaults, cords);
  console.log(size, cords, radius);
  // do some chart drawing
}
drawES6Chart({cords: {x:18}});

Result:

big {"x":18,"y":0} 25

Exploring the Depackaging of ES6 Nested Objects

Answer №1

Answer №2

Similar questions

The Next.js Link feature does not always guarantee that the component will render correctly, and the serverSideProps function may not always receive updated

A method to eliminate click events for an element

Tips for creating a seamless merge from background color to a pristine white hue

The Ajax call failed to connect with the matching JSON file

Sending AJAX request within a Twitter Bootstrap modal in Symfony2

Bower downloads the identical package but arranges it in a distinct file structure

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

Instructions on transforming an img into an Image component within next.js

Trigger the Material UI DatePicker to open upon clicking the input field

Accessing JSON array values in a nested controller in AngularJS can be achieved by using

Tips for Utilizing CSS Overflow: Hidden to Prevent the Parent Container from Expanding

Ways to split up array objects in an axios GET request

Techniques for implementing a JS script within a useEffect hook in a functional component

Encountering a SyntaxError with the message 'Unexpected token' while trying to require a module in strict mode from JSON at position 0

How can checkboxes be combined from two separate tables?

What is the best way to detect a specific button press from an external component?

Using API calls to update component state in React-Redux

Discovering the names of files in a directory with Angular

Utilizing square brackets in Node.js for working with URLs

fullpage.js: the content exceeds the height limit