JS.Next: ES6 / ES2015 Old Way vs. New Way

Transcript from the "Old Way vs. New Way" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Aaron Frost: This is how we used to do it, right? At the top of our functions we would have a person and we would call displayPerson. And displayPerson would take the incoming person and it would store its name and store its age, and it'd make sure that they weren't undefined or whatever.

[00:00:18] And then it would do something with, display him, yeah?
>> Speaker 2: Somebody had a question on, wouldn't an object reference be more declarative? Looks counter productive at first glance.
>> Aaron Frost: I don't understand what he means, do you know what he means?
>> Speaker 2: Maybe from the previous slide there.
>> Speaker 2: An object reference be more declarative.

[00:00:40] I could ask him to clarify it.
>> Aaron Frost: Yeah,
>> Aaron Frost: I mean, it could be, but not necessarily, I mean, it depends on what you're doing. And, and again, part of this is probably preference, some people are probably gonna not like point destructuring reads, and so they might not use it, but I really like it.

[00:01:00] If he asked that question and if he clarifies, I mean no. He says this example is cool, okay. All right, so yeah, this is how you'd normally would do it manually, right? You'd have your person object and you'd pass it in here and then you pull it apart and eventually end up doing something with it to make it display.

[00:01:23]
>> Aaron Frost: And so, this is kinda how we've always manually destructured our stuff in the past, we're now just kinda have some sugar on it. And we've spent the first x lines of our code kind of marking up the top of the of the function, getting all these things ready and making sure that they're not undefined.

[00:01:41] But now we can do it just in one line of code, so instead of having to pull it apart like this, we can pull it apart, the syntax is easier. And we can actually get it all in one line of code, do you guys think this is more readable?

[00:01:58] Or do you think that was more readable?
>> Aaron Frost: What do you guys think?
>> Speaker 3: I think that's more readable.
>> Aaron Frost: You think this is? I think too, but some people are not sure yet, some people are like I don't know, so what about that way?
>> Aaron Frost: You guys think that's even more readable to do it that way?

[00:02:23] So I know that I've got an object coming in as the first parameter so I just throw it straight up into the method signature. Is that better, or worse?
>> Aaron Frost: And then, your method body is just, displayPerson only cares about that now, right? It doesn't care about, you know, pulling things apart, or anything.

[00:02:46] You can just kinda put that all in the language, so I kind of like this, I'm super excited about this stuff. So yeah, for me, this is, and seriously, no one applauded, with refresh.
>> Students: [LAUGH] [APPLAUSE]
>> Aaron Frost: Maybe someone online did, we didn't hear them, okay.
>> Speaker 5: The order here doesn't matter, so we could switch age and name and it will still be okay?

[00:03:09]
>> Aaron Frost: Yeah, cuz there's no explicit order on an object anyway, right? Just key-value pairs, but yeah, if I switched name and then age, you'd still have a variable called name with the name value and a variable called age with age value.
>> Speaker 6: So you can pass variable and then also pass with a comma object, close everything in?

[00:03:34] So like displayPerson, I have x and then comma person. And so you're passing that into display person.
>> Aaron Frost: So let's copy this over and we'll get your question going. So what's your question?
>> Speaker 6: So, I have var x equals something, I don't care. So I have a displayPerson x and comma, or-

[00:04:04]
>> Aaron Frost: Or x, yeah.
>> Speaker 6: Yeah, so you're passing in like that.
>> Aaron Frost: Yeah, so that means I'm taking in whatever x is, and x could be a function, it could be an object, and it could be undefined. But this thing has to be an object cuz if I give that an integer and it tries to pull the name off of an integer, off the age, so it'd freak out.

[00:04:26] And we'll talk more about how it's gonna freak out. But, it's gonna lose its stuff if I tried to pass not an object into this destructuring pattern, it freaks out, yeah?
>> Speaker 7: Kinda related to what you just said, the question was, what if it doesn't have a name property?

[00:04:42] Does name come through as null or undefined, then?
>> Aaron Frost: It can if you tell it to, but we haven't told it to yet, right now we're just doing the happy path. I'll show an example, I promise, we're gonna get to that. Whoever asked that question, cuz it's a great question, Eric.

[00:05:00] Okay, yeah, so it's all done in the method signature and for me we're gonna get into default values in a second. See, you can totally destructure and data proof the function, zero lines of code in, and I think it's more readable anyway. So, your functions will be less cluttered and they'll have just more of what you care about.

[00:05:26] So, I think this is the best, this is the most readable way for me. If I looked at a function, I know exactly what's going on here.
>> Aaron Frost: So, remember I said you could do default values as well? So, if I wanted to make sure that there was at least a name.

[00:05:47] So, if someone passed in a person that didn't have a name, I can at least say, well, at least put No Name Provided or if there's no age, at least put 0. Don't let it be undefined, give me a name so we can kind of get it all done up in the method signature.

[00:06:06] So, when you couple those two I think this is where it gets awesome, I think it's exciting. So, this is another way you could use it to destructure your throw error messages. Yeah, we have a question.
>> Speaker 2: Instead of passing an object as a parameter could you pass a variable and that references that object?

[00:06:30]
>> Aaron Frost: I'm gonna go back to the code, is that okay? I think that's what I was already doing. So I have a person and I'm passing the reference. Is that what the person was asking, cuz-
>> Speaker 2: We'll see here, they're a few seconds behind us.
>> Aaron Frost: I don't know, there goes-

[00:06:53]
>> Speaker 6: How do you deal with the nested?
>> Aaron Frost: Nested?
>> Speaker 6: Yeah, nested.
>> Aaron Frost: You're like three slides ahead. Yeah, but that's a good question right? Cuz not everything's one level deep, right? So, we need to know how to do that, good question, okay.
>> Speaker 2: He said yes, thanks.

[00:07:13]
>> Aaron Frost: This guy says, ES6, shut up and take my money, okay, I love it.