# 6 truques de ECMAScript 6

> Descubra 6 truques essenciais de ECMAScript 6 (ES6). Técnicas práticas para usar parâmetros default, destructuring e mais recursos modernos.

URL: https://dpw.dev/javascript/ecmascript-6-es6-truques/  
Publicado em: 2016-08-31  
Categoria: javascript  
Autor: Tárcio Zemel

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.

> Artigo baseado em [Six nifty ES6 tricks](http://www.2ality.com/2016/05/six-nifty-es6-tricks.html).

## 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:

```javascript
/**
 * 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

```

## 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:

```javascript
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](https://github.com/webfatorial/es6features#destructuring). Se se combinar destructuring com as novas entradas de método `entries()` de Array, obtém-se:

```javascript
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:

![Emoji JavaScript](/images/blog/ecmascript-6-es6-truques/1472656983-javascript-emoji.webp)

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

```javascript
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

```

O [operador spread](https://github.com/webfatorial/es6features#default--rest--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 ];
```

É 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](https://github.com/webfatorial/es6features#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:

```javascript
const tmpl = addrs => `
    
    ${ addrs.map( addr => `
        
    ` ).join('') }
    ${addr.first}
        ${addr.last}
`;

```

A função `tmpl()` (uma [função arrow](https://github.com/webfatorial/es6features#arrows)) mapeia o endereço de array em uma string. Usando `tmpl()` no array de dados:

```javascript
const data = [
    { first: '', last: 'Bond' },
    { first: 'Lars', last: '' },
];

console.log( tmpl( data ) );

// 
//     
//     
//
//     
//     
// BondLars

```

## 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):

```javascript
// 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:

```javascript
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:

```javascript
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.

> **Nota:** Caso tenha dúvidas sobre a sintaxe de ECMAScript 6, conheça o repo [es6features](https://github.com/webfatorial/es6features), com resumo das principais funcionalidades de ES6 com exemplos de códigos.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml