004/100 Days of Code: Estrutura de Dados
Tags: 100daysofcode, javascript, estruturadedados, beginners
Published: 2022-02-21 15:24:32

Saber como organizar, acessar e editar dados utilizando estruturas padrões da linguagem é uma das chaves para desenvolver aplicações mais performáticas.
Para esse artigo, vamos falar de forma rápida sobre um dos tipos de estruturas disponibilizadas no Javascript: `Vetores`.

## Vetores
Os vetores, mais comumente chamados de `arrays`, em sua forma mais simples são unidimensionais, ou seja, possuem internamente apenas tipos primitivos e imutáveis de dados, e podem ser heterogêneos, ou seja, ser compostos por tipos diferentes desses dados na mesma estrutura:

```javascript
const arr = [1, 'hello', undefined, null, 2.8]
```

Cada item possui um índice (index) que corresponde a posição desse elemento dentro do vetor, iniciando sempre pela posição Zero, e é por meio desse `index` que temos a primeira forma de acesso aos dados do array:

```javascript
const arr = ['hello', 'world']
console.log(arr[0]) // hello
console.log(arr[1]) // world
```

Utilizando esse mesmo conceito podemos também alterar os dados internos de um vetor ou adicionar novos dados por meio de um índice:

```javascript
const arr = ['hello', 'world']
arr[0] = 'Alexandre'
arr[1] = 'Bekor'
arr[2] = '!'
console.log(arr) // ['Alexandre', 'Bekor', '!']
```

### Manipulação de Vetores
Na maioria das vezes estamos lidando com vetores dinâmicos, ou seja, arrays de recebem entradas e saídas de dados com tamanhos que podem variar durante o seu uso na aplicação, por isso fica difícil utilizar um método de consulta, alteração ou atualização tão estático como os mostrados anteriormente.
Por isso foram criadas funções que facilitam a interação com os vetores de forma muito mais dinâmica.

#### Adicionar um ou mais itens
Para adição de itens temos:
- `push`: adiciona os itens que recebe como parâmetro ao final do vetor
- `unshift`: adiona os itens que recebe como parâmetro no início do vetor

```javascript
const arr = [3, 4, 5]
const arr.push(6, 7, 8) // [3, 4, 5, 6, 7, 8]
const arr.unshift(1, 2) // [1, 2, 3, 4, 5, 6, 7, 8]
```

#### Remover um item
Para remoção de um item também temos outras duas funções:
- `pop`: que remove o último item do vetor
- `shift`: remove o primeiro item do vetor

```javascript
const arr = [1, 2, 3, 4, 5, 6, 7, 8]
const arr.pop() // [1, 2, 3, 4, 5, 6, 7]
const arr.shift() // [2, 3, 4, 5, 6, 7]
```

Como deve ter notado, essas funções não recebem nenhum parâmetro, ou seja, removem apenas um item por vez e apenas na primeira ou última posição.

#### Remover um ou mais itens
Para quando precisamos remover um ou mais itens e que não estejam necessariamente no início ou final do vetor temos a função `splice`:

```javascript
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr.splice(3, 3) // [1, 2, 3, 7]
```

Essa função pode receber até três elementos, como demonstrado no exemplo acima temos:
- `3`: índice do primeiro elemento do intervalo de deleção
- `2`: quantidade de elementos que serão deletados, a partir do, e incluindo, o primeiro elemento do intervalo de deleção
- `'item 02', 'item 3'`: opcionalmente os itens que serão inclusos no lugar do intervalo deletado

```javascript
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr.splice(3, 2, 'item 02', 'item 03') // [1, 2, 3, 'item 02', 'item 03', 7]
```

#### Extrair um intervalo de itens para um novo array
Além da habilidade de adicionar ou remover itens diretamente de um vetor, existem situações em que precisaremos extrair dados sem alterar o array original, para isso temos a função `slice`:

```javascript
const arr = [1, 2, 3, 4, 5, 6, 7]
const newArr = arr.slice(2, 4) // []
```

Cuidado para não confundir com a função `splice`!
Nesse caso, a função `slice` recebe apenas dois argumentos e, similar a função anterior, eles representam um intervalo só que, com uma sutil diferença, enquanto o primeiro representa o índice onde o intervalo que será extraído inicia, o segundo representa o índice do último item, porém sem incluí-lo.
Como essa função gera um novo array copiando o itens com a regra proposta, não se esqueça de atribuí-lo a uma nova variável, como fiz quando declarei `const newArr =`.

#### Copiando todos os itens
O ES6 adicionou um atalho para a cópia de todos os itens de um array que vale muito a pena ser mencionado! O `spread operator`, que é um operador que 'espalha' os itens internos de um array onde ele é declarado:

```javascript
const arr = [1, 2, 3, 4, 5]
const newArr = [...arr] // [1, 2, 3, 4, 5]
```

A sua facilidade de uso nos permite realizar adições melhor elaboradas como:

```javascript
const arr = [4, 5, 6]
const newArr = [1, 2, 3, ...arr, 7, 8] // [1, 2, 3, 4, 5, 6, 7, 8]
```

Apesar de ter me aprofundado em estruturas um pouco mais complexas e teóricas acredito que transmitir um pouco dessa base mais simples, no primeiro momento, mantenha um histórico mais agradável dos meus artigos, documentando um processo evolutivo mais organizado.

Por isso por hoje é só :smile:.
Mas o desafio continua e amanhã nos vemos novamente!

## Outros Canais
Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:
- [LinkedIn](https://www.linkedin.com/in/joaovitoralexandre/)
- [Instagram](https://www.instagram.com/alexandrebekor/)
- [Twitter](https://twitter.com/alexandrebekor)