I often learn something new because I need to solve some kind of problem. Once that is solved, I move on to the next one. I spend a lot of time reading, thinking, trying stuff and trying to make sense of it all. One downside of my learning style is that sometimes I miss some basic stuff. This is a blog about one particular topic. Destructuring.
Let’s say you have a simple object like this:
In your code, you may want to use properties of this object. Let’s say you are going to use the color
red a lot in your code. You might want to assign it to a separate variable like you can see on line 7.
Whenever you now reference the
color variable, it will return
red. Notice that the name of our newly declared variable is the same as the name of the key of our object. To do the same thing, but using destructuring, you can do following:
Notice how the result is exactly the same. We have created a variable with a name
color, that will have a value of
red when we call it.
Now let’s say we want to create a function, that will take a single argument. Inside this function, we have a simple
console.log, that will output
type attributes of a given object. The function looks like this:
We’ll pass our
car object from before to this function, and you can notice the result on line 5. Notice how we create a
param for our function, which is later used inside the body of the function. Now that we know how destructuring works for objects, we can use it and refactor our function like this:
We did the exact thing as in our first example, but this time we used destructuring inside our function parameter. Go back and look at how similar these examples are. The cool thing about using destructuring like this is that we can avoid creating a generic parameter like
param in our function.
The most common use for destructuring in Cypress tests is for situations where I’m passing a yielded object to a
Notice how I create a
todos parameter, similar to our
params from previous example. I use that to make my assertions inside
.then() command. Instead of doing this, I can refactor this code using destructuring:
I think this is pretty neat. I don’t use extra parameters in my code and I can clearly see what I am testing inside my
.then() command. I bet there are tons of great use cases for destructuring in Cypress that I’m still about to discover. If you know of any, don’t forget to let me know on Twitter, I’d love for you to share your knowledge with me.
Hope this helps. Check out my other blogs and if you like these, feel free to subscribe. You’ll get notified whenever I publish another blog.
From time to time I send some useful tips to your inbox and let you know about upcoming events. Sign up if you want to stay in loop.