> For the complete documentation index, see [llms.txt](https://favelaware.gitbook.io/favelaware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://favelaware.gitbook.io/favelaware/7-javascript/7.5-arrays.md).

# 7.5 - Arrays

🧠 Arrays em JavaScript: Guardando várias infos em uma só caixinha!

## 🧠 **Arrays em JavaScript: Guardando várias infos em uma só caixinha!**

Quando queremos guardar uma informação no JavaScript, usamos variáveis, né?\
Mas e quando queremos guardar **várias informações de uma vez só**? Tipo uma lista de filmes favoritos, nomes de amigos ou pontuações em um jogo?

Aí entra o **Array**! 🎉

***

### 📦 O que é um Array?

Um **array** (ou "vetor") é uma **estrutura de dados** que serve para armazenar **vários valores em uma única variável**. Esses valores podem ser números, textos (strings), objetos e até outros arrays!

```javascript
let frutas = ["🍎 Maçã", "🍌 Banana", "🍇 Uva"];
```

No exemplo acima, `frutas` é um array que guarda **três strings** (textos) com nomes de frutas.

***

### 🔢 Como acessar os valores?

Cada item no array tem uma **posição** (ou **índice**) que começa do **zero**! Isso mesmo: o primeiro item está na posição 0, o segundo na posição 1, e assim por diante.

```javascript
console.log(frutas[0]); // 🍎 Maçã
console.log(frutas[1]); // 🍌 Banana
```

***

### 🛠️ Como criar um Array?

Você pode criar um array de várias formas:

```javascript
let numeros = [1, 2, 3, 4]; // Forma mais comum
let vazio = [];             // Um array vazio
let misturado = ["Olá", 42, true]; // Pode misturar tipos!
```

***

### ✍️ Como modificar um Array?

Você pode **mudar um item** específico do array assim:

```javascript
frutas[1] = "🥝 Kiwi";
console.log(frutas); // ["🍎 Maçã", "🥝 Kiwi", "🍇 Uva"]
```

***

### ➕ Como adicionar ou remover itens?

Existem métodos super úteis pra isso:

| Método      | O que faz             |
| ----------- | --------------------- |
| `push()`    | Adiciona no final 🏁  |
| `unshift()` | Adiciona no começo 🏁 |
| `pop()`     | Remove do final ❌     |
| `shift()`   | Remove do começo ❌    |

#### Exemplos:

```javascript
let games = ["Minecraft", "FIFA"];

// Adicionar no final
games.push("Fortnite"); 
// ["Minecraft", "FIFA", "Fortnite"]

// Remover do começo
games.shift(); 
// ["FIFA", "Fortnite"]
```

***

### ⚠️ Observação importante: Cuidado com o `delete`! 🧨

Você pode até remover um item de um array usando o `delete`, mas **é importante entender o que realmente acontece** antes de usar!

```javascript
let frutas = ["maçã", "banana", "uva"];
delete frutas[1];

console.log(frutas); // ["maçã", empty, "uva"]
console.log(frutas.length); // 3 😬
```

#### 😲 O que aconteceu aqui?

O `delete` **remove o valor**, mas **não reorganiza o array** e **não diminui o tamanho**. Ele deixa um buraco chamado `"empty"` no lugar, o que pode causar confusão em loops ou funções como `map()` e `forEach()`.

***

#### 🤓 Quando usar o `delete`?

O `delete` foi incluído no JavaScript desde o **início da linguagem (1995)** porque ele era útil para remover **propriedades de objetos**, que era o foco principal do JS no começo.

👉 **No caso de arrays**, **raramente** é recomendado usar `delete`.

Use `delete` só quando você **precisa deixar o espaço vazio de propósito**, por exemplo, para marcar uma posição como "vaga", "indisponível" ou "a ser preenchida".

***

#### ✅ Alternativas mais seguras para remover itens

| Método         | Efeito                                                   |
| -------------- | -------------------------------------------------------- |
| `splice(i, 1)` | Remove o item no índice `i` e **reorganiza** o array     |
| `filter()`     | Cria um **novo array** com os itens que você quer manter |

```javascript
let frutas = ["maçã", "banana", "uva"];
frutas.splice(1, 1); // ["maçã", "uva"]
```

```javascript
let frutas = ["maçã", "banana", "uva"];
let semBanana = frutas.filter(fruta => fruta !== "banana");
```

***

#### ⚠️ Cautelas ao usar `delete`

* Evite usar em arrays, **a menos que você saiba o que está fazendo**.
* Buracos (`empty`) no array podem gerar **comportamento inesperado**.
* Métodos como `forEach()` **pulam elementos vazios** (isso pode causar bugs difíceis de achar).
* Em **estruturas de dados**, é melhor reorganizar ou recriar o array sem o item.

***

> 💬 *"O `delete` é como arrancar uma fruta da bandeja e deixar o espaço vazio. Parece limpo, mas pode atrapalhar na hora de contar ou servir."* 🍇🍌🍏

📌 **Resumo:** Use `splice()` para remover com segurança. Use `delete` só em casos muito específicos.

***

### 🔍 Outros métodos úteis

* **`length`** → mostra o **tamanho** do array (quantos itens ele tem)
* **`includes()`** → verifica se um valor está no array
* **`indexOf()`** → mostra a posição (índice) de um item
* **`join()`** → junta todos os itens como uma string
* **`forEach()`** → executa uma função para **cada item**

```javascript
let notas = [10, 8, 7];

console.log(notas.length); // 3
console.log(notas.includes(10)); // true

notas.forEach(function(nota) {
  console.log("Nota:", nota);
});
```

***

### 🔄 Como percorrer um Array?

Pra fazer algo com **cada item do array**, usamos **loops**! Um dos mais comuns é o `for`.

```javascript
let cores = ["azul", "verde", "vermelho"];

for (let i = 0; i < cores.length; i++) {
  console.log("Cor:", cores[i]);
}
```

***

### 📚 Resumo rápido

* Um **array** é como uma **lista de coisas**.
* Cada item tem uma **posição (índice)**.
* Podemos **acessar**, **alterar**, **adicionar** e **remover** os itens com métodos fáceis.
* É uma ferramenta **muito poderosa** pra trabalhar com dados no JavaScript!

***

### 🚀 Desafio pra você!

Crie um array com os **nomes de três amigos ou amigas**. Depois, mostre o nome da segunda pessoa usando `console.log`.

***

> 🧑‍💻 **Dica bônus**: Arrays são a base pra várias coisas mais avançadas na programação, como **jogos**, **apps**, **sites dinâmicos** e muito mais. Quanto mais praticar, melhor!

***

Se quiser saber mais, dá uma olhada na [documentação oficial do MDN sobre arrays ](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array). 👩‍🏫👨‍🏫


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://favelaware.gitbook.io/favelaware/7-javascript/7.5-arrays.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.