From 625a1c00246c3c1a6bd0b137c950ca3efd780fa8 Mon Sep 17 00:00:00 2001 From: couragesean Date: Sat, 11 Sep 2021 21:18:20 +0200 Subject: [PATCH 1/3] Methods of primitives --- .../1-string-new-property/solution.md | 24 ++-- .../1-string-new-property/task.md | 9 +- .../01-primitives-methods/article.md | 125 +++++++++--------- 3 files changed, 79 insertions(+), 79 deletions(-) diff --git a/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md b/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md index fd22a4653..d8a9dc142 100644 --- a/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md +++ b/1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md @@ -1,24 +1,24 @@ - -Try running it: +Probier es aus: ```js run -let str = "Hello"; +let str = 'Hallo'; str.test = 5; // (*) alert(str.test); ``` -Depending on whether you have `use strict` or not, the result may be: -1. `undefined` (no strict mode) -2. An error (strict mode). +Abhängig davon, ob du `use strict` verwendest oder nicht, kann das Ergebnis wie folgt aussehen: + +1. `undefined` (kein strict mode) +2. Ein Fehler (strict mode). -Why? Let's replay what's happening at line `(*)`: +Warum? Wiederholen wir, was in der Zeile `(*)` passiert: -1. When a property of `str` is accessed, a "wrapper object" is created. -2. In strict mode, writing into it is an error. -3. Otherwise, the operation with the property is carried on, the object gets the `test` property, but after that the "wrapper object" disappears, so in the last line `str` has no trace of the property. +1. Wenn auf eine Eigenschaft von`str` zugegriffen wird, wird ein " Wrapper-Objekt" erstellt. +2. Im strict mode, erzeugt eine Wertzuweisung einen Fehler. +3. Andernfalls wird die Bearbeitung der Eigenschaft fortgesetzt, das Objekt erhält die Eigenschaft `test`, aber danach verschwindet das "Wrapper-Objekt", so dass in der letzten Zeile `str` keine Rückschlüsse mehr auf die Eigenschaft hat. -**This example clearly shows that primitives are not objects.** +**Dieses Beispiel zeigt deutlich, dass Primitive keine Objekte sind.** -They can't store additional data. +Sie können keine zusätzlichen Daten speichern. diff --git a/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md b/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md index 50c781ea5..21203c6e2 100644 --- a/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md +++ b/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md @@ -2,17 +2,16 @@ importance: 5 --- -# Can I add a string property? +# Kann ich eine Zeichenketten-Eigenschaft hinzufügen? - -Consider the following code: +Betrachte folgenden Code: ```js -let str = "Hello"; +let str = 'Hallo'; str.test = 5; alert(str.test); ``` -How do you think, will it work? What will be shown? +Was glaubst du, wird es funktionieren? Was wird gezeigt werden? diff --git a/1-js/05-data-types/01-primitives-methods/article.md b/1-js/05-data-types/01-primitives-methods/article.md index 6c13acda6..82e40662d 100644 --- a/1-js/05-data-types/01-primitives-methods/article.md +++ b/1-js/05-data-types/01-primitives-methods/article.md @@ -1,128 +1,129 @@ -# Methods of primitives +# Methoden von Primitiven -JavaScript allows us to work with primitives (strings, numbers, etc.) as if they were objects. They also provide methods to call as such. We will study those soon, but first we'll see how it works because, of course, primitives are not objects (and here we will make it even clearer). +JavaScript ermöglicht es uns, mit Primitiven (Zeichenketten, Zahlen usw.) zu arbeiten, als wären sie Objekte. Sie bieten auch Methoden an, die als solche aufgerufen werden können. Wir werden diese bald behandeln, doch zunächst werden wir sehen wie es funktioniert, weil Primitive natürlich keine Objekte sind (und hier werden wir es noch deutlicher machen). -Let's look at the key distinctions between primitives and objects. +Schauen wir uns die wichtigsten Unterschiede zwischen Primitiven und Objekten an. -A primitive +Ein Primitiv -- Is a value of a primitive type. -- There are 7 primitive types: `string`, `number`, `bigint`, `boolean`, `symbol`, `null` and `undefined`. +- Ist ein Wert eines primitiven Typs. +- Es gibt 7 primitive Typen: `string`, `number`, `bigint`, `boolean`, `symbol`, `null` und `undefined`. -An object +Ein Objekt -- Is capable of storing multiple values as properties. -- Can be created with `{}`, for instance: `{name: "John", age: 30}`. There are other kinds of objects in JavaScript: functions, for example, are objects. +- Ist in der Lage, mehrere Werte als Eigenschaften zu speichern. +- Kann erstellt werden mit `{}`, zum Beispiel: `{name: "John", age: 30}`. Es gibt noch weitere Arten von Objekten in JavaScript: Funktionen zum Beispiel sind Objekte. -One of the best things about objects is that we can store a function as one of its properties. +Eines der größten Vorteile von Objekten ist, dass wir eine Funktion als eine ihrer Eigenschaften speichern können. ```js run let john = { - name: "John", - sayHi: function() { - alert("Hi buddy!"); - } + name: 'John', + sayHi: function () { + alert('Hi Kumpel!'); + }, }; -john.sayHi(); // Hi buddy! +john.sayHi(); // Hi Kumpel! ``` -So here we've made an object `john` with the method `sayHi`. +Hier haben wir also ein Objekt `john` mit der Methode `sayHi` erstellt. -Many built-in objects already exist, such as those that work with dates, errors, HTML elements, etc. They have different properties and methods. +Es existieren bereits viele eingebaute Objekte, z. B. solche, die mit Daten, Fehlern, HTML-Elementen usw. arbeiten. Sie haben unterschiedliche Eigenschaften und Methoden. -But, these features come with a cost! +Allerdings haben diese Besonderheiten auch ihren Preis! -Objects are "heavier" than primitives. They require additional resources to support the internal machinery. +Objekte sind "schwerer" als Primitive. Sie brauchen zusätzliche Ressourcen, um die interne Funktionalität zu unterstützen. -## A primitive as an object +## Ein Primitiv als Objekt -Here's the paradox faced by the creator of JavaScript: +Hier ist das Paradoxon, mit dem sich der Erfinder von JavaScript auseinandersetzte: -- There are many things one would want to do with a primitive like a string or a number. It would be great to access them as methods. -- Primitives must be as fast and lightweight as possible. +- Es gibt viele Sachen, die man mit einem Primitiv wie einer Zeichenkette oder einer Zahl machen möchte. Es wäre hervorragend, wenn man auf sie in Form von Methoden zugreifen könnte. +- Primitive müssen so schnell und leicht wie möglich sein. -The solution looks a little bit awkward, but here it is: +Die Lösung sieht ein wenig umständlich aus, aber hier ist sie: -1. Primitives are still primitive. A single value, as desired. -2. The language allows access to methods and properties of strings, numbers, booleans and symbols. -3. In order for that to work, a special "object wrapper" that provides the extra functionality is created, and then is destroyed. +1. Primitive sind nach wie vor primitiv. Ein einziger Wert, wie es sein soll.. +2. Die Sprache ermöglicht den Zugriff auf Methoden und Eigenschaften von Zeichenketen, Zahlen, boolschen Werten und Symbolen. +3. Damit das funktioniert, wird ein spezieller "Objekt-Wrapper" erstellt, der die zusätzlichen Funktionalitäten bereitstellt, und anschließend wieder zerstört wird. -The "object wrappers" are different for each primitive type and are called: `String`, `Number`, `Boolean` and `Symbol`. Thus, they provide different sets of methods. +Die "Objektwrappers" sind für jeden primitiven Typ unterschiedlich und heißen: `String`, `Number`, `Boolean` und `Symbol`. Daher stellen sie unterschiedliche Sätze von Methoden zur Verfügung. -For instance, there exists a string method [str.toUpperCase()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) that returns a capitalized `str`. +Es gibt zum Beispiel eine String-Methode [str.toUpperCase()](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) die ein großgeschriebenes `str` zurückgibt. -Here's how it works: +Und so funktioniert's: ```js run -let str = "Hello"; +let str = 'Hallo'; -alert( str.toUpperCase() ); // HELLO +alert(str.toUpperCase()); // HALLO ``` -Simple, right? Here's what actually happens in `str.toUpperCase()`: +Einfach, nicht wahr? Folgendes passiert tatsächlich in `str.toUpperCase()`: -1. The string `str` is a primitive. So in the moment of accessing its property, a special object is created that knows the value of the string, and has useful methods, like `toUpperCase()`. -2. That method runs and returns a new string (shown by `alert`). -3. The special object is destroyed, leaving the primitive `str` alone. +1. Die Zeichenkette `str` ist ein Primitiv. Beim Zugriff auf ihre Eigenschaft wird also ein spezielles Objekt erstellt, das den Wert der Zeichenkette kennt und über nützliche Methoden verfügt, wie `toUpperCase()`. +2. Diese Methode wird ausgeführt und gibt eine neue Zeichenkette zurück (angezeigt durch `alert`). +3. Das spezielle Objekt wird zerstört, so dass das Primitiv `str` übrig bleibt. -So primitives can provide methods, but they still remain lightweight. +Primitive können also Methoden bereitstellen, bleiben aber dennoch leichtgewichtig. -The JavaScript engine highly optimizes this process. It may even skip the creation of the extra object at all. But it must still adhere to the specification and behave as if it creates one. +Die JavaScript-Engine optimiert dieses Verfahren erheblich. Es kann sogar sein, dass sie die Erstellung des zusätzlichen Objekts ganz überspringt. Sie muss sich aber trotzdem an die Spezifikation halten und sich so verhalten, als ob sie ein Objekt erstellt. -A number has methods of its own, for instance, [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) rounds the number to the given precision: +Eine Zahl hat ihre eigenen Methoden, z. B. [toFixed(n)](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) rundet die Zahl auf die vorgegebene Genauigkeit: ```js run let n = 1.23456; -alert( n.toFixed(2) ); // 1.23 +alert(n.toFixed(2)); // 1.23 ``` -We'll see more specific methods in chapters and . +Wir werden weitere spezifische Methoden in den Kapiteln und sehen. +````warn header="Konstrukteure `String/Number/Boolean` sind nur für den internen Gebrauch bestimmt Einige Sprachen wie Java erlauben es uns, explizit "Wrapper-Objekte" für Primitive zu erstellen, indem wir eine Syntax wie`new Number(1)`or`new Boolean(false)`. -````warn header="Constructors `String/Number/Boolean` are for internal use only" -Some languages like Java allow us to explicitly create "wrapper objects" for primitives using a syntax like `new Number(1)` or `new Boolean(false)`. +In JavaScript ist das aus historischen Gründen auch möglich, aber höchst **nicht empfehlenswert**. Die Ergebnisse werden an mehreren Stellen verrückt. -In JavaScript, that's also possible for historical reasons, but highly **unrecommended**. Things will go crazy in several places. - -For instance: +Zum Beispiel: ```js run -alert( typeof 0 ); // "number" +alert(typeof 0); // "number" -alert( typeof new Number(0) ); // "object"! +alert(typeof new Number(0)); // "object"! ``` -Objects are always truthy in `if`, so here the alert will show up: +Objekte sind immer effektiv wahr in `if`, also wird hier alert angezeigt : ```js run let zero = new Number(0); -if (zero) { // zero is true, because it's an object - alert( "zero is truthy!?!" ); +if (zero) { + // zero ist wahr, weil es ein Objekt ist + alert('zero ist effektiv wahr!?!'); } ``` -On the other hand, using the same functions `String/Number/Boolean` without `new` is a totally sane and useful thing. They convert a value to the corresponding type: to a string, a number, or a boolean (primitive). +Andererseits ist die Verwendung der selben Funktionen`String/Number/Boolean` ohne `new` eine völlig vernünftige und nützliche Sache. Sie konvertieren einen Wert in den entsprechenden Typ: in eine Zeichenkette, eine Zahl oder einen booleschen Wert (primitiv). + +Beispielsweise ist Folgendes durchaus zulässig: -For example, this is entirely valid: ```js -let num = Number("123"); // convert a string to number +let num = Number('123'); // konvertiert eine Zeichenkette zu einer Zahl. ``` -```` + +````` -````warn header="null/undefined have no methods" -The special primitives `null` and `undefined` are exceptions. They have no corresponding "wrapper objects" and provide no methods. In a sense, they are "the most primitive". +````warn header="null/undefined haben keine Methoden" +Die speziellen Primitive `null` und `undefined` sind Ausnahmen. Sie haben keine entsprechenden "Wrapper-Objekte" und bieten keine Methoden. In gewissem Sinne sind sie "die primitivsten". -An attempt to access a property of such value would give the error: +Ein Versuch, auf eine Eigenschaft mit einem solchen Wert zuzugreifen, würde diesen Fehler erzeugen: ```js run alert(null.test); // error -```` +````` -## Summary +## Zusammenfassung -- Primitives except `null` and `undefined` provide many helpful methods. We will study those in the upcoming chapters. -- Formally, these methods work via temporary objects, but JavaScript engines are well tuned to optimize that internally, so they are not expensive to call. +- Primitive außer `null` und `undefined` verfügen über viele hilfreiche Methoden. Wir werden diese in den kommenden Kapiteln untersuchen. +- Formal funktionieren diese Methoden über temporäre Objekte, aber JavaScript-Engines sind gut darauf abgestimmt, dies intern zu optimieren, so dass der Aufruf dieser Methoden nicht aufwendig ist. From 5a87dd2516e9a683a31799a80b2846d33c7a7a89 Mon Sep 17 00:00:00 2001 From: couragesean Date: Mon, 13 Sep 2021 23:14:42 +0200 Subject: [PATCH 2/3] iterable --- 1-js/05-data-types/06-iterable/article.md | 59 +++++++++++------------ 1 file changed, 27 insertions(+), 32 deletions(-) diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index 8a38516e1..b274ecb7f 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -1,13 +1,11 @@ +# Iteriebare -# Iterables - -*Iterable* objects is a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop. +_Iteriebare_ Objekte sind eine Verallgemeinerung von Arrays. Das Konzept ermöglicht es uns, jedes Objekt in einer `for..of` -Schleife zu verwenden. Of course, Arrays are iterable. But there are many other built-in objects, that are iterable as well. For instance, strings are also iterable. If an object isn't technically an array, but represents a collection (list, set) of something, then `for..of` is a great syntax to loop over it, so let's see how to make it work. - ## Symbol.iterator We can easily grasp the concept of iterables by making one of our own. @@ -19,7 +17,7 @@ Like a `range` object that represents an interval of numbers: ```js let range = { from: 1, - to: 5 + to: 5, }; // We want the for..of to work: @@ -28,27 +26,26 @@ let range = { To make the `range` iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that). -1. When `for..of` starts, it calls that method once (or errors if not found). The method must return an *iterator* -- an object with the method `next`. -2. Onward, `for..of` works *only with that returned object*. +1. When `for..of` starts, it calls that method once (or errors if not found). The method must return an _iterator_ -- an object with the method `next`. +2. Onward, `for..of` works _only with that returned object_. 3. When `for..of` wants the next value, it calls `next()` on that object. -4. The result of `next()` must have the form `{done: Boolean, value: any}`, where `done=true` means that the iteration is finished, otherwise `value` is the next value. +4. The result of `next()` must have the form `{done: Boolean, value: any}`, where `done=true` means that the iteration is finished, otherwise `value` is the next value. Here's the full implementation for `range` with remarks: ```js run let range = { from: 1, - to: 5 + to: 5, }; // 1. call to for..of initially calls this -range[Symbol.iterator] = function() { - +range[Symbol.iterator] = function () { // ...it returns the iterator object: // 2. Onward, for..of works only with this iterator, asking it for next values return { current: this.from, - last: this.to, + last: this.to, // 3. next() is called on each iteration by the for..of loop next() { @@ -58,7 +55,7 @@ range[Symbol.iterator] = function() { } else { return { done: true }; } - } + }, }; }; @@ -95,7 +92,7 @@ let range = { } else { return { done: true }; } - } + }, }; for (let num of range) { @@ -103,7 +100,7 @@ for (let num of range) { } ``` -Now `range[Symbol.iterator]()` returns the `range` object itself: it has the necessary `next()` method and remembers the current iteration progress in `this.current`. Shorter? Yes. And sometimes that's fine too. +Now `range[Symbol.iterator]()` returns the `range` object itself: it has the necessary `next()` method and remembers the current iteration progress in `this.current`. Shorter? Yes. And sometimes that's fine too. The downside is that now it's impossible to have two `for..of` loops running over the object simultaneously: they'll share the iteration state, because there's only one iterator -- the object itself. But two parallel for-ofs is a rare thing, even in async scenarios. @@ -115,7 +112,6 @@ There are no limitations on `next`, it can return more and more values, that's n Of course, the `for..of` loop over such an iterable would be endless. But we can always stop it using `break`. ``` - ## String is iterable Arrays and strings are most widely used built-in iterables. @@ -123,9 +119,9 @@ Arrays and strings are most widely used built-in iterables. For a string, `for..of` loops over its characters: ```js run -for (let char of "test") { +for (let char of 'test') { // triggers 4 times: once for each character - alert( char ); // t, then e, then s, then t + alert(char); // t, then e, then s, then t } ``` @@ -134,7 +130,7 @@ And it works correctly with surrogate pairs! ```js run let str = '𝒳😂'; for (let char of str) { - alert( char ); // 𝒳, and then 😂 + alert(char); // 𝒳, and then 😂 } ``` @@ -167,8 +163,8 @@ That is rarely needed, but gives us more control over the process than `for..of` There are two official terms that look similar, but are very different. Please make sure you understand them well to avoid the confusion. -- *Iterables* are objects that implement the `Symbol.iterator` method, as described above. -- *Array-likes* are objects that have indexes and `length`, so they look like arrays. +- _Iterables_ are objects that implement the `Symbol.iterator` method, as described above. +- _Array-likes_ are objects that have indexes and `length`, so they look like arrays. When we use JavaScript for practical tasks in browser or other environments, we may meet objects that are iterables or array-likes, or both. @@ -193,7 +189,7 @@ for (let item of arrayLike) {} */!* ``` -Both iterables and array-likes are usually *not arrays*, they don't have `push`, `pop` etc. That's rather inconvenient if we have such an object and want to work with it as with an array. E.g. we would like to work with `range` using array methods. How to achieve that? +Both iterables and array-likes are usually _not arrays_, they don't have `push`, `pop` etc. That's rather inconvenient if we have such an object and want to work with it as with an array. E.g. we would like to work with `range` using array methods. How to achieve that? ## Array.from @@ -225,6 +221,7 @@ alert(arr); // 1,2,3,4,5 (array toString conversion works) ``` The full syntax for `Array.from` also allows us to provide an optional "mapping" function: + ```js Array.from(obj[, mapFn, thisArg]) ``` @@ -237,7 +234,7 @@ For instance: // assuming that range is taken from the example above // square each number -let arr = Array.from(range, num => num * num); +let arr = Array.from(range, (num) => num * num); alert(arr); // 1,4,9,16,25 ``` @@ -270,7 +267,7 @@ for (let char of str) { alert(chars); ``` -...But it is shorter. +...But it is shorter. We can even build surrogate-aware `slice` on it: @@ -281,26 +278,24 @@ function slice(str, start, end) { let str = '𝒳😂𩷶'; -alert( slice(str, 1, 3) ); // 😂𩷶 +alert(slice(str, 1, 3)); // 😂𩷶 // the native method does not support surrogate pairs -alert( str.slice(1, 3) ); // garbage (two pieces from different surrogate pairs) +alert(str.slice(1, 3)); // garbage (two pieces from different surrogate pairs) ``` - ## Summary -Objects that can be used in `for..of` are called *iterable*. +Objects that can be used in `for..of` are called _iterable_. - Technically, iterables must implement the method named `Symbol.iterator`. - - The result of `obj[Symbol.iterator]` is called an *iterator*. It handles the further iteration process. - - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value. + - The result of `obj[Symbol.iterator]` is called an _iterator_. It handles the further iteration process. + - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value. - The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly. - Built-in iterables like strings or arrays, also implement `Symbol.iterator`. - String iterator knows about surrogate pairs. - -Objects that have indexed properties and `length` are called *array-like*. Such objects may also have other properties and methods, but lack the built-in methods of arrays. +Objects that have indexed properties and `length` are called _array-like_. Such objects may also have other properties and methods, but lack the built-in methods of arrays. If we look inside the specification -- we'll see that most built-in methods assume that they work with iterables or array-likes instead of "real" arrays, because that's more abstract. From 3ea286267e3ae7d0aee461794bf14ffa1134eecb Mon Sep 17 00:00:00 2001 From: couragesean Date: Tue, 14 Sep 2021 20:40:22 +0200 Subject: [PATCH 3/3] iterable --- 1-js/05-data-types/06-iterable/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index b274ecb7f..006d451e1 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -1,10 +1,10 @@ -# Iteriebare +# Aufzählbare -_Iteriebare_ Objekte sind eine Verallgemeinerung von Arrays. Das Konzept ermöglicht es uns, jedes Objekt in einer `for..of` -Schleife zu verwenden. +_Aufzählbare_ Objekte sind eine Verallgemeinerung von Arrays. Das Konzept ermöglicht es uns, jedes Objekt in einer `for..of` -Schleife zu verwenden. -Of course, Arrays are iterable. But there are many other built-in objects, that are iterable as well. For instance, strings are also iterable. +Gewiss, Arrays sind aufzählbar. Aber es gibt auch viele weitere integrierte Objekte, die aufzählbar sind. Zum Beispiel sind auch Strings aufzählbar. -If an object isn't technically an array, but represents a collection (list, set) of something, then `for..of` is a great syntax to loop over it, so let's see how to make it work. +Wenn ein Objekt technisch gesehen kein Array ist, sondern eine Sammlung (Liste, Menge) repräsentiert, dann ist "for..of" eine hervorragende Syntax, um sie zudurchlaufen. Sehen wir uns an, wie das funktioniert. ## Symbol.iterator