CODEWITHSUNDEEP
javascriptecmascript-6
J-fish
J-fish

Reputation: 228

Setting default values for each key in a deconstructed nested object in JavaScript

I know, generally, how to deconstruct a simple object in Javascript. I also know how to give default values to simple objects during deconstruction.

For example, I can pass two different nested objects to a logger function. Where the logger function simply console logs a nested array

var firstExample = { name: "foo", number: 1, myObject: { myArray: [1, 2, 3] } };
var secondExample = { name: undefined, number: undefined, myObject: { myArray: [9, 8, 7] } };

var myLogger = ({
  name = "defaultName",
  number = 999,
  myObject: { myArray: stuff }
}) => {
  console.log(`${name} ${stuff}`);
};

myLogger(firstExample); // "foo 1,2,3"
myLogger(secondExample); // "defaultName 9,8,7"

Currently, however, I'm struggle in deconstructing a nested objected and giving it values for each nested key/value pairing.

For example, when I try adding the following code using the same myLogger function a TypeError is thrown.

var myLogger = ({
  name = "defaultName",
  number = 999,
  myObject: { myArray: stuff }
}) => {
  console.log(`${name} ${stuff}`);
};
var thirdExample = { name: "bar", number: 2 };

myLogger(thirdExample) // ERROR
// TypeError: Cannot destructure property `myArray` of 'undefined' or 'null'.

How do I properly write my function to deconstruct the object to avoid this error?

Upvotes: 2

Views: 698

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370879

As the error implies:

Cannot destructure property myArray of 'undefined' or 'null'.

The parent object (myObject) should have a default value of an empty object, so that a (possibly existing) property myArray can be extracted from it (and possibly assigned a default value):

var myLogger = ({
  name = "defaultName",
  number = 999,
  myObject: { myArray: stuff } = {}  // <-------
}) => {
  console.log(`${name} ${stuff}`);
};
var thirdExample = { name: "bar", number: 2 };

myLogger(thirdExample) // ERROR
// TypeError: Cannot destructure property `myArray` of 'undefined' or 'null'.

To assign a default value as well:

var myLogger = ({
  name = "defaultName",
  number = 999,
  myObject: { myArray: stuff = 'stuffDefault' } = {}  // <-------
}) => {
  console.log(`${name} ${stuff}`);
};
var thirdExample = { name: "bar", number: 2 };

myLogger(thirdExample) // ERROR
// TypeError: Cannot destructure property `myArray` of 'undefined' or 'null'.

Note that this will also throw if the function is called with no parameters:

var myLogger = ({
  name = "defaultName",
  number = 999,
  myObject: { myArray: stuff = 'stuffDefault' } = {}  // <-------
}) => {
  console.log(`${name} ${stuff}`);
};
var thirdExample = { name: "bar", number: 2 };

myLogger()

So you might assign a default value to the whole parameter too:

var myLogger = ({
  name = "defaultName",
  number = 999,
  myObject: { myArray: stuff = 'stuffDefault' } = {}
} = {}) => {  // <-------
  console.log(`${name} ${stuff}`);
};
var thirdExample = { name: "bar", number: 2 };

myLogger()

Upvotes: 4

Related Questions