35 méthodes essentielles dans ce Cheat Sheet Javascript

Cheat Sheet Javascript

string et array javascript

Ces méthodes permettent de créer des copies de l’original sauf splice qui le modifie.

slice

Crée un nouveau tableau ou une nouvelle string partir du premier indice passe en parametre, jusqu’au second indice (ou à la fin, si il n’y a pas de deuxieme element en parametre)

console.log([1, 2, 3].slice(0, 1))

// Résultat : 1

split javascript

Converti une chaîne de caractères en un tableau, en la divisant par le caractère que vous fournissez

console.log("un-deux".split("-"))

// Résultat : ["un", "deux"]

join array javascript

Joint les elements d’un tableau en une chaîne de caractères, si une string est passe en parametre, les elements du tableaux sont relies par cette string

;["un", "deux"].join("-")

// Résultat : "un-deux"

arrays splice

Splice prend un index en premier parametre en un nombre d’elements a extraire du tableau en deuxieme parametre. Cette methode modifie le tableau de base et peut aussi prendre un troisieme parametre qui est ajoute au tableau de base.

let tableau = ["a", "b", "c"]
console.log(tableau.splice(0, 1))

// Résultat : 'a'
// Side-effect : la variable tableau est modifiée et devient ['b', 'c']
// Expications : on indique qu'on se place a l'indice 0 du tableau ('a') et qu'on veut sortir 1 element ('a'). Le tableau initial est modifié en ['b', 'c'] et la méthode return 'a'.

arrow function js

arrow functions

Pour avoir une arrow function, remplacez le mot-clé function par =>.

arrow function declaration

Contrairement à une fonction régulière, vous devez stocker une arrow function dans une variable pour la sauvegarder. Ainsi

const somme = (a, b) => {
  return a + b
}

est identique a

function somme(a, b) {
  return a + b
}

arrow function en une ligne “sans” return

Si votre arrow function peut tenir sur une ligne, vous pouvez supprimer les parenthèses ET renvoyer la déclaration (le renvoi est automatique)

;(a, b) => a + b

arrow function multi-lignes “sans” return

L’utilisation de parenthèses permet d’avoir des fonctions de plusieures lignes avec un retour implicite

;(a, b) => a + b

arrow function un seul parametre

Si vous n’avez qu’un seul paramètre, pas besoin des parenthèses autour de vos paramètres

mot => mot.toUpperCase()

Les Objects en Javascript

Stockage et récupération puissants et rapides

string literal javascript

Cela vous donne littéralement la valeur de la clé "a"

obj.a ou obj["a"]

javascript object literal

Mais cela vous donne la valeur de la clé stockée dans la variable a

obj[a]

javascript for in

Boucle sur les clés d’un objet avec un for...in vous pouvez ensuite acceder aux valeurs de l’objet en utilisant obj[key].

for (let key in obj) ...

javascript object keys

Obtenez facilement les clés d’un objet dans un tableau avec Object.keys(), ou les valeurs avec Object.values()

console.log(Object.keys({ a: 1, b: 2 }))

// Résultat : ["a", "b"]

javascript destructuring

La déstructuration permet de retirer des valeurs des objets, la clé devient son nom de variable

const { a } = { a: 1 }
console.log(a)

// Résultat : 1

destructuring

Ca fonctionne aussi dans l’autre sens, si la variable a vaut 1, on peut creer un objet comme ca :

const a = 1
const obj = { a }
console.log(obj)

// Résultat : {a: 1}

Javascript array method

Ces méthodes permettent AUSSI de créer des copies de l’original sauf pour le sort qui le modifie.

map javascript

Exécute la fonction une fois par élément dans le tableau. Retourne chaque valeur de retour dans un nouveau tableau, au même endroit.

console.log([1, 2, 3].map(n => n + 1))

// Résultat : [2, 3, 4]

foreach javascript

Même chose que map, mais ne retourne pas les résultats, retourne toujours undefined.

;[1, 2, 3].forEach(n => console.log(n))

// Résultat :
// 1
// 2
// 3

filter javascript

Exécute la fonction une fois par élément, si faux, l’élément ne sera pas inclus dans le nouveau tableau, si vrai, il sera.

console.log([1, 2, 3].filter(n => n > 1))

// Résultat : [2, 3]

javascript reduce

Fonctionne une fois par item, votre valeur de retour devient l’accumulation des itérations precedantes à l’itération suivante. L’accumulateur commence à 0 par défaut mais vous pouvez le changer avec un 2e arg optionnel.

console.log([1, 2, 3].reduce((a, val) => a + val))

// Résultat : 6
// Explication : 1 + 2 + 3 = 6

sort array javascript

Trie le tableau en place, par défaut par ordre numérique (ou alphabétique) croissant. Passer une fonction de comparaison à 2 arguments (optionnel) permet de classer les éléments dans un ordre décroissant, ou personnalisé.

console.log([3, 1, 2].sort())

// Résultat : [1, 2, 3]

Manipuler le DOM

Manipuler le DOM

Pour chaque balise HTML, il existe un nœud Document Object Model (DOM)

Créer un element dans le dom

Créer un élément HTML avec JavaScript, renvoie un objet ELEMENT_HTML.

document.createElement("div")

Appliquer sur style a un element HTML

Vous pouvez modifier les styles CSS d’un objet ELEMENT_HTML.

ELEMENT_HTML.style.color = "pink"

Ajouter un nom de classe en javascript

Ajouter ou supprimer les classes CSS d’un element html.

ELEMENT_HTML.classList.add(".maClass")

Mettre du contenu dans une balise html avec js

Permet de définir le contenu HTML ou le texte a l’interieur d’une balise html.

ELEMENT_HTML.innerHTML = "<div>coucou</div>"
ELEMENT_HTML.innerText = "coucou"

Ajouter un enfant en js

Vous pouvez ajouter des elements html a un autre element html.

ELEMENT_HTML_A.appendChild(ELEMENT_HTML_B)

Selectionner un element html

Selectionner le premier element HTML qui correspond dans le DOM - les deux “.class” et “#id” fonctionnent !

document.querySelector("#mon-id")

Selectionner tous les elements de class

Même chose que ci-dessus, mais renvoie tous les match dans une liste d’elements html.

document.querySelectorAll(".ma-class")

Ajouter des event listener

Ajouter des listeners aux événements des utilisateurs, comme les clics. La fonction s’exécute lorsque l’événement se produit.

ELEMENT_HTML.addEventListener("click", () => {...})

Async

fetch js

Fetch renvoie une promesse, qui n’est pas bloquante, en d’autres termes, votre code continue. On parle d’asynchone.

fetch("https://google.com")

Promise .then

Quand la promesse est resolue, utilisez une méthode .then pour utiliser son résultat dans le premier parametre

PROMISE.then(result => console.log(result))

Plusieurs .then dans une promise

Un bloc then peut aussi retourner une promesse, auquel cas nous pouvons y ajouter un autre bloc.

PROMISE.then(...).then(...)

Gestion d’erreur dans les promise

Ajouter une méthode catch à une promesse, ou une chaîne de promesses pour traiter toute erreur qui pourrait se produire.

PROMISE.catch(err => console.error(err))

Résoudre toutes les promesses avec promise.all

Vous pouvez faire passer plusieurs promesses dans la fonction Promise.all. En joignant un bloc .then, vous obtiendrez le résultat de toutes les promesses, dans un seul tableau.

Promise.all([fetch(...), fetch(...)].then(resultats => ...)

async await

async await est une syntaxe plus propre pour les promesses, au lieu de .then en serie, utilisez simplement le mot-clé await, qui bloquera votre code jusqu’à ce que la promesse se resolve …

const res = await fetch(URL)

fonctions async await

Les mots-clés await doivent être à l’intérieur d’une fonction async - il suffit d’ajouter le mot-clé async avant toute fonction, ou la définition d’une arrow function dans laquelle vous voulez utiliser await

const getURL = async URL => await fetch(URL)


Je m'appelle Thomas. Depuis ma sortie de la première promo de l'École 42, j'ai développé une app qui a été téléchargée plus de 400.000 fois. J'ai lancé près de 10 idées de startups et de nombreux autres business. Sur ce blogue, je vous apprends comment utiliser le Code pour devenir libre.

Recevez gratuitement 9 Astuces pour apprendre à coder !
Suivez la newsletter !
Désinscrivez-vous quand vous voulez
Gratuit, c'est un très bon prix
Les emails sont gratuits. Pas de spam. Vos informations sont stockées de manière sécurisée et privée. Vous pourrez vous désinscrire en un clic et à tout moment. En renseignant votre adresse email vous demandez expressément de recevoir la newsletter de tcoll.art pouvant contenir des promotion.