=====JavaScript in 2019 - Wie JavaScript heute (2019) implementieren und anwenden=====
Seit Netscape Zeit verwende ich JavaScript, aber ist das immer noch die richtige Art und Weise mit der Sprache umzugehen?
Welcher Programmier Stil mit JavaScript ist heute modern und wie sollte es "richtig" umgesetzt werden?
Hier eine kleine Sammlung vom aktuellen/modernen Umgang mit JavaScript für PL/SQL Developer.
=== Eine Kurzer Rückblick ===
JavaScript wurde ursprünglich als einfache Script Sprache entwickelt um einfache Aufgaben im Web zu lösen (Throw Away Language)
Nach und Nach wurde immer Standardisiert, => [[https://en.wikipedia.org/wiki/ECMAScript|ECMAScript]], aktuell ES7 = ES2016, bald V8 , der JavaScript Interpreter ( Der [[https://en.wikipedia.org/wiki/Source-to-source_compiler|Transpiler]] ) muss natürlich zu den verwendeten Optionen passen!
Siehe daszu TC39 => https://www.ecma-international.org/memento/tc39-m.htm
----
==== Variablen===
Früher (ES5) : Standard "**var**" , eine Variable explizit deklarieren, evtl. aber auch noch verfügbar in äußeren Scope der Deklaration, Gültigkeit im Scope nach "Innen"
Neu (ES6)
* **let** - Variable nur in diesem Scope definieren
* ähnlich **var**, nur in dem Block Scope! , damit wird das Risiko vermindert, das eine Variable fälschlich in einem anderen Scope plötzlich "überschrieben" wird, bzw. einen gar nicht so bedachten Wert angenommen hat
*
var x=1;
if (true) {
let x=0
console.log(x);
}
console.log(x);
* **const** - Eine Konstante definieren
*
const x=0
x=1
VM876:1 Uncaught TypeError: Assignment to constant variable.
at :1:2
Fehler wird geworfen falls Variable überschrieben werden soll
----
==== Operatoren ====
Spread Operator "**...**" ( Übersetzt wie "verteilen, ausbreiten")
Mit dem "..." Operator können Objekte mit einander verknüpft werden.
**Array verknüpfen***
var a = ['a','b','c'];
var b = ['x', 'y', 'z'];
buchstaben = [...a, ...b];
// Ergebniss ist ein neues Array mit
// ["a", "b", "c", "x", "y", "z"]
=== Destructuring===
Linkseitige Zuweisungen, Objekte wieder zerlegen
Beispiel:
const [a,b,c,d,e]='abcde';
console.log(a);
==Elision==
Werte ignorieren:
const [,,w,g]='abcde';
console.log(g)
d
== Rest operator "..." ==
Restliches Array in die "hinterste" Variable einfangen.
Beispiel:
const [x,y,...z]='abcde';
console,log(z);
["c", "d", "e"]
===Exponent infix operator ===
Alt: Math.power(1,2)
Neu: 1**2
=== Template String Literals ===
ES2015
Stings in Back Ticks '`' mit ${} Syntax formatiert ausgeben. Funktion
=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
const gpi_printer = ( text, ...textDetails) => {
return text
}
----
==== Funktions ====
===IIFE Immediately Invoked Function Expression ===
(function() {
let text= 'called from Immediately Invoked Function Expression';
console.log(text);
})();
// inkl. Übergabeparameter
(function(text) {
console.log(text);
})('called from Immediately Invoked Function Expression');
// noch kürzer mit Arrow Function
(() => {
let text= 'called from Immediately Invoked Function Expression';
console.log(text);
})();
=> https://medium.com/@vvkchandra/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6
=== Arrow Functions ===
Seit ES6
Der große Unterschied zu einer mit "function () {}" definierten anonymen Funktion ist der Scope, das globale "this" ist in der Arrow Functions noch referenzierbar.
Beispiele:
() => { statement }
(argument) => { statement }
//implicit return
() => expression
einArgument => expression
//explicit return
() => { return expression }
(arg1,arg2) => { return expression }
// Einsatz
// funktion x definieren
x = (x) = > x*2
x(2)
4
// das gleiche wie
function x (x) {
return x *2;
}
x(2)
4
Das bedeutet mehr das ein oder mehr Argument auf eine bestimmte Art verarbeitet werden sollen, auf das return der impliziten Funktion dahinter kann direkt verwiesen werden.
Einsatz besonders mit Funktionen wie wiederum eine Funktion als Argument erwarten, wie map auf einer Collection
var parts = [ 'NE555','Diode','Transistor','OP']
parts.map(listElement => listElement.length);
0: 5
1: 5
2: 10
3: 2
siehe auch https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
=== Default Values für Funktionen ===
function myBox( x =1 , y = 1) {
...
}
=== Zugriff auf Global this ===
V8 !
Mit "globalThis" auf den aktuellen This Context zugreigen:
const myThis = globalThis
//myThis zeigt im Browser nun auf > Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// in Node auf Global etc.
Funktioniert nicht im Edge!
===Higher-order iterators===
watch => https://www.youtube.com/watch?v=GYRMNp1SKXA
----
=== Array From ===
Die Array From Funktion kann über einen zweiten Parameter auch transformieren
var o = [1,2,3,4,5,6];
var x=Array.from(o,(x) => x-1);
//kürzer und noch etwas schlechter zu verstehen .-)
var x=Array.from(o, x => x-1);
// ergibt x
//[0, 1, 2, 3, 4, 5]
//ein Array mit 5 Zufallszahlen zwischen 0 und 99 erzeugen
var x=Array.from( { length: 5 } , () => Math.floor(Math.random()*100) );
=> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
----
==== Async / Await ====
Asynchrone Ausführung im Browser
----
==== Quellen ====
==Youtube==
Fun Fun Function
* https://www.youtube.com/channel/UCO1cgjhGzsSYb1
What the heck is the event loop anyway
* https://www.youtube.com/watch?v=8aGhZQkoFbQ
Intro to Modern JavaScript
* https://www.youtube.com/watch?v=BOSQ8m21oLo
JavaScript: Understanding the Weird Parts - The First 3.5 Hours
* https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
What’s New in JavaScript
* https://www.youtube.com/watch?v=ALVonT74_gA
==Bücher==
JavaScript: The Good Parts by Douglas Crockford
* https://www.goodreads.com/book/show/2998152-javascript
Online Buch => https://github.com/getify/You-Dont-Know-JS
https://builderbook.org/book
==News Letter ==
* https://javascriptweekly.com
==Beispiele ==
* https://jsfiddle.net/
* https://codepen.io/
* https://30secondsofcode.org/index#all