01_javascript.md

class: center, middle

Modernes JavaScript

Teil I: Basics

---

Agenda

1. Deklaration von Variablen
2. Funktionen
3. Klassen
4. Looping
5. Template Strings
6. Module

---

Deklaration von Variablen: let

• Nur für den momentanen Block ({ … }) gültig
• Deklarierter Variable kann ein neuer Wert zugewiesen werden
• Kann ohne initialen Wert definiert werden

let x;
x = 2;
let y = 4;
y = 'hallo';

---

Deklaration von Variablen: const

• Nur für den momentanen Block ({ … }) gültig
• Deklarierte Variable kann nicht neu zugewiesen werden
• Braucht immer einen initialen Wert

const x = 2;
x = 8;  // ⚡⚡⚡⚡⚡

---

const oder let?

• Immer zunächst const
• Erst wenn neu-Zuweisung wirklich erforderlich let nehmen

---

Was ist eigentlich mit var?

• Nicht verwenden in modernem JavaScript
• Teilweise sehr intuitives Verhalten das zu Bugs führt ("Hoisting")

---

Funktionen

function ordinary1(a, b, c) {
  …
}

const ordinary2 = function (a, b, c) { … };

const ordinary3 = function myName (a, b, c) {
  /// `myName` ist nur hier gültig
};

• Altbekannt, schon immer in JavaScript

---

Funktionen: Arrow Functions

const add = (a, b) => { return a + b };
const identity = x => x;

• Ist für anonyme Funktionen zu bevorzugen
• Weniger fehleranfällig

---

Funktionen: Methoden

const obj = {
  val: 0,
  add(x) {
    this.val += x;
  }
};

---

Klassen

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  area() {
    return this.width * this.height;
  }
}

const rect = new Rectangle(10, 20);
console.log(rect.area());
// → `200`

---

Looping

const vals = [1, 2, 'foo', 3, 'bar'];
for (const x of vals) {
  …
}

---

Template Strings

const first = 'Angela';
const last = 'Merkel';

const article = `<h1>Breaking News!</h1>
<p>${first} ${last} gibt den CDU-Parteivorsitz ab!`;

---

Module

main.js:

import './stringops';
// oder: import * as sops from stringops;
// oder: import {isAnagram} from './stringops';

stringops.js:

export function isAnagram(word) {
  const chars = word.split("");
  return chars == chars.reverse();
}

Module: Default exports

import defaultExport from './module';

export default someFunction() {
  …
}