Como criar um Array com N elementos com o mesmo valor no JS
Tags: javascript, programming, webdev
Published: 2023-03-30 13:01:19

## Para criar um array com N elementos contendo o mesmo valor:

1. Utilize o construtor `Array()` para criar um novo array;

2. Utilize o método `fill()` para preencher o array com um valor específico;

3. O método `fill()` altera todos os elementos do array para o valor fornecido;

``` 
const arr = Array(3).fill("abc")

console.log(arr) // ["abc", "abc", "abc"]

```

Ao passar um argumento de número para o construtor `Array()`, estamos criando um array com a quantidade de espaços vazios relativos ao valor passado como parâmentro.

`Array(3) // ['', '', '']`

O método `fill()` irá preencher os espaços do array com um valor específico.

`Array(3).fill("a") // ['a', 'a', 'a']`



### Outra alternativa: Usar o método `Array.from()` 

Como alternativa você pode usar também o método `Array.from()` ao invés do contrututor `Array()`.

```
const arr = Array.from({length: 3}).fill("abc")

console.log(arr) // ["abc", "abc", "abc"]
```

Passamos o comprimento desejado do array para o método `Array.from()` como argumento.

> Usando o método `Array.from` fica um pouco mais explícito e mais fácil de ler do que instanciar o construtor Array.



## Criando um Array de N elementos não primitivos com o mesmo valor
 
Quando criamos um array de N elementos não primitivos com o mesmo valor, usamos o método `Array.from()`

```
const arr = Array.from({length: 3}, () => {
  return {name: "Renata Karolina"}
})

console.log(arr) // [

  {name: "Renata Karolina"},
  {name: "Renata Karolina"},
  {name: "Renata Karolina"},

] 

```

Criar um array de valores não primitivos é um pouco mais complicado porque temos que garantir que os objetos do array não tenha a mesma referência.

Se os objetos estiverem armazenados no mesmo local na memória, assim que um objeto for atualizado então todos serão atualizados.

Em vez disso, nós passamos a função `map()` como segundo argumento para o método `Array.from()`. A cada chamada da função `map()`, retornamos um objeto.
Então se você atualizar um objeto, as mudanças não irão refletir nos outros objetos porque todos eles estarão armazenados em locais diferentes na memória.

```
const arr = Array.from({length: 3}, () => {
  return {name: 'Renata Karolina'};
});

console.log(arr); //
 [
   { name: 'Renata Karolina' },
   { name: 'Renata Karolina' },
   { name: 'Renata Karolina' }
 ]

arr[0].name = 'Renata Oliveira';

console.log(arr); // [ { name: 'Renata Oliveira' }, { name: 'Renata Karolina' }, { name: 'Renata Karolina' } ]
```
A atualização da propriedade `name` do primeiro objeto não alterou a propriedade dos outros objetos.


##  Criando um array bidimensional com N elementos do mesmo valor:

A mesma abordagem pode ser usada para criar um array bidimensional com N elementos do mesmo valor.

```
const arr = Array.from({length: 2}, () =>
  Array.from({length: 3}, () => {
    return {name: 'Renata Karolina'};
  }),
);

console.log(arr); // [
   [
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' }
  ],
  [
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' },
    { name: 'Renata Karolina' }
   ]
 ]

```

Perceba que utilizamos o método `Array.from()` duas vezes.

A chamada externa para o método `Array.from()` determina o tamanho do array da matriz externa.
E a chamada aninhada para `Array.from()` determina o tamanho de cada array aninhado.


## Repetindo vários valores N vezes:

Você pode usar a mesma abordagem se precisar criar um array que repita vários valores N vezes.

```
const arr = Array(3).fill(['a', 'b', 'c']).flat();

console.log(arr); // 
[
  'a', 'b', 'c',
  'a', 'b', 'c',
  'a', 'b', 'c'
]

```
Passamos um array de valores para o método `Array.fill()` e usamos o `Array.flat()` para nivelar o array.

Você também pode passar o `map()` como segundo argumento para o `Array.from()` quando estiver trabalhando com primitivos.

```
const arr = Array.from({length: 5}, () => {
  return 'a';
});

console.log(arr); // [ 'a', 'a', 'a', 'a', 'a' ]

```

O exemplo acima cria um array de 5 elementos com o valor de "a".
Você pode também encadear explicitamente uma chamada para a função `Array.map()` na saída do método `Array.from()`.

```
const arr = Array.from(Array(5)).map(() => {
  return 'a';
});

console.log(arr); // [ 'a', 'a', 'a', 'a', 'a' ]

```

A função `Array.map()` é chamada para cada elemento no array.


> Ref:  [Create an Array with N elements, same Value in JavaScript](https://bobbyhadz.com/blog/javascript-create-array-n-elements-same-value)