JavaScript: The Recent Parts

Parameter Arrays

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 "Parameter Arrays" 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 demonstrates how to apply destructuring when the function signature contains an array, and applies the concept of gracefully falling back when what was returned is null.


Transcript from the "Parameter Arrays" Lesson

>> Kyle Simpson: All right. If we can do array destructurings on our assignment list, we can also do them in parameter positions. So again, I'll make a new tab and I will make a data function.
>> Kyle Simpson: And let's say that data would receive as a parameter an array that I would then later break down as first, second, and third.

And I would break that thing down as tmp.
>> Kyle Simpson: This is not actually the ES5 equivalent, but this is just showing you I could do it that. And then, I would have a first, second, and third, and I could do something with them. But we actually have the ability to do destructuring directly in a parameter position.

We can say an array here in that position. The array here is expecting to have first, second and third values in it. And then inside of our array, inside of our function, we can do whatever we want with those. So we're essentially saying I don't care about the array that you're passing, I only care about is those three elements in that array, and I wanna name them first, second and third.

Notice how I formatted my function signature here. I'm using multiple lines, again, for readability. Don't try to stuff your entire long function signature all in one line.Use extra lines, use wide space make it as readable as you can.
>> Kyle Simpson: All right, what would happen, let's go back to this example, what would happen in this code if I go back to the place where we had second here?

What will happen if I did not return an array at all? Or what was returned was something non array like null. Let's use that. What would happen with line seven, the syntax error? It would not be a syntax error, it would be a what kind of error?
>> Class: A type error.

>> Kyle Simpson: A type error, because we'd be trying to access position 0 on a null value, which is not a legal operation. You can't access position 0 on a null. So that would not be allowed and we'd be throwing a type error. And the exact same thing is true over here on our destructuring side if we tried to destructure this thing down, and we did an array destructuring of what ended up being a null value.

We're gonna get a type error. So again, we're trying to reinforce, there is a mental processing model that you should have in your head, which is that destructuring syntax is essentially doing, it is essentially sugar for doing this imperative thing that we did before.
>> Kyle Simpson: And any error that we would have before, we would have with our destructuring.

There is very few places where there would be any kind of diversion between their behaviors. So how would I fix this over here on this side? How would I fix it so that I had some sort of graceful fall back, where first, second, third and even fourth would just end up, first, second and third would end up as undefined.

And fourth end up as an array. The way that I would typically solve this is to provide a fallback or a default empty array. So over here, I might say or empty array. If data comes back falsey, then this OR operator is basically saying, don't worry about it, we'll just pick up on this empty array.

And now tmp[0] and tmp[1] and tmp[2] and tmp.slice(3), all those are not gonna fail. They're just gonna end up producing undefines and then the empty array. So this is an effective way of providing a fallback default. How would we do that over here with the structuring? In exactly the same way, provide an empty array as the fallback

>> Kyle Simpson: So what about when it's a parameter that we're passing in? Remember this function? When it's a parameter that we're passing in, how could we make sure that this wouldn't fail if 10th came in as, say, undefined?
>> Class: Default value, right there.
>> Kyle Simpson: I'd use a default value in the parameter of an empty array.

And the exact same thing is true with our destructuring. We can have a default parameter value.
>> Kyle Simpson: In fact, it's a really, really good idea to get in the habit of putting in those default values, because in my experience, almost always people want their destructuring patterns to gracefully fallback to let's say, undefined or whatever, rather than to throw type errors at them.

It's very rare in my experience that you wanted to fail hard with a type error. You usually just want this pattern to gracefully degrade.
>> Kyle Simpson: And also, you probably want some defaults here. You probably wanna say, I wanna default this thing to 10, this thing to 20, and this thing to 30, oops.

And we would do that over here. We could default that to 10, and that to 20, and that to 30.
>> Kyle Simpson: If we did not have this part included and we didn't pass an array, we're not gonna get a first, second, and third of 30 or 10, 20 and 30.

We're gonna get a type error. But now that we have an array, we're definitely guaranteed, as our default backup, we're definitely guaranteed that at a minimum, we're gonna get a first, second, and third that default to 10, 20, 30.

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