Les 8 concepts de base de JavaScript
Tags: javascript, beginners, french, programming
Published: 2023-11-03 09:15:28

🚀 Si tu commences à coder ou que tu veux revoir les bases de JavaScript, cet article est fait pour toi.

**Pourquoi JavaScript ?** 

Il est largement utilisé pour le développement web, et peut être utilisé coté serveur avec Node.js notamment.

## 1. Déclarer des variables

On peut déclarer des variables avec les mots-clés `var` , `let` , ou `const` .

### Javascript compte plusieurs types

- **`number` : nombre** 
Représente à la fois les nombres entiers et les nombres à virgule flottante.

- **`string` : chaîne de caractères** 
Représente une séquence de caractères.
"Hello, World!", 'JavaScript'

- **`boolean` : booléen** 
Représente une valeur binaire qui peut être soit true (vrai) soit false (faux).

- **`Null`** 
Représente une valeur nulle ou inexistante.

- **`undefined` : Indéfini** 
Représente une variable qui a été déclarée mais n'a pas encore été initialisée.

- **`object` : Objet** 
Un type de données complexe qui peut contenir des collections de propriétés et de méthodes.
```javascript
let personne = {
  nom: "John",
  age: 30,
  sexe: "homme"
};
```

- **`array` : Tableau** 
Représente une collection ordonnée d'éléments.
```javascript
let fruits = ["pomme", "banane", "fraise"];
```

- **`function` : Fonction** 
Les fonctions sont des objets de première classe en JavaScript. Elles peuvent être assignées à des variables, passées en tant qu'arguments, et retournées par d'autres fonctions.
```javascript
function addition(a, b) {
  return a + b;
}
```

- **`symbol` : Symbole** 
Un type de données introduit dans ES6, utilisé pour créer des propriétés uniques dans les objets.
```javascript
const mySymbol = Symbol("description")
```

- **`BigInt ` : BigInt** 
Un type de données introduit dans ES11 (ES2020) pour représenter des nombres entiers très grands.
```javascript
const bigIntValue = 1234567890123456789012345678901234567890n
```

## 2. Les opérateurs

JavaScript prend en charge une variété d'opérateurs pour effectuer des opérations sur des données. 

🔢  Opérateurs mathématiques
  - `+` : Addition
  - `-` : Soustraction
  - `*` : Multiplication
  - `/` : Division
  - `%` : Modulo (reste de la division)
  - `**` : Exponentiation (introduit dans ES6)
🔗 Opérateurs de comparaison
  - `==` : Égal à (valeur)
  - `===` : Égal à (valeur et type)
  - `!=` : Différent de (valeur)
  - `!==` : Différent de (valeur et type)
  - `<` : Inférieur à
  - `>` : Supérieur à
  - `<=` : Inférieur ou égal à
  - `>=` : Supérieur ou égal à
🔲  Opérateurs logiques
  - `&&` : ET
  - `||` : OU
  - `!` : NON

## 3. Les Structures de controle 

### Les instructions conditionnelles
 - L'instruction `if` permet d'exécuter un bloc de code si une condition est vraie.

```javascript
if (condition) {
  // Code à exécuter si la condition est vraie
}
```
- L'instruction `else if` permet d'ajouter des conditions alternatives à une instruction `if`.

```javascript
if (condition1) {
  // Code à exécuter si condition1 est vraie
} else if (condition2) {
  // Code à exécuter si condition1 est fausse et condition2 est vraie
}
```

- L'instruction `else` permet d'exécuter un bloc de code si aucune des conditions précédentes n'est vraie. 

```javascript
if (condition) {
  // Code à exécuter si la condition est vraie
} else {
  // Code à exécuter si la condition est fausse
}
```

### Boucles 

🔁 La boucle `for` permet d'itérer sur un bloc de code un certain nombre de fois en spécifiant une condition d'arrêt.

```javascript
for (initialisation; condition; itération) {
  // Code à répéter
}
```

🔄  La boucle `while` répète un bloc de code tant qu'une condition est vraie.

```javascript
while (condition) {
  // Code à répéter tant que la condition est vraie
}
```

🔁  La boucle `do...while` est similaire à la boucle `while`, mais garantit qu'au moins une itération sera effectuée avant de vérifier la condition.

```javascript
do {
  // Code à répéter au moins une fois
} while (condition);
```

## 4. Les fonctions

🔧 Les fonctions sont des blocs de code réutilisables que vous pouvez définir et appeler. Les fonctions sont définies à l'aide du mot-clé `function`.
Les fonctions peuvent accepter des paramètres et renvoyer des valeurs.

```javascript
function multiplier(a, b) {
  return a * b;
}
```

## 5. Les objets

🧩 Les objets sont des structures de données complexes qui peuvent contenir des propriétés et des méthodes. Les propriétés sont des variables, tandis que les méthodes sont des fonctions associées à un objet.

```javascript
// Création d'un objet représentant une personne
const personne = {
  nom: "John",
  age: 30,
  sexe: "homme",
};

// Accès aux propriétés de l'objet
console.log("Nom de la personne : " + personne.nom);
console.log("Âge de la personne : " + personne.age);
```

## 6. Les événements et les gestionnaires d'événements

🎯 Les événements et les gestionnaires d'événements en JavaScript permettent de **surveiller et de réagir aux actions de l'utilisateur** sur une page web, comme les clics de souris, les saisies au clavier, etc. Les gestionnaires d'événements sont des **fonctions JavaScript** attachées aux éléments HTML pour définir des réponses spécifiques à ces événements, ajoutant ainsi de l'interactivité aux applications web.

```javascript
// On sélectionne un bouton par son ID
const monBouton = document.getElementById("monBouton");

// On ajoute un gestionnaire d'événements de clic
monBouton.addEventListener("click", function() {
  alert("Le bouton a été cliqué !");
});
```

## 7. Promesses et asynchronicité

🌐  Les **promesses** en JavaScript sont des objets qui représentent des opérations asynchrones, telles que les requêtes réseau, les lectures de fichiers, etc. Elles permettent de gérer ces opérations de manière plus lisible et ordonnée, en fournissant des **callbacks** pour les résultats (résolues) ou les erreurs (rejetées).

L' **asynchronicité** signifie que le programme peut continuer à s'exécuter sans attendre la fin d'une opération longue. Les promesses aident à gérer ces opérations asynchrones en garantissant un contrôle plus efficace de la séquence d'exécution du code.

```javascript
// Création d'une promesse
const maPromesse = new Promise((resolve, reject) => {
  setTimeout(() => {
    const reussite = true;
    if (reussite) {
      resolve("Opération réussie");
    } else {
      reject("Erreur");
    }
  }, 2000);
});

// Utilisation de la promesse
maPromesse
  .then(resultat => console.log(resultat))
  .catch(erreur => console.error(erreur));
```

## 8. Portée et fermeture

🔍 La **portée** (scope) en JavaScript détermine où une variable est accessible dans le code. Les **fermetures** (closures) sont des fonctions imbriquées qui peuvent accéder aux variables de leur fonction parente, même après que cette fonction parente ait terminé son exécution. Cela permet de **stocker et de protéger** des valeurs pour une utilisation ultérieure.

---


Merci d'avoir lu cet article jusqu'au bout! Je t'invite à me laisser ton avis en commentaire, ou à me suivre sur [Twitter](https://twitter.com/claire_dochez) pour plus d'astuces JavaScript! 🚀👩‍💻👍