SenchaCmd 7.8
Tags: extjs, javascript
Published: 2024-05-22 09:56:11

Anyone who uses ExtJS knows [SenchaCmd](https://docs.sencha.com/cmd/7.8.0/index.html): a tool that allows automating numerous operations necessary during development with [ExtJS](https://www.sencha.com/products/extjs/). One of its main features is creating the *production version* of the WebApp we are building.

This task involves a certain degree of transformation of the JavaScript code:

* [Preprocessing](https://docs.sencha.com/cmd/7.8.0/guides/advanced_cmd/cmd_compiler_reference.html) of the code
* [Transpilation](https://en.wikipedia.org/wiki/Source-to-source_compiler) of the code for compatibility with older browser versions
* Merging all sources (including ExtJS itself) into a single file
* Compression ([minification](https://developer.mozilla.org/en-US/docs/Glossary/Minification)) of the files

All these operations require `SenchaCmd` to understand the JavaScript code, and unfortunately, until version *7.7*, some features introduced in JavaScript in recent years are not supported.

# Modern JavaScript

Since ES6 (introduced in 2015) numerous features have been added to the standard [year by year](https://en.wikipedia.org/wiki/ECMAScript_version_history). Below, I have included an entirely arbitrary list of ES6+ features, highlighting which do not work with `SenchaCmd` and which work starting from version *7.8*.

## Spread operator (ES6)

👍 **Compatible even with older versions of SenchaCmd.**

Allows you to "spread" an array as if it were a list of variables.

```javascript
    const q1 = ["Jan", "Feb", "Mar"];
    const q2 = ["Apr", "May", "Jun"];
    const q3 = ["Jul", "Aug", "Sep"];
    const q4 = ["Oct", "Nov", "May"];

    const year = [...q1, ...q2, ...q3, ...q4];
    console.log(year);
```
## Destructuring assignment syntax (ES6)

📣 **Supported starting from SenchaCmd `7.8`!**

Allows assigning the elements of an array or object to a series of variables in a single operation.

```javascript
    let [a, b] = [1, 2];
    console.log(a, b);

    let {k, w} = { k:1, w:2 };
    console.log(k, w);
```

## Exponentiation Operator (ES2016)

⚠️ **DOES NOT WORK EVEN WITH 7.8!**

Allows the use of the "power" operator.

```javascript
    const x = 5 ** 2;
    console.log(x);
```

## Async/await (ES2017)

👍 **Compatible even with older versions of SenchaCmd.**

Allows using [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) as if they were synchronous functions.

```javascript
    const response = await fetch('/');
    console.log(response.statusText);
```

## JavaScript Object Rest Properties (ES2018)
📣 **Supported starting from SenchaCmd `7.8`!**

Extends the *destructuring assignment* functionality to retrieve values not included in the list into an array.

```javascript
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    console.log(x,y,z);
```

## Optional catch Binding (ES2019)

⚠️ **DOES NOT WORK EVEN WITH 7.8!**

Allows handling all exceptions without specifying the type.

```javascript
    try {
        // code
    } catch {
        // code
    }
```

## The optional chaining operator (ES2020)

📣 **Supported starting from SenchaCmd `7.8`!**

Allows reading a property from a *null* or *undefined* object without throwing an exception.

```javascript
    const test = {
        dog: {
            name: 'Pluto'
        }
    };
    console.log(test.cat?.name);
    console.log(test.dog?.name);
```

## The nullish coalescing operator (ES2020)

📣 **Supported starting from SenchaCmd `7.8`!**

Returns the first non-null value from a list.

```javascript
    const foo = null ?? "default string";
    console.log(foo);
```