Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:modern_javascript

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);
})();

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

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
News Letter
Beispiele
Diese Website verwendet Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer zu. Außerdem bestätigen Sie, dass Sie unsere Datenschutzbestimmungen gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website.Weitere Information
"Autor: Gunther Pipperr"
prog/modern_javascript.txt · Zuletzt geändert: 2019/05/28 16:38 von gpipperr