6 truques de ECMAScript 6

Confira 6 truques de ECMAScript 6 que podem ser bastante úteis em projetos front-end.

ECMAScript 6 ainda está começando a ser usada amplamente por desenvolvedores front-end pelo mundo. Para dar uma ajudinha nos estudos, confira 6 truques de ECMAScript 6 que podem ser bastante úteis.

Impor parâmetros obrigatórios através de valores default

Valores de parâmetros ES6 são avaliados (evaluated) somente quando realmente utilizados. Isso permite impor que um determinado parâmetro seja fornecido:

/**
 * Chamado se um parâmetro não foi encontrado e
 * o valor default é avaliado.
 */
function mandatory() {
    throw new Error( 'Missing parameter' );
}
    
function foo( mustBeProvided = mandatory() ) {
    return mustBeProvided;
}

/**

* Chamado se um parâmetro não foi encontrado e

* o valor default é avaliado.

function mandatory() {

throw new Error( 'Missing parameter' );

}

function foo( mustBeProvided = mandatory() ) {

return mustBeProvided;

}

A chamada de função mandatory() só é feita se o parâmetro mustBeProvided não for fornecido (is missing).

Interação:

> foo()
Error: Missing parameter
> foo(123)
123

> foo()

Error: Missing parameter

> foo(123)

123

Iterar em índices de Array e elementos através de loop for-of

O método forEach() permite iterar nos elementos de um array. Também, é possível ter acesso ao índice de cada elemento, como em:

var arr = [ 'a', 'b', 'c' ];

arr.forEach( function( elem, index ) {
    console.log( 'index = ' + index + ', elem = ' + elem );
} );

// index = 0, elem = a
// index = 1, elem = b
// index = 2, elem = c

var arr = [ 'a', 'b', 'c' ];

arr.forEach( function( elem, index ) {

console.log( 'index = ' + index + ', elem = ' + elem );

} );

// index = 0, elem = a

// index = 1, elem = b

// index = 2, elem = c

O loop for-of de ES6 é um loop que suporta iteração de ES6 (via iterables e iterators) e destructuring. Se se combinar destructuring com as novas entradas de método entries() de Array, obtém-se:

const arr = [ 'a', 'b', 'c' ];

for ( const [ index, elem ] of arr.entries() ) {
    console.log( `index = ${ index }, elem = ${ elem }` );
}

const arr = [ 'a', 'b', 'c' ];

for ( const [ index, elem ] of arr.entries() ) {

console.log( `index = ${ index }, elem = ${ elem }` );

}

arr.entries() retorna um iterable nos pares índice-elemento. O padrão de destructuring [index, elem] permite acesso direto a ambos os componentes de cada par. O parâmetro de console.log() é uma chamada a template literal — quem em JavaScript, traz interpolação de string.

Iteração em caracteres Unicode

Alguns pontos de código Unicode (ou seja, caracteres) compreendem 2 caracteres de JavaScript. Por exemplo, emojis:

Strings implementam ES6 iterador. Se se iteragir neles, recebe-se pontos de código codificados (1 ou 2 caracteres JavaScript ). Por exemplo:

for ( const ch of 'x\uD83D\uDE80y' ) {
    console.log( ch.length );
}

// 1
// 2
// 1

for ( const ch of 'x\uD83D\uDE80y' ) {

console.log( ch.length );

}

// 1

// 2

// 1

Isso fornece uma maneira de contar o número de pontos de código em uma string:

> [ ...'x\uD83D\uDE80y' ].length
3

1 2	> [ ...'x\uD83D\uDE80y' ].length 3

O operador spread (...) insere os itens de seu operando em um array.

Trocar os valores das variáveis via destructuring

Colocando 2 variáveis em um array e, em seguida, aplicando destructuring nesse array nas mesmas variáveis, é possível trocar seus valores sem a necessidade de uma variável intermediária:

[ a, b ] = [ b, a ];

1	[ a, b ] = [ b, a ];

É concebível que o JavaScript otimize esse padrão no futuro para que nenhum array seja criado.

Templating simples através de Template Literals

Template Literals (ou Template Strings) em ES6 são mais como strings literais do que como modelos de texto tradicionais. Mas é possível usá-los para templates se forem retornados a partir de funções:

const tmpl = addrs => `
    <table>
    ${ addrs.map( addr => `
        <tr><td>${addr.first}</td></tr>
        <tr><td>${addr.last}</td></tr>
    ` ).join('') }
    </table>
`;

const tmpl = addrs => `

<table>

${ addrs.map( addr => `

<tr><td>${addr.first}</td></tr>

` ).join('') }

</table>

A função tmpl() (uma função arrow) mapeia o endereço de array em uma string. Usando tmpl() no array de dados:

const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log( tmpl( data ) );

// <table>
//     <tr><td><Jane></td></tr>
//     <tr><td>Bond</td></tr>
//
//     <tr><td>Lars</td></tr>
//     <tr><td><Croft></td></tr>
// </table>

const data = [

{ first: '<Jane>', last: 'Bond' },

{ first: 'Lars', last: '<Croft>' },

];

console.log( tmpl( data ) );

// <table>

// <tr><td><Jane></td></tr>

// <tr><td>Bond</td></tr>

// <tr><td>Lars</td></tr>

// <tr><td><Croft></td></tr>

// </table>

Mixins simples via fábricas de subclasse

Se uma classe ES6 estende outra classe, essa classe é especificada de forma dinâmica através de uma expressão arbitrária (não estaticamente via um identificador):

// Função id() simplesmente retorna seu parâmetro
const id = x => x;
    
class Foo extends id( Object ) {}

// Função id() simplesmente retorna seu parâmetro

const id = x => x;

class Foo extends id( Object ) {}

Isso permite implementar um mixin como uma função que mapeia uma classe “C” a uma nova classe (com os métodos mixin) cuja superclasse é “C”. Por exemplo, as seguintes 2 funções de armazenamento e validação são mixins:

const Storage = Sup => class extends Sup {
    save( database ) { ··· }
};

const Validation = Sup => class extends Sup {
    validate( schema ) { ··· }
};

const Storage = Sup => class extends Sup {

save( database ) { ··· }

};

const Validation = Sup => class extends Sup {

validate( schema ) { ··· }

};

É possível usá-las para compor uma classe Employee, como segue:

class Person { ··· }

class Employee extends Storage( Validation( Person ) ) { ··· }

class Person { ··· }

class Employee extends Storage( Validation( Person ) ) { ··· }

Conclusão sobre os truques de ECMAScript 6

ECMAScript 6 ainda está sendo entendida por aqueles que a usamos, então, muitos truques e macetes ainda estão sendo “desvendados” e divulgados. Logicamente, estes 6 truques de ECMAScript 6 não vão aparecer em todo e qualquer projeto, mas podem ser bastante úteis em determinados casos.