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

Fade out when the anchor is clicked and fade in the href link

"Encountering a strange issue where submitting a form with Jquery and AJAX in Rails does not work as expected, causing the index

Ensure that an input field on the PHP form is required

JavaScript function to provide a range of numbers based on a specified number and step value

Utilizing database information to dynamically select Nightwatch.js tests for execution

Is it possible for a search box selection toggle to reveal a hidden information box underneath it containing all the compiled data?

How to retrieve an element using a dynamically generated class name in Vue.js

Tips on customizing the appearance of JavaScript output?

stop all HTML5 videos when a specific video is played using jQuery

Google Maps introduces a new feature that creates a blur effect on

How to Handle Jquery POST Data in Express Servers

What is the best way to deliver flash messages using Express 4.0?

Issue: [ng:areq] The parameter 'PieController' is not properly defined, it is currently undefined

To begin utilizing Node.js modules, you must use the `#` symbol as the starting point

Different ways to manipulate the CSS display property with JavaScript

Leveraging variables from views.py in JavaScript

Trouble with jQuery event.keyCode in detecting alphanumeric characters

Using React to access the properties of objects within an array that has been dynamically mapped

The problem with Ajax POST is occurring in Firefox and Chrome, but not in IE8

Interact with HTML Radio Buttons to Trigger Input Opening