Check out a free preview of the full JavaScript: The Recent Parts course
The "Declaration & Assignment" 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:
Kyle defined the difference between declaration and assignment, and explains both in the context of destructuring.
Transcript from the "Declaration & Assignment" Lesson
[00:00:00]
>> Kyle Simpson: Okay, this destructuring pattern that we've been talking about has on the left hand side been var declarations as we went along. But if we've had already declared those variables, if I had already said,
>> Kyle Simpson: That those variables existed, then I could have done those assignments without any var declarations, right?
[00:00:22]
As a matter of fact, what we're getting at here is that the assignments aren't inherently related to declarations, that's just the convenience that you can do assignment along with declaration. The same is true of destructuring, we could have defined these variables first ahead of time and then done a destructuring separate of a declaration.
[00:00:43]
So we could have said var first, second, third, and fourth. And then we could have just done a destructuring without any var statement on it. Destructuring is actually about the assignments, it's not about the declaration.
>> Kyle Simpson: Of course, if we're gonna assign them to variables that already exist, we could also assign them to entirely other locations.
[00:01:20]
Anything that would be valid to assign it to, in spec speak that's called a valid left-hand side target. Any place that we could assign it to validly would be okay. So we could have an o object here, var o = object. And then I could say o.first and o.second and o.third and o.fourth, right?
[00:01:49]
>> Kyle Simpson: I could do the exact same thing on this side. I could have had an o object and I could have said o.first and o.second and o.third and o.fourth.
>> Kyle Simpson: Of course, it could have targeted not an object but another array if I wanted to. So I wouldn't have said o.first, I would have said something like o(3).
[00:02:20]
If o was an array, then we could have said o[3] and o [10] and o[42] and o[100]. And the exact same thing would be true over here. We could have an array and then have these references.
>> Kyle Simpson: I suppose this would be technically more equivalent.
>> Kyle Simpson: So in other words, array destructuring is just the assignment part, not the declaration part.
[00:03:35]
And anything that we could validly assign to, it's okay to show up in the imperative forum, it's also okay to show up in the declarative form. What would have happened if I had done something like var o[3]?
>> Kyle Simpson: It's a little bit of a trick question, that would've been a syntax error.
[00:04:01]
That's not valid to show up on the left-hand side of an equals, I mean, it is valid to show up in left-hand segment. It's not valid to show up in a declaration. That's not a valid identifier that you would declare. So if it's not a valid thing that you would declare, it's also not valid to do the declaration with your destructuring syntax.
[00:04:21]
And you see there that my SyntaxHighlighter is telling me, something's wrong here, that's not syntactically valid.
>> Speaker 2: Yeah, on line 11 on the right-hand side, that would just put if there were five or six other items into the gather syntax, that would just put an array with those items at index 100.
[00:04:50]
>> Kyle Simpson: Yeah, it's not flattening get out into the array, it just adding that array at that position.
>> Kyle Simpson: All right, I said that we could actually put the assignment on either side. So in the same way that I could say temp = data, and then break it down, if I wanted to have the break down.
[00:05:20]
>> Kyle Simpson: So if I wanted to assign the o,
>> Kyle Simpson: And I wanted to have temp, then I could say temp = this and that equals data. Now here's where people are gonna often get confused is because if this was a subset, like if I left those out, people might get confused and think that temp is not gonna point at the entire array.
[00:05:55]
And I think that temp is only gonna point at the subset that we see in the pattern. But you have to understand that the way assignment expressions work is that an assignment expression, whatever it is, if it's x equals three, the result of the assignment expression is the entire value that was subject to assignment.
[00:06:17]
So the result of this assignment expression is the entire array 1, 2, 3, regardless of how much or little of it was assigned off. It's the whole thing that was subject to assignment, which is why then that temp ends up pointing at the whole array 1, 2, 3.
[00:06:38]
I would say I more typically will put, if I need to capture and also destructure I will more typically put it in this particular order. Meaning that I put the temp there, but there is a little caveat and we'll see that when we talk object destructuring, where it can be convenient to do it the other way around.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops