\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Huluvu424242 (FunThomas424242)}
\pdfinfo{
  /Title (es6-grundlagen.pdf)
  /Creator (Cheatography)
  /Author (Huluvu424242 (FunThomas424242))
  /Subject (ES6 Grundlagen Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{ES6 Grundlagen Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Huluvu424242 (FunThomas424242)} via \textcolor{DarkBackground}{\uline{cheatography.com/19991/cs/19483/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Huluvu424242 (FunThomas424242) \\
  \uline{cheatography.com/funthomas424242} \\
        \uline{\seqsplit{github}.com/Huluvu424242}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 14th July, 2019.\\
   Updated 20th July, 2019.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ECMAScript - Javascript}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Historie Namesgebung}} \newline % Row Count 1 (+ 1)
Ecmascript wird seit etwa 1997 als Standard für Javascript und {\"a}hnliche Sprachen entwickelt. Die Versionen wurden einfach aufw{\"a}rts nummeriert bis  Ecmascript 6 welches dann nachtr{\"a}glich in Ecmascript2015 umbenannt wurde. Die aktuelle Bezeichnung für Ecmascript ist die mit Jahreszahl aber in der Praxis sind durchaus auch die alten Namen gebr{\"a}uchlich, welche sogar noch weiter gez{\"a}hlt werden wie Ecmascript 9 oder als Kurzform ES 9 bewei{\ss}t.  \newline % Row Count 10 (+ 9)
Quelle: \seqsplit{https://en.wikipedia.org/wiki/ECMAScript} \newline % Row Count 11 (+ 1)
{\bf{Browserkompatibilit{\"a}t und Transpiler}} \newline % Row Count 12 (+ 1)
Da es immer eine l{\"a}ngere Zeit dauert bis die neuen Features einer neuen Ecmascript Version in allen Browsern umgesetzt ist, werden Transpiler benutzt um von der neuen Ecmascript Version auf die aktuell überall implementierte Version zu übersetzen. Transpiler sind uns aus der Compilertechnik noch als Querübersetzer in Erinnerung welche eine Hochsprache in eine andere Hochsprache übersetzt haben, z.B. Oberon nach C damit Oberon auch für weitere Betriebssysteme bereitgestellt werden konnte (fiktives Beispiel für Oberon).  Die aktuelle Version wird dann vom echten Compiler (in Node.js oder Chrome Browser z.B. V8) in nativen OS Kode übersetzt.% Row Count 26 (+ 14)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quellen:  \newline {\emph{ \seqsplit{https://www.ab-heute-programmieren.de/es2015-teil-1-was-ist-es2015/} \newline }} \seqsplit{https://en.wikipedia.org/wiki/ECMAScript}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ES6 - Feature: Spread-Syntax}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Mit Hilfe der Spread Syntax lassen sich anstelle von kommaseparierten Argumentlisten einfach Teile eines oder auch ganze Arrays übergeben.  \newline  \newline  \newline {\bf{Beispiele}} \newline  \newline function myFunction(v, w, x, y, z) \{ \} \newline var args = {[}0, 1{]}; \newline myFunction(-1, ...args, 2, ...{[}3{]}); \newline  \newline var parts = {[}'shoulders', 'knees'{]}; \newline var lyrics = {[}'head', ...parts, 'and', 'toes'{]}; // {[}"head", "shoulders", "knees", "and", "toes"{]}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread\_operator}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ES6 - Feature: Klassen}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Was sind Klassen}} \newline Das Schlüsselwort class gibt es seit ES6 (Ecmascript Version 6). Es handelt sich um syntaktischen Zucker durch den die class Syntax auf eine Funktion abgebildet wird. Also sind Klassen eigentlich nix weiter als Funktionen aber sch{\"o}ner lesbar.  \newline  \newline {\bf{Anbei der Beweis}}: \newline 'use strict'; \newline class Foo\{\} \newline console.log(typeof Foo); \newline \textgreater{} function \newline  \newline Der Typ einer Klasse ist also eine Funktion und nicht wie erwartet eine Metaklasse.  \newline  \newline // Klassen definieren \newline class Person \{ \newline   constructor(firstname, lastname) \{ \newline     this.firstname = firstname; \newline     this.lastname = lastname; \newline   \} \newline   \newline   greet() \{ \newline     console.log('Hallo ' + this.firstname + ' ' + this.lastname); \newline   \} \newline \} \newline  \newline // Vererbung von Klassen \newline var john = new Person('John', 'Maier'); \newline john.greet(); \newline  \newline class Child extends Person \{ \newline   constructor(firstname, lastname, age) \{ \newline     super(firstname, lastname); \newline  \newline     this.age = age; \newline   \} \newline  \newline   greet() \{ \newline     super.greet(); \newline     console.log('Du bist ' + this.age + ' Jahre alt!'); \newline   \} \newline \} \newline  \newline // Statische Methoden \newline class Child extends Person \{ \newline   static isTeenager(child) \{ \newline     if (child.age \textgreater{}= 10 \&\& child.age \textless{}= 19) \{ \newline       return true; \newline     \} \newline     return false; \newline   \} \newline \} \newline  \newline Achtung: Bei Klassen gibt es kein hoisting! Daraus folgt, die Benutzung einer nicht vorher definierten Klasse führt zum ReferenceError.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quellen: \newline {\emph{ \seqsplit{https://www.techlounge.io/node\#episode-204647256} Folge 7: Callbacks verwenden \newline }} \seqsplit{https://www.ab-heute-programmieren.de/es2015-teil-3-klassen/} \newline (Beispiele komplett übernommen)}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ES6 - Feature: Pfeilfunktionen}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Alte Syntax \newline doSomething(function(result) \{ \newline   console.log('Das Ergebnis ist: ' + result); \newline \}); \newline  \newline Neue Syntax \newline doSomething(result =\textgreater{} console.log('Das Ergebnis ist: ' + result)); \newline  \newline Achtung: Semantischer Unterschied ist this! W{\"a}hrend this sich bei der alten Syntax nur auf den Scope innerhalb der Funktion bezieht, bezieht sich this bei der neuen Syntax auf Dinge aus der Aufrufenden Umgebung der Funktion. \newline Quelle: \seqsplit{https://www.ab-heute-programmieren.de/es2015-teil-2-pfeilfunktionen/} \newline  \newline  \newline Beweis mit Plunker: \newline  \newline var test = \{ \newline   a : 10, \newline   b : {[}1, 2, 3{]}, \newline   add : function() \{ \newline     this.b.forEach(function (b) \{ \newline       console.log(this.a + b); \newline     \}); \newline   \} \newline \} \newline   \newline test.add(); \newline  \newline \textgreater{}NaN \newline \textgreater{}NaN \newline \textgreater{}NaN \newline  \newline var test = \{ \newline   a : 10, \newline   b : {[}1, 2, 3{]}, \newline   add : function() \{ \newline     this.b.forEach(b =\textgreater{} console.log(this.a + b)); \newline   \} \newline \} \newline   \newline test.add(); \newline  \newline \textgreater{}11 \newline \textgreater{}12 \newline \textgreater{}13} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://www.ab-heute-programmieren.de/es2015-teil-2-pfeilfunktionen/} \newline (Beispiel komplett übernommen)}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{asynch / await}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Es gelten folgende Regeln: \newline % Row Count 1 (+ 1)
* await gibt immer ein aufgel{\"o}stes Promise zurück oder es wirft einen unbehandelten Fehler \newline % Row Count 3 (+ 2)
* await verpackt simple Werte ebenfalls in ein aufgel{\"o}stes Promise und gibt dieses zurück \newline % Row Count 5 (+ 2)
* await wartet bis eine nachfolgende Promise aufgel{\"o}st wurde \newline % Row Count 7 (+ 2)
* await ist nur innerhalb einer mit asynch markierten Funktion m{\"o}glich \newline % Row Count 9 (+ 2)
* asynch kennzeichnet eine asynchrone Funktion \newline % Row Count 10 (+ 1)
Eine Alternative zu await ist die Behandlung der Promis mittels then und catch. Nach Anwendung dieser Alternativen, wird keine Markierung der umschlie{\ss}enden Funktion mit asynch mehr notwendig.% Row Count 14 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/async\_function}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}