Ceci sera une longue lecture mais permettez-moi de le répéter.
JAVASCRIPT est difficile. La dernière fois que nous nous sommes rencontrés, j'entrais dans le monde de Javascript, un codeur aux yeux brillants et plein d'espoir entrant dans la jungle sauvage en disant "Est-ce que ça pourrait être difficile ?". À quel point j'avais tort ??. C'est devenu plus difficile, je survis (à peine), voici une petite histoire chaotique de mon voyage.

Variables : début de la folie
Les variables sont des conteneurs contenant des valeurs, dans lesquels vous stockez ou manipulez des données. Je veux dire, pourquoi avons-nous 3 façons de les créer : var, let et const ? pourquoi ? rire dans ES6.
var : Ils ont dit que var était un canon libre. comme jouer à un jeu de hasard. Ne vous en approchez pas.
let : idéal pour les variables qui peuvent changer. Plus facile à gérer.
Const : concerne les valeurs qui restent les mêmes. immeuble. Ohh — const ne signifie pas que la valeur ne peut pas changer, cela signifie simplement que vous ne pouvez pas la réaffecter.
Remarque : ECMAScript 2015 ou ES6 était la deuxième révision majeure de JavaScript.
Ooh, nous avons dit au revoir à la concaténation de chaînes, bonjour aux littéraux de modèles. Avec les littéraux de modèle, vous pouvez désormais utiliser des backticks et intégrer facilement des variables avec ${}. La vie est devenue un peu plus facile ici, mais savoir quand utiliser les guillemets plutôt que les guillemets ? Un autre hallucinant.

// Good old concat
const message = "Hi, "   name   ". You are "   age   " years old.";
// Template literal
const message = `Hi, ${name}! You are ${age} years old.`;

Fonctions : AKA M. Réutilisabilité, M. Maintenabilité...
Une fonction est un ensemble d'instructions qui exécutent une tâche. Se compose du mot-clé de fonction, du nom de la fonction, du paramètre ou non, de l'instruction Js entre accolades.

function greet() {
  console.log("Hello, fellow strugglers?!");
}

Ils semblaient simples au début : encapsulez une certaine logique, appelez-la (je dis l'invoquez), et boum ! Vous codez.
Ensuite, ES6 a dit "Ceci sont des fonctions fléchées, utilisez-les". Les fonctions fléchées semblent simples, non ? Juste une courte façon d’écrire des fonctions. J'ai mis du temps à comprendre la syntaxe.

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}

Boucles : Danser avec l'infini.
Les nombreuses façons de souffrir. Les boucles peuvent exécuter un bloc de code plusieurs fois. Ils sont pratiques si vous souhaitez exécuter le même code encore et encore, à chaque fois avec une valeur différente. Ils sont nombreux :
1. While Loop: continue de boucler tant que la condition est vraie. Mal. et je ne parle pas de son cousin, fais-le.
2. for Loop : Bon vieux for loop, mon homme. la fidèle boucle for. Si familier. Si sûr et si plein de potentiel pour lancer des boucles infinies lorsque vous oubliez d'incrémenter une variable.
3. forEach: qui est comme le cousin plus cool et plus hipster de la boucle for. Cela n’a pas besoin de compteurs, cela ne m’amène pas à l’infini. mon homme.
4. & 5. for..in et for..of : l'un est idéal pour parcourir des objets en boucle, l'autre est destiné à parcourir des tableaux. Je continue de les mélanger et j'apprends dans la douleur. toujours en train d'apprendre.

//for loop
for (let i = 0; i  console.log(num));

Arrays : La liste qui ne cesse de chasser
Les tableaux ont commencé de manière si prometteuse. Une simple liste d'éléments. Poussez les choses, retirez les choses. Facile, non ?

let shoppingList = ["apples", "bananas", "chocolate"];
shoppingList.push("ice cream");
console.log(shoppingList); // ['apples', 'bananas', 'chocolate', 'ice cream']

Entrez filter, map et find ainsi que le reste du groupe de méthodes de tableau. Mon cerveau n’est plus le même depuis.
La méthode filter() crée un nouveau tableau rempli d'éléments qui réussissent un test fourni par une fonction.
La méthode find() renvoie la valeur du premier élément qui réussit un test. Les méthodes de tableau sont tellement nombreuses, j'ai besoin de documentation pour chacune ?, je veux dire qu'il y a la longueur, l'épissure, la tranche, la jointure, le pop, le push, unshift, le shift, la map.., arrêtons-nous ici.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

Objets : le cousin déroutant des tableaux
Puis vinrent les objets. Les objets sont un peu comme des tableaux, mais avec des clés et des valeurs. Je me disais : « Cool, je peux gérer ça. » Mais ensuite, JavaScript a ajouté des méthodes et, tout à coup, les objets ont fait les choses par eux-mêmes. Et puis un ensemble d’objets est entré dans l’équation. Pour accéder aux propriétés, j'utilise soit la notation par points, soit la notation par crochets. Et ne me lancez pas avec .this

//Without method
let shoppingCart = {
  apples: 3,
  bananas: 2,
  chocolate: 1
};
// with method
let cart = {
  items: ["apple", "banana"],
  addItem(item) {
    this.items.push(item);
  }
};
cart.addItem("chocolate");
console.log(cart.items); // ['apple', 'banana', 'chocolate']

Manipulation du DOM : là où les vraies luttes ont commencé
Une fois que je me suis senti à l'aise avec les tableaux et les objets, j'ai pensé : « Il est temps de manipuler le DOM ! Je suis pratiquement un développeur Web maintenant ! » Vous ne savez rien, a dit Ygritte.
Cela devrait être facile, répétai-je. Saisissez simplement un élément et modifiez-le. Si c'est un identifiant, getElementbyId est là pour moi. Une classe getElementsbyClassName est également là ou queryselector et celle avec All son frère.
Et puis il y a toute cette histoire d’addEventListener. Bien sûr, cela fonctionne, mais parfois, les événements semblent se déclencher comme s'ils avaient leur propre esprit.
Ensuite, j'ai essayé de créer un panier. Cela m'a pris des jours et beaucoup de signaux SOS à mes éminents collègues. Ici, je suis appendChild, je retireChild, je crée des éléments, je récupère des éléments, je définis les attributs, je stylise, j'appelle des fonctions sur des fonctions.
Puis j'ai hardiment ajouté une base de données fictive ; moi et la manipulation de tableaux à nouveau. J'accède, je pousse, je trouve, je suis fatigué (se relève).

Imports et Exports : partager avec audace la folie ??
À un moment donné, j'avais écrit tellement de JavaScript que j'avais besoin de modulariser mon code. Entrez l'importation et l'exportation.

Copy code
// module.js
export function greet() {
  console.log("Hello from the module!");
}

// main.js
import { greet } from './module.js';
greet();

Je pensais que diviser mon code en morceaux plus petits rendrait les choses plus faciles. Je ne savais pas que je finirais par importer une montagne de confusion.

Maintenant, je suis sur le point de commencer la programmation orientée objet (POO), cela semble sophistiqué, mais laissez-moi d'abord profiter de mon week-end avant de me perdre à nouveau.
Merci d'être resté jusqu'à la fin. L’objectif reste toujours 1% meilleur chaque jour. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode