In 2016 Matt Mullenweg told us:
I’m going to give you some homework: learn JavaScript deeply (…) because it’s the future of the web.
Matt Mullenweg (on YouTube)
I don’t know if you followed his advice three years ago, but if you didn’t, you can’t postpone it anymore. The official release of the block editor has forced many developers to get up to speed with JavaScript. The language is becoming more and more relevant within WordPress and, if we do not want to stay behind, we must improve our skills with it.
In the past I wrote a post about what you can achieve using vanilla JavaScript, without libraries like jQuery. Today I want to go a step further and explain some of the novelties that are in the new versions of JavaScript and that are shocking the first time you see them. I think it’s important that you know them, because they’re present in all new JavaScript projects (including Gutenberg, of course).
Let’s learn JavaScript with Gutenberg!
#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 id, title, and 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 this.props.
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 id or name in author:
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 (result).
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.
Nelio Forms
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.
Wajari Velasquez
#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.
The 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 for).
The 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:
Wrapping Up
As you can see, new versions of JavaScript add constructions that allow writing code more efficiently and comfortably, but its syntax can be confusing at first. I hope that today’s post has helped you understand what’s new in JavaScript and how to use its new structures and functions.
I really like the way JavaScript is evolving, as I think it allows you to write better and more readable code (once you know how to read it, of course). What do you think? After reading this post, are you already keen to “learn JavaScript deeply” once and for all?
Featured image by Ross Findon on Unsplash.
Leave a Reply