Array
Published: 2021-03-10 00:00:13

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) em JavaScript.

No post de hoje irei falar sobre Array.

Este tipo de dado é usado para armazenar uma lista de valores, que geralmente tem uma relação entre si. Como por exemplo, uma lista de `strings`, `numbers`, entre outros valores.

A anotação de um `array` se da por meio da utilização de colchetes `[]`, devendo separar os itens por meio de vírgulas `,`.

Array de strings:

```js
const heroes = ['Batman', 'Superman', 'Iron Man']

console.log(heroes) // Array(3) [ "Batman", "Superman", "Iron Man" ]
```

Array de Numbers:

```js
const ages = [31, 25, 39, 40, 25]

console.log(ages) // Array(5) [31, 25, 39, 40, 25]
```

Existe também a possibilidade de termos mais de um tipo de dados dentro do mesmo array, não é muito comum, mas é perfeitamente possível.

```js
const randomArray = ['Fernando', 35, true, 'Juliana']

console.log(randomArray) // Array(4) ['Fernando', 35, true, 'Juliana']
```

#### Acessando os itens do array

Para acessarmos os itens dentro do array, devemos utilizar a anotação de colchetes `[]`, passando o index do item.

```js
const heroes = ['Batman', 'Superman', 'Iron Man']

console.log(heroes[1]) // Superman
console.log(heroes[0]) // Batman
console.log(heroes[2]) // Iron Man
```

#### Atribuindo novo valor a item de um array

É possível reatribuir o valor de um item presente em um array, também buscando o item pelo índice, usando a anotação de colchetes `[]`.

```js
const heroes = ['Batman', 'Superman', 'Iron Man']

heroes[0] = 'Spiderman'

console.log(heroes) // Array(3) ['Spiderman', 'Superman', 'Iron Man']
```

### Propriedades e Métodos

#### Length

A propriedade `length` é usada para retornar o número de itens presentes no array.

```js
const heroes = ['Batman', 'Superman', 'Iron Man']

console.log(heroes.length) // 3
```

#### Join

O método `join()` irá retornar uma string com todos os elementos do array concatenados e separados por vírgula `,`.

```js
const heroes = ['Batman', 'Superman', 'Iron Man']

const joinHeroes = heroes.join()

console.log(joinHeroes) // Batman,Superman,Iron Man
```

O método `join()`, pode receber um argumento opcional, esse argumento é o separador.

```js
const heroes = ['Batman', 'Superman', 'Iron Man']

const joinHeroesPipe = heroes.join('|')
console.log(joinHeroesPipe) // Batman|Superman|Iron Man

const joinHeroesHifen = heroes.join('-')
console.log(joinHeroesHifen) // Batman-Superman-Iron Man

const joinHeroesHifenWithSpace = heroes.join(' - ')
console.log(joinHeroesHifenWithSpace) // Batman - Superman - Iron Man
```

#### IndexOf

O método `indexOf()`, tem o mesmo comportamento quando utilizado em strings, ele irá retornar a primeira ocorrência do valor passado por argumento.

```js
const ages = [30, 25, 40, 50, 70, 25]

const indexOf25 = ages.indexOf(25)

console.log(indexOf25) // 1
```

Caso o valor passado por argumento não seja encontrado no array, o `indexOf()` irá retornar sempre `-1`.

```js
const ages = [30, 25, 40, 50, 70, 25]

const indexOf100 = ages.indexOf(100)

console.log(indexOf100) // -1
```

#### Concat

O método `concat()`, serve para juntar, concatenar dois arrays.

Vale ressaltar que o método concat não modifica o array original.

```js
const maleDogs = ['Zeca', 'Thor']
const femaleDogs = ['Nina', 'Mel']

const allDogs = maleDogs.concat(femaleDogs)

console.log(allDogs) // (4) ["Zeca", "Thor", "Nina", "Mel"]
```

#### Push

O método `push()`, irá adicionar os itens passados como argumento ao final do array.

Além de adicionar os itens ao final do array, ele retorna o número de itens dentro do array.

Com isso, fica claro que este método modifica o array original.

```js
const heroes = ['Batman', 'Spiderman', 'Iron Man']

const anotherHeroes = heroes.push('Catwoman', 'Superman') // 5

console.log(heroes) // (5) ["Batman", "Spiderman", "Iron Man", "Catwoman", "Superman"]
```

#### Pop

O método `pop()`, irá retirar o último item do array e irá retorna-lo no console.

Assim como o método `push()`, o método `pop()` também modifica o array original.

```js
const heroes = ['Batman', 'Spiderman', 'Iron Man']

heroes.pop() // Iron Man

console.log(heroes) // (2) ["Batman", "Spiderman"]
```

Para se aprofundar ainda mais nos [arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)