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.
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
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)
var x=1; if (true) { let x=0 console.log(x); } console.log(x);
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
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"]
Linkseitige Zuweisungen, Objekte wieder zerlegen
Beispiel:
const [a,b,c,d,e]='abcde'; console.log(a);
Werte ignorieren:
const [,,w,g]='abcde'; console.log(g) d
Restliches Array in die „hinterste“ Variable einfangen.
Beispiel:
const [x,y,...z]='abcde'; console,log(z); ["c", "d", "e"]
Alt: Math.power(1,2)
Neu: 1**2
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 }
(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); })();
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
function myBox( x =1 , y = 1) { ... }
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!
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
Asynchrone Ausführung im Browser
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
JavaScript: The Good Parts by Douglas Crockford
Online Buch ⇒ https://github.com/getify/You-Dont-Know-JS