Das wird eine lange Lektüre, aber lassen Sie es mich noch einmal sagen.
JAVASCRIPT ist schwierig. Als wir uns das letzte Mal trafen, betrat ich die Welt von Javascript, ein strahlender, hoffnungsvoller Programmierer, der in den wilden Dschungel trat und sagte: „Wie schwer könnte es sein?“. Wie falsch lag ich? Es wurde schwieriger, ich überlebe (knapp), hier ist eine kleine chaotische Geschichte über meine Reise.

Variablen: Beginn des Wahnsinns
Variablen sind Container, die Werte enthalten und in denen Sie Daten speichern oder bearbeiten. Ich meine, warum haben wir drei Möglichkeiten, sie zu erstellen: var, let und const? Warum? lachen in ES6.
var: Sie sagten, Var sei eine lose Kanone. als würde man ein Glücksspiel spielen. Gehen Sie nicht in die Nähe.
let: Ideal für Variablen, die sich ändern können. Einfacher zu verwalten.
Const: ist für Werte, die gleich bleiben. unbeweglich. Ohh – const bedeutet nicht, dass sich der Wert nicht ändern kann, es bedeutet nur, dass Sie ihn nicht neu zuweisen können.
Hinweis: ECMAScript 2015 oder ES6 war die zweite große Überarbeitung von JavaScript.
Oh, wir haben uns von der String-Verkettung verabschiedet, Hallo Template-Literale. Mit Template-Literalen können Sie jetzt Backticks verwenden und Variablen problemlos mit ${} einbetten. Das Leben ist hier etwas einfacher geworden, aber wissen Sie, wann man Backticks statt Anführungszeichen verwenden sollte? Ein weiterer Geistesbrecher.

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

Funktionen: AKA Mr. Wiederverwendbarkeit, Mr. Wartbarkeit...
Eine Funktion ist eine Reihe von Anweisungen, die eine Aufgabe ausführen. Besteht aus dem Funktionsschlüsselwort, dem Funktionsnamen, dem Parameter oder nicht, der Js-Anweisung in geschweiften Klammern.

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

Auf den ersten Blick schienen sie einfach zu sein: eine Logik einkapseln, sie aufrufen (ich sage „invoke it“) und bumm! Sie programmieren.
Dann sagte ES6: „Das sind Pfeilfunktionen, verwenden Sie sie.“ Pfeilfunktionen sehen einfach aus, oder? Nur eine kurze Möglichkeit, Funktionen zu schreiben. Es hat eine Weile gedauert, bis ich die Syntax verstanden habe.

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

Loops: Tanzen mit dem Unendlichen.
Die vielen Arten zu leiden. Schleifen können einen Codeblock mehrmals ausführen. Sie sind praktisch, wenn Sie denselben Code immer wieder ausführen möchten, jedes Mal mit einem anderen Wert. Es gibt viele:
1. While-Schleife: macht die Schleife so lange weiter, wie die Bedingung wahr ist. Teuflisch. und ich spreche nicht von seinem Cousin, do-while.
2. for-Schleife: Gute alte for-Schleife, mein Mann. die vertrauenswürdige for-Schleife. So vertraut. So sicher und voller Potenzial, Endlosschleifen auszulösen, wenn Sie vergessen, eine Variable zu erhöhen.
3. forEach:, was wie der coolere, hipsterere Cousin der for-Schleife ist. Es braucht keine Zähler, bringt mich nicht ins Unendliche. Mein Mann.
4. & 5. for..in und for..of: Eine eignet sich hervorragend zum Durchlaufen von Objekten, die andere ist zum Durchlaufen von Arrays gedacht. Ich verwechsle sie immer wieder und lerne durch den Schmerz. lerne immer noch.

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

Arrays: Die Liste, die weiter jagt
Arrays begann so vielversprechend. Eine einfache Liste von Elementen. Schieben Sie Dinge hinein und ziehen Sie Dinge heraus. Ganz einfach, oder?

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

Geben Sie Filter, Map und Find sowie den Rest der Array-Methodengruppe ein. Seitdem ist mein Gehirn nicht mehr dasselbe.
Die Methode filter() erstellt ein neues Array mit Elementen, die einen von einer Funktion bereitgestellten Test bestehen.
Die Methode find() gibt den Wert des ersten Elements zurück, das einen Test besteht. Es gibt so viele Array-Methoden, dass ich für jede eine Dokumentation benötige? Ich meine, es gibt Länge, Splice, Slice, Join, Pop, Push, Unshift, Shift, Map …, lass uns hier aufhören.

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

Objekte: Der verwirrende Cousin von Arrays
Dann kamen Gegenstände. Objekte ähneln Arrays, verfügen jedoch über Schlüssel und Werte. Ich dachte: „Cool, ich komme damit klar.“ Aber dann fügte JavaScript Methoden hinzu, und plötzlich erledigten Objekte ihre eigenen Aufgaben. Und dann kam eine Reihe von Objekten in die Gleichung. Beim Zugriff auf Eigenschaften verwende ich entweder die Punktnotation oder die Klammernotation. Und lassen Sie mich nicht mit .this
anfangen

//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']

DOM-Manipulation: Wo die wahren Kämpfe begannen
Als ich mich mit Arrays und Objekten sicher fühlte, dachte ich: „Zeit, das DOM zu manipulieren!“ Ich bin jetzt praktisch ein Webentwickler!“ „Du weißt nichts“, sagte Ygritte berühmt.
„Das sollte einfach sein“, sagte ich noch einmal. Schnappen Sie sich einfach ein Element und ändern Sie es. Wenn es eine ID ist, ist getElementbyId für mich da. Es gibt auch eine Klasse getElementsbyClassName oder queryselector und die mit All ihrem Bruder.
Und dann ist da noch dieses ganze AddEventListener-Geschäft. Sicher, es funktioniert, aber manchmal scheinen Ereignisse ihren eigenen Lauf zu nehmen.
Dann habe ich versucht, einen Warenkorb zu erstellen. Es hat Tage gedauert und ich habe jede Menge SOS-Signale an meine erfahrenen Kollegen gesendet. Hier appendChild, entferneChild, erstelle Elemente, ergreife Elemente, setze Attribute, gestalte, rufe Funktionen für Funktionen auf.
Dann fügte ich mutig eine Scheindatenbank hinzu; Ich und wieder Array-Manipulation. Ich greife zu, ich drücke, ich finde, ich bin müde (steht wieder auf).

Importe und Exporte: Mutig den Wahnsinn teilen??
Irgendwann hatte ich so viel JavaScript geschrieben, dass ich meinen Code modularisieren musste. Geben Sie Import und Export ein.

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

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

Ich dachte, das Aufteilen meines Codes in kleinere Teile würde es einfacher machen. Ich wusste nicht, dass ich am Ende einen Berg an Verwirrung importieren würde.

Jetzt bin ich dabei, mit der objektorientierten Programmierung (OOP) zu beginnen. Das klingt schick, aber lassen Sie mich zunächst mein Wochenende genießen, bevor ich mich wieder verliere.
Danke, dass du bis zum Ende geblieben bist. Das Ziel bleibt jeden Tag um 1 % besser. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode