Quiz: Destructuring Delights

What will this code print?

const person = {
  name: 'Dan Levy',
  location: 'Cape Town',
};
const { name, age } = person;
console.log(`Name: ${name}, Age: ${age}`);

The age property does not exist on person, so age will be undefined. Definitely not Infinity 😅

This results in:

Name: Dan Levy, Age: undefined

What will this code do?

const person = [ 'Dan Levy', 'Cape Town' ];
const [ name, origin, age ] = person;
console.log(`Name: ${name}, Age: ${age}`);

The age variable is not present in the tuple array, so it will be undefined.

This results in:

Name: Dan Levy, Age: undefined

How about some nested destructuring?

'use strict';
const person = {
  name: { first: 'Dan' },
  address: { city: 'Denver' },
};
const {
  name: { first },
  address: { city },
  birth: { place },
} = person;
console.log(
  `First: ${first}, City: ${place}`,
);

The birth: { place } property does not exist on person, so it will throw an error. One solution is to provide default values for nested properties.

When accessing nested properties - be careful - as the errors can be hard to spot. And error messages vary between browsers and other platforms, making it a bit more challenging to debug.

In modern Chrome: TypeError: Cannot read properties of undefined (reading 'place')

In Node, this is also a TypeError because JavaScript tries to destructure place from undefined before place is ever read.

Exact wording varies between browsers and runtimes.

Now with some defaults, what will this do?

'use strict';
const person = {
  name: { first: 'Dan' },
  address: { city: 'Denver' },
};
const {
  name: { first = 'Unknown' },
  birth: { place = 'Unknown' },
} = person;
console.log(
  `Hi ${first} from ${place}`,
);

The birth property does not exist on person, so the whole object still needs a default, not just the nested property. Basically it’s missing a = {} default in there.

The way this is written, says “if person.birth is undefined, then place is Unknown”. But person.birth is undefined, so it’s trying to destructure undefined, which results in an error.

In modern Chrome: `TypeError: Cannot read properties of undefined (reading 'place')`
In Node, this is also a `TypeError` because JavaScript tries to destructure `place` from `undefined`.
Exact wording varies between browsers and runtimes.

What will this do?

const person = {
  name: { first: 'Dan' },
  address: { city: 'Denver' },
};
const {
  name: { first = 'Unknown' },
  birth: { place = 'Unknown' } = {},
} = person;
console.log(
  `Hi ${first} from ${place}`,
);

Now as function parameters, what will this do?

'use strict';
function displayUser({
  name = "Unknown",
  age = -1,
} = { place: "Unknown" }) {
  console.log(`Hi ${name} from ${place}`);
}
displayUser({ name: "Dan" });

This function extracts name and age properties, using defaults if necessary. In this case, the place key on the default object is just noise, it’s not used inside displayUser().

Strict mode doesn’t change this one: reading the undeclared place binding throws a ReferenceError.

How are undefined values handled?

'use strict';
function displayPlace({
  name = "N/A",
  place = "N/A",
  age = -1,
} = { place: "Unknown" }) {
  console.log(`${place}`);
}
displayPlace({ name: "Dan" });
displayPlace({ name: "Dan", place: undefined });
displayPlace({ name: "Dan", place: "Joburg" });

The function displayPlace will ONLY use a default object if no object is passed in. So, the only way to get the { place: "Unknown" } default is with zero arguments displayPlace().

Another notable behavior here is that passing undefined for place will cause the default value to be used, a bit similar to JSON.stringify behavior (ignoring undefined, recognizing null).

This results in:

displayPlace() // Unknown
displayPlace({ name: "Dan" }) // N/A
displayPlace({ name: "Dan", place: undefined }) // N/A

Similar to the previous one… how is null handled?_

function displayPlace({
  name = "N/A",
  place = "N/A",
  age = -1,
} = { place: "Unknown" }) {
  console.log(`${place}`);
}
displayPlace({ name: "Dan", place: null });
displayPlace({ name: "Dan", place: undefined });

Now in TypeScript… what will this do?

'use strict';
function displayPlace(
  {
    name = 'N/A',
    place = 'N/A',
  }: {
    name: string;
    place: string;
    age: number;
  },
) {
  console.log(`${place}`);
}
displayPlace({ name: 'Dan', place: null });

TypeScript reports an error because place is typed as string, but the call passes null. The call also omits the required age property.

If you ignore type errors, running the code will print null to the console.

Let’s try some renaming/assignment…

'use strict';
function displayPlace({
  name = 'N/A',
  place: location = 'N/A',
}: {
  name: string;
  place: string;
  age?: number;
}) {
  console.log(`${location}`);
}
displayPlace({ name: 'Dan', place: 'Denver' });

Spot the type error:

function greet({
  name: {first = "N/A", last = "N/A"},
  birth: {place = "N/A"} = {},
  age = -1,
}: {
  name: {first?: string, last?: string};
  birth: {place?: string};
  age: number;
}) {
  console.log(`Hi ${first} ${last} from ${place}`);
}
greet({ name: {first: 'Dan'} });

The error is in the greet function signature. The age and birth properties are missing in the passed object, so they should be optional in the type definition.

Even though the birth property is destructured with a default value, the type definition requires it to be present. In order to mark a property as optional in TypeScript, you should use the ? operator.

Note birth?: { place?: string } isn’t the same as birth: { place?: string } | undefined.

Now with assignment (note the f, l and p variables)

'use strict';
function greet(
  {
    name: {first: f = "N/A", last: l = "N/A"},
    birth: {place: p = "N/A"} = {},
    age = -1,
  }: {
    name: {first?: string, last?: string};
    birth?: {place?: string};
    age?: number;
  }
) {
  console.log(`Hi ${f} ${l} from ${place}`);
  // What will 👆 do?
}
greet({
  name: {first: 'Dan', last: 'Levy'},
  birth: {place: 'Cape Town'},
});

Another Error! You’re starting to guess aren’t you?!

It is hard to read layers of destructuring, with defaults, assignment and types!

As soon as place is reassigned to the p variable it is no longer defined in the scope of the console.log statement.

console.log(`Hi ${f} ${l} from ${place}`); // ❌
// to:
console.log(`Hi ${f} ${l} from ${p}`); // ✅