ESNext Syntax

ESNext Syntax – The JavaScript language is still evolving; the syntax for writing JavaScript code isn’t set in stone and evolves over time. Ecma international is the group that establishes the language’s standard, which is formally known as ECMAScript. Every year, a new JavaScript standard is release; the 6th edition, release in 2015, as ES6. The term ESNext, which refers to the most recent standard, would be more suitable. The build phase is what transforms the newest JavaScript syntax into a version that browsers can understand.

The following are some of the most popular ESNext syntactic patterns use in the Gutenberg project.

Destructuring Assignments – ESNext Syntax

You may use the destructuring assignment syntax to separate arrays or attributes from objects into their own variables.

For the object:

const obj = { foo: "bar" }

Creating and assigning a new variable foo can be done in a single step:

const { foo } = obj;

The left-hand curly brackets tell JavaScript to look for the property foo in the object obj and assign its value to a new variable of the same name.

Arrow Functions – ESNext Syntax

Arrow functions give a more concise syntax for creating a function; this is such a common job in JavaScript that having a more concise syntax is quite useful.

Before, you might have defined a function such as:

const f = function ( param ) {
    console.log( param );
};

Using arrow function, you can define the same using:

const g = ( param ) => {
    console.log( param );
};

If the function is a single-line function, you can omit the curly braces:

const g2 = ( param ) => console.log( param );

We aren’t very concerned with the return values in the examples above because we’re using console.log. When utilizing arrow functions in this fashion, however, the return value is set to the line’s return value.

For example, our save function could be shorten from:

save: ( { attributes } ) => {
    return <div className="theurl">{ attributes.url }</div>;
};

To:

save: ( { attributes } ) => <div className="theurl">{ attributes.url }</div>;

There are even more techniques to reduce code, but you don’t want to go too far and make it difficult to understand.

Imports – ESNext Syntax

Importing variables or functions from an export file is control with the import statement. Destructuring can be use on imports, for example:

import { TextControl } from '@wordpress/components';

This will look for the exported TextControl variable in the @wordpress/components package.


A package or file can also provide a default export, which will be import without the curly brackets. As an example,

const edit = ( { attributes, setAttributes } ) => {
    return (
        <div>
            <TextControl
                label="URL"
                value={ attributes.url }
                onChange={ ... }
            />
        </div>
    );
};
 
export default edit;

To import, you would use:

import edit from './edit';
 
registerBlockType( 'softhunt/qrcode-block', {
    title: 'QRCode Block',
    icon: 'visibility',
    category: 'widgets',
    attributes: {
        url: {
            type: 'string',
            source: 'text',
            selector: '.theurl',
        },
    },
    edit,
    save: ( { attributes } ) => {
        return <div> ... </div>;
    },
} );

Note, you can also shorten edit: to just modify as shown above The property edit will be automatically assigned to the value of edit by JavaScript. Another type of destructuring is this.

Summary

It is beneficial to become acquainted with the ESNext syntax as well as the most frequent shorter forms. It will help you comprehend what’s going on while you’re reading code samples.

That’s all for this article if you have any queries please contact us through our website or email us at [email protected] or by using LinkedIn

Suggested Articles:

  1. JavaScript ES12 Features – ECMAScript 2021
  2. Top 10 ES6 features by example
  3. ES6 Syntax and Feature Overview

Leave a Comment