JavaScript: The Recent Parts

Default Assignment Q&A

Kyle Simpson

Kyle Simpson

You Don't Know JS
JavaScript: The Recent Parts

Check out a free preview of the full JavaScript: The Recent Parts course

The "Default Assignment Q&A" Lesson is part of the full, JavaScript: The Recent Parts course featured in this preview video. Here's what you'd learn in this lesson:

A question is asked about the proper way to give a default assignment.

Preview
Close

Transcript from the "Default Assignment Q&A" Lesson

[00:00:01]
>> Student: I've seen in the past people use like a placeholder like default object that includes the entire tree. Just to be more semantic about it, is that-
>> Kyle Simpson: Do you mean here they're using that?
>> Student: Yeah, yes, it would be at the top level. Does that seem like overkill?

[00:00:19]
>> Kyle Simpson: So there is a little bit of a nuance here. Lemme jump into that when we talk about defaults and destructuring. So if I have, lemme see if I can come up with a good example here. If I have an o,
>> Kyle Simpson: That has an a in it with a b 2 and a c 3,

[00:00:46]
>> Kyle Simpson: We call this o1.
>> Kyle Simpson: And I have another o2 which has an a in it, with an empty object, and then I'll say, o3 has no a at all.
>> Kyle Simpson: And then we want to talk about destructuring these three values. So if I said something like var,

[00:01:18]
>> Kyle Simpson: Let me be structured on the other side so that we're not running out of room over here. So if I wanted to destructure the o 1, the o2, and the o3, I would say something like var. And then an object with an a property, and then let's say that I wanted to provide a b and defaulted to 10, and then get a c and default that to 20.

[00:01:42]
>> Kyle Simpson: And I set that equal to o1. If I remove b here, what is b end up getting? The value 10. If I remove c here, c ends up getting the value 20. What happens if I remove a here?
>> Kyle Simpson: I'm gonna get a type error, cuz I don't have a default for it.

[00:02:06]
So I do need my default, right? But now, what happens if, in my default, I were to try to say b 10, and c 20, and not put those here.
>> Kyle Simpson: If I leave off b, what is b gonna be?
>> Student2: [INAUDIBLE]
>> Kyle Simpson: [LAUGH]
>> Student2: Just undefined.
>> Kyle Simpson: It's gonna be just undefined, because this thing doesn't even get involved in the case of o1, since there is an a.

[00:02:46]
What happens if I use o2, what is b gonna be?
>> Student3: 10.
>> Kyle Simpson: Still undefined. The only time that b is gonna end up with this default value of 10 is in the o3 case where there was no a at all. You with me? So, the difference between putting the defaults in a, as you said, a default object structure, and putting them inline into your pattern, is whether or not it's resilient to the case that the object is completely missing or not.

[00:03:22]
>> Kyle Simpson: So it is a strong recommendation that you do your defaults here, and then basically just always use an empty object. I've never ever needed a case to have my default be some non-empty object or non-empty array.
>> Kyle Simpson: It's always better to put the defaults in the inline, it's more robust that way.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now