Object Property Shorthand0:00
Welcome back. Let's talk about objects as we review three different things. First, object shorthand. So imagine I have a dummy function like getPerson, maybe something like that. Okay. And all it's going to do is maybe in real life, it fetches the person from your server. In our case, we'll hard code it. Okay, so maybe let name equals John and let age equals 25. Okay, well, typically with ES5, if you want to return those as an object, you have to do something like this, right? Kind of annoying. A lot of repetition there. But with ES6, we can get rid of it entirely. So in the situations where your property name is the same as the value variable, in that case, you can remove it entirely like this. Pretty cool. So that means I can clean this up drastically and do something like that.
in that case, you can remove it entirely like this. Pretty cool. So that means I can clean this up drastically and do something like that. Let's try it. alert, getPerson, and we want the name. If I switch over to Chrome, give it a refresh, there you go. It just works. Okay, so you're going to use this one all of the time. I'll give you an example. Once again, I work with view quite a bit. So one thing I will frequently do is I will sign my components using this exact shorthand. So I might do something like import HomeView from components/HomeView.view or something like that. Well, once again, in the past, you would have to do something like this. But now, because I'm using ES6, I remove that entirely, and everything will still work. So maybe you have an alert component, maybe you have a notification component, anything like that.
Object Destructuring Basics3:55
extract, where you extract an associative array, and then behind the scenes, you now have a name variable that equals Jeff. Kind of similar to that. So really, this is actually one of my favorite features. It's going to save you a lot of boilerplate code, and I'll show you that in just a minute. But as an example, imagine you make some kind of AJAX request, and as you know, you often get some kind of data object in response, and that will have all of the info that you need. Maybe you have results is an array, and count is set to 30. And maybe all you really care about is this array and the count. And let's just do foobar to simulate some real code. Okay, well, once you fetch that, yeah, typically you end up doing things like var using ES5, like var or let results equal data.results, and let count equal data.count. You know, we end up writing that stuff all the time. But now, we could just say let results and count equal data. Now, once again,
Destructuring Function Arguments4:42
results = data.results, and let count = data.count. You know, we end up writing that stuff all the time. But now, we could just say let results and count = data. Now, once again, just to prove it to you, let's console.log both of those, shift command C to open up Chrome DevTools, give it a refresh, and there you go. There's results, and there's the count. Okay, so as cool as this is, it even gets cooler, I think. We can also use object destructuring as a function argument. So let me undo a few steps. Okay, this kind of stuff right here. So why don't we say function getData. And yeah, like I said, we're going to simulate an AJAX request where, in this case, we just pass a data object to it. That's then going to fetch only what we need off of it. Once again, this is the ES5 way to do it, at least if you had a var going on here. Now, once again, we'll just console.log results and count. Okay, so if we trigger it,
