2022-10-09 23:47:32 +02:00
|
|
|
---
|
2022-10-11 15:06:54 +02:00
|
|
|
title: A part's draft method
|
2023-09-30 14:04:18 +02:00
|
|
|
order: 50
|
2022-10-09 23:47:32 +02:00
|
|
|
---
|
|
|
|
|
|
|
|
Time to turn our attention to the draft method of our part.
|
2023-09-30 14:04:18 +02:00
|
|
|
Inside our `src/bib.mjs` file, this is what it currently looks like:
|
2022-10-09 23:47:32 +02:00
|
|
|
|
2023-09-30 14:04:18 +02:00
|
|
|
```src/bib.mjs
|
2023-09-28 09:11:06 +02:00
|
|
|
function draftBib({ part }) => {
|
2022-10-09 23:47:32 +02:00
|
|
|
return part
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
This is an empty skeleton for a draft method. A draft method should always
|
|
|
|
return the part object, and that's effectively the only thing it currently
|
|
|
|
does.
|
|
|
|
|
|
|
|
## Destructuring the function parameter
|
|
|
|
|
|
|
|
If you're not familiar with the `({ part })` syntax you see above, this is a
|
|
|
|
technique called *parameter destructuring* or more generally, [object
|
2022-12-29 06:25:01 -08:00
|
|
|
destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
|
2022-10-09 23:47:32 +02:00
|
|
|
|
2023-01-06 19:29:29 -08:00
|
|
|
The draft method receives only 1 parameter: An object that holds everything we
|
|
|
|
need to draft our method. Destructuring is a way to *pull things out of the
|
2022-10-09 23:47:32 +02:00
|
|
|
object into their own variable*. It saves us a bunch of typing as these two are
|
|
|
|
equivalent:
|
|
|
|
|
2022-10-10 04:50:43 +02:00
|
|
|
<Tabs tabs="Without destructuring, With destructuring">
|
|
|
|
<Tab>
|
2023-09-30 14:04:18 +02:00
|
|
|
```src/bib.mjs
|
2023-03-21 22:21:00 -07:00
|
|
|
function draftBib(props) {
|
|
|
|
|
|
|
|
return props.part
|
2022-10-09 23:47:32 +02:00
|
|
|
|
|
|
|
}
|
|
|
|
```
|
2022-10-10 04:50:43 +02:00
|
|
|
</Tab>
|
|
|
|
<Tab>
|
2023-09-30 14:04:18 +02:00
|
|
|
```src/bib.mjs
|
2023-03-21 22:21:00 -07:00
|
|
|
function draftBib({ part }) {
|
2022-10-09 23:47:32 +02:00
|
|
|
|
2023-03-21 22:21:00 -07:00
|
|
|
return part
|
2022-10-09 23:47:32 +02:00
|
|
|
}
|
|
|
|
```
|
2022-10-10 04:50:43 +02:00
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
2022-10-09 23:47:32 +02:00
|
|
|
|
|
|
|
As we'll make our way through this tutorial, we'll need more and more stuff, so
|
|
|
|
we'll be pulling it out of the object passed to the draft method via
|
|
|
|
*destructuring*.
|
|
|
|
|
|
|
|
<Note>
|
|
|
|
|
|
|
|
If you're new to JavaScript, and don't intuitively _get this_, stick with it. It will become second nature soon enough.
|
|
|
|
|
|
|
|
</Note>
|
|
|
|
|
|
|
|
## Destructuring what we need to start drawing our bib
|
|
|
|
|
|
|
|
Change the function to look like this:
|
|
|
|
|
2023-09-30 14:04:18 +02:00
|
|
|
```src/bib.mjs
|
2023-01-06 19:29:29 -08:00
|
|
|
function draftBib({
|
2022-10-11 01:37:09 +02:00
|
|
|
// highlight-start
|
2023-01-06 19:29:29 -08:00
|
|
|
Path,
|
|
|
|
Point,
|
|
|
|
paths,
|
|
|
|
points,
|
2022-10-11 01:37:09 +02:00
|
|
|
// highlight-end
|
2022-10-09 23:47:32 +02:00
|
|
|
part,
|
|
|
|
}) {
|
|
|
|
|
|
|
|
return part
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
That's bunch of new lines, but each of one gives us something we'll use in this
|
|
|
|
tutorial.
|
|
|
|
|
|
|
|
For a complete list of what you can access via destructuring like this, refer
|
|
|
|
to [the draft method reference documentation](/reference/api/part/draft).
|
|
|
|
Here's a brief summary of the things we've added above:
|
|
|
|
|
2023-01-06 19:29:29 -08:00
|
|
|
- `Path`: The Path constructor, allows us to create new Paths
|
|
|
|
- `Point`: The Point constructor, allows us to create new Points
|
2022-10-09 23:47:32 +02:00
|
|
|
- `points`: A container object to hold the part's points
|
|
|
|
- `paths`: A container object to hold the part's paths
|
|
|
|
|
2024-01-16 20:04:00 -08:00
|
|
|
<Tip compact>Remember: Constructors start with a **C**apital letter</Tip>
|
2023-09-30 14:04:18 +02:00
|
|
|
|
2023-01-06 19:29:29 -08:00
|
|
|
Long story short: These will make it possible for us to draw points and paths easily.
|
2022-10-09 23:47:32 +02:00
|
|
|
|
|
|
|
So let's go ahead and do that.
|