Inhaltsverzeichnis
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, ⇒ ECMAScript, aktuell ES7 = ES2016, bald V8 , der JavaScript Interpreter ( Der 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 <anonymous>: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); })();
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
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
What the heck is the event loop anyway
Intro to Modern JavaScript
JavaScript: Understanding the Weird Parts - The First 3.5 Hours
What’s New in JavaScript
Bücher
JavaScript: The Good Parts by Douglas Crockford
Online Buch ⇒ https://github.com/getify/You-Dont-Know-JS