JavaScript: Entendendo o método .at()
Tags: tutorial, javascript, braziliandevs
Published: 2023-01-31 16:16:16

Juntamente com o objeto simples, o array é uma estrutura de dados amplamente usada em JavaScript. E uma operação amplamente utilizada em arrays é acessar elementos por índice.

Neste post, vou apresentar o método `.at(index)`.

O principal benefício do método `.at()`, é acessar elementos do final do array usando um índice negativo, o que não é possível usando a sintaxe regular de colchetes `array[index]`.

## A limitação da sintaxe dos colchetes

A maneira usual de acessar um elemento de array por índice é o uso de colchetes `array[index]`:

```jsx
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const item = fruits[1];
item; // => 'maçã'
```

A expressão `array[index]` é avaliada como o item do array localizado em `index` e é denominada de _acessador de propriedade_. Como você já deve saber, a indexação de arrays em JavaScript começa em `0`.

Na maioria dos casos, a sintaxe dos colchetes é uma boa maneira de acessar itens por um índice positivo `( >= 0)`. Tem uma sintaxe simples e legível.

Mas às vezes você gostaria de acessar os elementos do final, e não do início. Por exemplo, vamos acessar o último elemento do array:

```jsx
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits[fruits.length - 1];
lastItem; // => 'uva'
```

`fruits[fruits.length - 1]` é como você pode acessar o último elemento do array, onde `fruits.length - 1` é o índice do último elemento.

A dificuldade é que o acessador de colchetes não permite uma maneira direta de acessar itens do final do array e também não aceita um índice negativo.

Felizmente, uma nova proposta (no estágio 3 a partir de janeiro de 2021) traz o método `.at()` para arrays (bem como para arrays e strings digitados) e resolve muitas limitações do acessador de colchetes.

## O método array.at()

Em palavras simples, `array.at(index)` acessa o elemento no argumento `index`.

Se o argumento do `índice` for um número inteiro positivo `>= 0`, o método retornará o item nesse índice:

```jsx
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits.at(1);
lastItem; // => 'maçã'
```

Se o argumento do `índice` for maior ou igual ao comprimento do array, então, como o acessador regular, o método retornará `undefined`:

```
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const item = fruits.at(999);
item; // => undefined
```

A verdadeira mágica acontece quando você usa um `índice` negativo com o método `array.at()` — então o elemento é acessado a partir do final do array. Por exemplo, vamos usar o `índice -1` para acessar o último elemento do array:

```jsx
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits.at(-1);
lastItem; // => 'uva'
```

Aqui está um exemplo mais detalhado de como o método `array.at() `acessa os elementos:

```jsx
const vegetables = ['batata', 'tomate', 'cebola'];
vegetables.at(0); // => 'batata'
vegetables.at(1); // => 'tomate'
vegetables.at(2); // => 'cebola'
vegetables.at(3); // => undefined
vegetables.at(-1); // => 'cebola'
vegetables.at(-2); // => 'tomate'
vegetables.at(-3); // => 'batata'
vegetables.at(-4); // => undefined
```

Se `negIndex` for um `índice` negativo `< 0`, `array.at(negIndex)` acessa o elemento no índice `array.length + negIndex`. Aqui está um exemplo:

```jsx
const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const negIndex = -2;
fruits.at(negIndex);              // => 'banana'
fruits[fruits.length + negIndex]; // => 'banana'
```

## Resumo

A sintaxe dos colchetes em JavaScript é a maneira usual e boa de acessar itens por índice. Basta colocar a expressão do índice entre colchetes `array[index]` e obter o item do array nesse `índice`.

No entanto, acessar itens do final usando o acessador regular não é conveniente, pois não aceita índices negativos. Então, por exemplo, para acessar o último elemento do array, você deve usar uma expressão alternativa:

```jsx
const lastItem = array[array.length - 1];
```

Felizmente, o novo método `array.at(index)` permite acessar os elementos do array por `índice` como um acessador regular. Além disso, `array.at(index)` aceita índices negativos, caso em que o método pega elementos do final:

```jsx
const lastItem = array.at(-1);
```

Obrigado por ler! Espero que tenha gostado do artigo, até a próxima.