Javascript - Comment créer un tableau

Que ce soit pour gérer une liste d'éléments, traiter des résultats d'API ou structurer des informations dynamiques, savoir créer et manipuler un tableau est une compétence essentielle.

JavaScript offre plusieurs méthodes pour initialiser un tableau, chacune ayant ses spécificités et ses cas d’usage. Certaines sont simples et intuitives, d’autres sont plus puissantes et adaptées à des situations avancées. Regardons ça de plus près.

---

[] ou la syntaxe littérale

C'est la manière la plus simple et la plus utilisée; on assigne directement notre valeur au tableau [].

const pokedex = ["Pikachu", "Psykokwak", "Wattouat"]
console.log(pokedex)

// 👇 return
// [object Array] (3)
["Pikachu","Psykokwak","Wattouat"]

---

new Array() et ses pièges

Je dirais que c'est la méthode à éviter si l'on veut éviter quelques soucis.

• avec plusieurs arguments tout va bien.
• avec un seul argument on peut se retrouver avec des "slots" vides..

const five = new Array(1, 2, 3, 4, 5)
console.log(five)

// 👇 return
// [object Array] (5)
[1,2,3,4,5]


const lengthFive = new Array(5)
console.log(lengthFive)

// 👇 return
// [object Array] (5)
[,,,,]

Comme on peut le constater, le deuxième tableau possède 5 entrées mais elles sont totalement vides. Et chaque entrée aura pour retour undefined; à utiliser dans de bonnes conditions !

---

L'alternative: Array.of()

C'est la solution si l'on souhaite éviter les pièges de new Array :

const arr = new Array(1, 2, 3, 4, 5)
console.log(arr)

// 👇 return
// [object Array] (5)
[1,2,3,4,5]


const arr2 = new Array(5)
console.log(arr2)

// 👇 return
// [object Array] (1)
[5]

---

Le plus puisant: Array.from()

Cette méthode s'utilise sur tout type d'objets et peut prendre en un argument une fonction map.() afin de créer des tableaux dynamiques. Pas mal si l'on souhaite générer un tableau sans boucle for.

const pokemonChosen= Array.from("Sablaireau")
console.log(pokemonChosen)
// 👇 return
// [object Array] (10)
["S","a","b","l","a","i","r","e","a","u"]

const pokedexSlot = 6
const availableSlot = Array.from({ length: pokedexSlot }, (_, i) => i + 1);
console.log(availableSlot)

// 👇 return
// [object Array] (6)
[1,2,3,4,5,6]

À la différence de certaines méthodes qui créent un tableau, puis qui le remplisse. const arr = Array.from({ length: 5 }, (_, i) => i.faitQuelqueChose); va, lui, créer directement un tableau rempli. Comme il n'y a pas de tableau intermédiaire, ça en fait une méthode plus performante.

---

[...] ou le spread operator

Si l'objet est itérable (comme une string), on peut alors la convertir en tableau mais on peut également copier un tableau existant et l'étendre. Un vrai couteau suisse !

const pokedex = ["Pikachu", "Psykokwak", "Wattouat"]
const newPokedex = [...pokedex, "Leveinard", "Bulbizarre", "Grodoudou"]
console.log(newPokedex)
// 👇 return
// [object Array] (6)
["Pikachu","Psykokwak","Wattouat","Leveinard","Bulbizarre","Grodoudou"]

const pokemonChosen= [..."Sablaireau"]
console.log(pokemonChosen)
// 👇 return
// [object Array] (10)
["S","a","b","l","a","i","r","e","a","u"]

On préférera cette méthode si la chaîne de caractères contient des émojis 🦀. Sinon il reste .split() pour les string !

---

.split() pour les chaînes de caractères

Votre donnée est une string ? Une autre option est d'utiliser la méthode .split() pour la convertir en tableau.

const pokemonChosen= "Sablaireau".split()
console.log(pokemonChosen)
// 👇 return
// [object Array] (1)
["Sablaireau"]

const pokemonChars = "Sablaireau".split('')
console.log(pokemonChars)
// 👇 return
// [object Array] (10)
["S","a","b","l","a","i","r","e","a","u"]

const splitPokemonName = "Sablaireau".split('b')
console.log(splitPokemonName)
// 👇 return
// [object Array] (2)
["Sa","laireau"]

Attention ici à mettre en paramètre le "pattern" avec lequel vous souhaitez diviser la chaîne en sous-chaînes.

Et Voilà, toutes les méthodes pour créer un tableau en Javascript :)