In 2016 Matt Mullenweg told us:
#1 – Destructuring Objects and Arrays
Let’s suppose we want to see how the interface of editing a paragraph in Gutenberg works. If you’ve read our previous posts on Gutenberg, you know we have to look at the
edit component of the relevant block. In our case, this component is
ParagraphBlock and the first thing we’ll find in its render method, line 127, is this:
What is all this? Well, let’s start with something easier. Imagine you have an object like the following:
Destructuring objects and arrays makes it possible to unpack values from arrays, or properties from objects, into distinct variables:
With a single statement, we were able to recover the
content of our
post. And this is precisely what Gutenberg was doing in our first snippet: we pulled the
attributes object, the
setAttributes function, the
isRTL attribute, etc. of
A little more confusing, but equally interesting, is the possibility of extracting attributes from nested objects. That is, starting from an object such that:
we can retrieve values in
post as well as values in a nested object, such as
Now pay attention: every time we destructure an object, the variables we create have the same names as the attributes we’re pulling. This begs the question: what would happen if we want to recover multiple
id attributes from different nested objects? For example, in our case, both the
post and its nested object
author have an id, so…
can we pull these two values out? The solution lies in aliases:
That is, we can specify the attribute we want to pull (for example,
author.id) and the name of the variable that will hold its value (
authorId) all at once.
Finally, let me tell you that destructuring also works with arrays:
as well as function parameters. That is, if one of the parameters in our function is an object, we can destructure it in the function definition itself:
Pretty handy, huh?
#2 – Arrow Functions
Another fairly common example. If you take a look at captions the Gutenberg image blocks, you’ll see the following on line 693 :
What is the
value in parentheses? Why is there an arrow? What is that about
setAttributes with curly braces inside? Argh!!
Well, let’s decrypt this step by step. When you see an arrow like
=>, you just met an arrow function. An arrow function can be extremely similar to classic functions, but they use a slightly different syntax:
The main advantage of arrow functions is that they can be further simplified, making the code even more compact. For example, if your function has a single instruction, you can save the curly braces and the
return keyword, since the function will automatically return the result of evaluating its only statement:
Another simplification that we can make are the parentheses in its argument list. If we are writing a function that has a single parameter, the parentheses become optional:
#3 – Spread and Rest Operators
Back to the paragraph block, take a look at line 64 :
What the heck?
Well, let me introduce you to the spread operator:
Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
Let’s start with the simplest example. Suppose we have an array with a certain number of elements and we want to put it inside another array. We can achieve this with:
With it, we are “expanding” (hence the operator’s name) the elements of one array (
list) within the other (
This also works with objects:
Now look at the following example (which is a copy of the Gutenberg example with which we have opened this section):
If I am expanding two objects that have properties in common, the resulting object will contain the union of properties of both objects and, for every “repeated” property, it will contain the value of the object on the right. Thus, for example, the
title attribute that is repeated in both objects, contains the value of the object
newAttributes, while the other attributes (
author on the one hand and
words on the other) appear in the result with the only values they could contain.
A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.
#4 – Template Literals
Template literals are widely used in Gutenberg. You can see an example in the following
index.js, line 133:
Or, even more complicated, inline 136:
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called “template strings” in prior editions of the ES2015 specification. Here you have another example similar to the first one we’ve just seen:
Now, what was happening in the second example? Basically, we are creating an object with properties whose “names” are dynamic (some use a variable, other use template literals). Let’s see this with a shorter example:
Easier than you expected, isn’t it?
#5 – Bye bye for and while
Finally, I would like to end this post with a couple of functions that are very useful for working with arrays and with which you should already be familiar. Both can be found, for example, in the block of Gutenberg columns. Indeed, I am talking about
map (line 136) and
reduce (line 119). Let’s see what each of them is for and how you can use them.
map method creates a new array with the results of calling a provided function on every element in the calling array:
Basically, it’s a method that runs through all the elements of an array (that’s the
for statement) and applies a function in each element (the “body” of the classic
reduce methodis very similar to
map, but instead of returning an array whose elements are the result of applying a function to the original elements, it returns a single value. That is, a method that allows you to apply a function to an accumulator and to each value of an array (from left to right) to reduce it to a single value. For example: