35 méthodes essentielles dans ce Cheat Sheet Javascript

Vous voulez connaître les secrets du JavaScript pour devenir un développeur JS exceptionnel ??

Le JS est un langage facile au premier abord mais pour le maîtriser vous devez connaître certaines astuces essentielles, découvrez les dans cet article !

Au programme, de nombreuses fonctions et méthodes de base du JavaScript qui vous permettront d’impressionner vos amis et de gagner énormement de temps.

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 élément 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 éléments d’un tableau en une chaîne de caractères, si une string est passe en parametre, les éléments du tableaux sont relies par cette string

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

// Résultat : "un-deux"

arrays splice

La méthode splice prend un index en premier parametre en un nombre d’éléments a extraire du tableau en deuxieme parametre. Cette méthode modifie le tableau de base et peut aussi prendre un troisième 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 élément ('a'). Le tableau initial est modifié en ['b', 'c'] et la méthode return 'a'.

arrow function js

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 ça :

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]

La méthode forEach en JavaScript

La méthode forEach permet d’exécuter une fonction donnée sur chaque élément d’un tableau.

La syntaxe complète de la fonction est :

tableau.forEach(callback, unAutreThis)

callback : la fonction à utiliser pour chaque élément du tableau

• valeur : l’élément qu’on est en train de parcourir
• index (facultatif) : l’indice de l’élément qu’on est en train de parcourir
• tableau (facultatif) : le tableau en entier

unAutreThis (facultatif) : la valeur de this à utiliser dans la fonction callback

Appliquer à un tableau, la méthode forEach retourne toujours undefined.

Exemples :

const monTableau = [1, 2, 3]

monTableau.forEach((valeur, index) =>
  console.log(`monTableau[${index}] = ${valeur}`)
)

// monTableau[0] = 1
// monTableau[1] = 2
// monTableau[2] = 3

const monTableau = [1, 2, 3, 4, 5];
let somme = 0;

monTableau.forEach(valeur =>
  somme += valeur;
);

console.log(somme);  // 15

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

Vous voulez en apprendre plus sur cette méthode ? Alors mon article sur reduce en JavaScript est fait pour vous !

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

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

Créer un élément 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", () => {...})

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)

Aller plus loin en JavaScript !

Bravo ! Vous connaissez maintenat plus d’une trentaine de nouvelles techniques en JS.

Armé de ces nouvelles connaissances, vous pourrez rendre code plus efficace et plus lisible.

Il existe plein de manières d’apprendre efficacement ou de devenir un meilleur développeur JavaScript. Je vous partage beaucoup de conseils et astuces sur ce blog.

En voici quelques exemples :

Les meilleurs livres pour apprendre Javascript en 2023

10 des meilleurs cours JavaScript en Français

Comment comparer des tableaux en JavaScript ?

Comment trier un tableau d’objets par valeur en JavaScript ?

Quelle est la différence entre =, == et === en JavaScript ?

Qu’est-ce que reduce en JavaScript ?

Comment utiliser console.log en JavaScript ?

Top 11 des meilleurs IDE pour JavaScript en 2023