\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 (javascript-grundlagen.pdf)
  /Creator (Cheatography)
  /Author (Huluvu424242 (FunThomas424242))
  /Subject (Javascript 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{Javascript Grundlagen Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Huluvu424242 (FunThomas424242)} via \textcolor{DarkBackground}{\uline{cheatography.com/19991/cs/19484/}}}
\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 28th April, 2019.\\
   Updated 2nd 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}{Javascript - Currying}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Was ist das?}} \newline Beim Currying wird eine Funktion der Ordnung n+1 (also n+1 Parameter) auf eine Funktion der Ordnung n (also n Parameter) reduziert. \newline Das Konzept dabei ist, die Funktion um einen Parameter zu kürzen und statt des ursprünglichen, berechneten Wertes eine Funktion mit dem gekürzten Parameter  zur weiteren Berechnung zurück zu geben. Damit wird die Funktion nun mit einem Parameter weniger aufgerufen. Nun muss aber das Ergebnis noch mit dem reduzierten Parameter aufgerufen werden. Also in Summe wurden wieder alle Parameter zur Berechnung übergeben, nur verteilt auf 2 Aufrufe oder mehr.  \newline  \newline {\bf{Beispiel für Currying und Uncurrying}} \newline curryedMultiply = (n) =\textgreater{} (m) =\textgreater{} n * m \newline curryedMultiply(3)(4) === 12 // true \newline  \newline multiply = (n, m) =\textgreater{} curryedMultiply(n)(m) \newline multiply(3, 4) === 12 // true} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://blog.benestudio.co/currying-in-javascript-es6-540d2ad09400}}  \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}{Javascript - Ich finde Lambdas verkürzt doof}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{// Lambdas sind so eine sch{\"o}ne Sache aber diese st{\"a}ndige Verkürzung  \newline // soweit wie geht ist einfach nervig und birgt Fehler.  \newline // Zwei Klammern für die Parameterliste und zwei für den Body kann man  \newline // doch schreiben oder? \newline  \newline // Sie sind anderer Meinung? - is ok. \newline // Ich nehme an Sie wissen, dass Pfeilfunktionen rechts assoziativ sind.  \newline // Trotzdem glaube ich nicht, dass Sie das hier lesen wollen: \newline curry = f =\textgreater{} a =\textgreater{} b =\textgreater{} f(a, b) \newline uncurry = f =\textgreater{} (a, b) =\textgreater{} f(a)(b) \newline papply = (f, a) =\textgreater{} b =\textgreater{} f(a, b) \newline Quelle: \seqsplit{https://blog.benestudio.co/currying-in-javascript-es6-540d2ad09400} \newline  \newline  \newline // Anderes und hoffentlich besseres Beispiel \newline // Nur zur Vorbereitung  \newline const woerter = {[}'Hallo', 'heute', 'gestern'{]}; \newline  \newline const processArray = function( items, fn)\{ \newline   const result = {[}{]}; \newline   items.forEach( (item) =\textgreater{} result.push(fn(item))); \newline   return result; \newline \} \newline   \newline // vollst{\"a}ndige Schreibweise mit Selbstausführung am Ende \newline const berechneWortlaenge = function()\{ \newline   const map = processArray(woerter, function( wort )\{ \newline     return \{ wort: wort, laenge: wort.length\}; \newline   \}); \newline   console.log('1. Ausgabe: ' +JSON.stringify(map)); \newline \}(); \newline  \newline // Umgewandelt in lambda Ausdruck  \newline const berechneWortlaenge = function()\{ \newline   const map = processArray(woerter, ( wort ) =\textgreater{}\{ \newline      return \{ wort: wort, laenge: wort.length\}; \newline   \}); \newline   console.log('2. Ausgabe: ' + JSON.stringify(map)); \newline \}(); \newline  \newline // obsolete Klammern entfernt: Parameterliste, Body und  \newline // return Schlüsselwort entfernt, da an letzter Stelle \newline // =\textgreater{} compile Fehler weil das Ergebnisobjekt als Body  \newline // interpretiert wird !!! \newline //const berechneWortlaenge = function()\{ \newline //  const map = processArray(woerter, wort =\textgreater{}  \newline //      \{ wort: wort, laenge: wort.length\} \newline //  ); \newline //  console.log('3. Ausgabe: ' + JSON.stringify(map)); \newline //\}(); \newline  \newline  \newline // Obsolete Klammern zur Umwandlung in Expression hinzugefügt \newline const berechneWortlaenge = function()\{ \newline   const map = processArray(woerter, wort =\textgreater{}  \newline     (\{ wort: wort, laenge: wort.length\}) \newline   ); \newline   console.log('4. Ausgabe: ' + JSON.stringify(map)); \newline \}();} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Javascript - Operatoren}}  \tn
% Row 0
\SetRowColor{LightBackground}
a + b & Addition von a und b \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
a - b & Subtraktion: subtrahiert b von a \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
a * b & Multiplikation von a und b \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\{\{nobreak\}\}x ** y & Exponentialfunktion: x hoch y (wobei sowohl x als auch y variabel sein k{\"o}nnen - leider keinen korrekten mathematischen Namen gefunden: Potenzfunktion w{\"a}re fester Exponent, also auch nicht korrekt.) \tn 
% Row Count 14 (+ 9)
% Row 4
\SetRowColor{LightBackground}
a / b & Division: a durch b \tn 
% Row Count 15 (+ 1)
% Row 5
\SetRowColor{white}
\{\{nobreak\}\}a \% b & Modulus: a modulo b \tn 
% Row Count 17 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\{\{nobreak\}\}a++ & Inkrement: erh{\"o}ht a um 1 \tn 
% Row Count 19 (+ 2)
% Row 7
\SetRowColor{white}
\{\{nobreak\}\}a-{}- & Dekrement: verringert a um 1 \tn 
% Row Count 21 (+ 2)
% Row 8
\SetRowColor{LightBackground}
== & Gleichheitsprüfung nur auf Wertebasis (verschiedene aber wertgleiche Datentypen ergeben  true) \tn 
% Row Count 25 (+ 4)
% Row 9
\SetRowColor{white}
=== & Gleichheitsprüfung inklusive Werte- und Typgleichheit \tn 
% Row Count 28 (+ 3)
% Row 10
\SetRowColor{LightBackground}
!= & Ungleich ohne Typberücksichtigung \tn 
% Row Count 30 (+ 2)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Javascript - Operatoren (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
!== & Ungleich mit Typberücksichtigung \tn 
% Row Count 2 (+ 2)
% Row 12
\SetRowColor{white}
\textgreater{} & gr{\"o}{\ss}er als \tn 
% Row Count 3 (+ 1)
% Row 13
\SetRowColor{LightBackground}
\textless{} & kleiner als \tn 
% Row Count 4 (+ 1)
% Row 14
\SetRowColor{white}
\textgreater{}= & gr{\"o}{\ss}er gleich \tn 
% Row Count 5 (+ 1)
% Row 15
\SetRowColor{LightBackground}
\textless{}= & kleiner gleich \tn 
% Row Count 6 (+ 1)
% Row 16
\SetRowColor{white}
? & Tern{\"a}rer Operator: (bedingung) ? ifAnweisung : elseAnweisung; \tn 
% Row Count 9 (+ 3)
% Row 17
\SetRowColor{LightBackground}
\&\& & logisches UND \tn 
% Row Count 10 (+ 1)
% Row 18
\SetRowColor{white}
|| & logisches ODER \tn 
% Row Count 11 (+ 1)
% Row 19
\SetRowColor{LightBackground}
! & logisches NOT \tn 
% Row Count 12 (+ 1)
% Row 20
\SetRowColor{white}
typeof \textless{}a\textgreater{} & Bestimmt den Typ der Variablen a \tn 
% Row Count 14 (+ 2)
% Row 21
\SetRowColor{LightBackground}
\{\{nobreak\}\}o instanceof t & true falls o ein Objekt vom Typ t ist \tn 
% Row Count 16 (+ 2)
% Row 22
\SetRowColor{white}
\& & bitweises UND \tn 
% Row Count 17 (+ 1)
% Row 23
\SetRowColor{LightBackground}
| & bitweises ODER \tn 
% Row Count 18 (+ 1)
% Row 24
\SetRowColor{white}
\textasciitilde{} & bitweises NOT \tn 
% Row Count 19 (+ 1)
% Row 25
\SetRowColor{LightBackground}
\textasciicircum{} & bitweises XOR \tn 
% Row Count 20 (+ 1)
% Row 26
\SetRowColor{white}
\textless{}\textless{} & bitweises links Schieben; mit 0 auffüllend \tn 
% Row Count 22 (+ 2)
% Row 27
\SetRowColor{LightBackground}
\textgreater{}\textgreater{} & bitweises rechts Schieben; vorzeichenerhaltend (so die Theorie) \tn 
% Row Count 25 (+ 3)
% Row 28
\SetRowColor{white}
\textgreater{}\textgreater{}\textgreater{} & bitweises rechts Schieben; mit 0 auffüllend \tn 
% Row Count 27 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Quelle: \seqsplit{https://www.w3schools.com/js/js\_operators.asp}}  \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}{Javascript - Datentypen}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{In Javascript existieren 5 primitive Datentypen: \newline % Row Count 1 (+ 1)
* String = Zeichenkette \newline % Row Count 2 (+ 1)
* Number = Ziffernfolge \newline % Row Count 3 (+ 1)
* Boolean = Boolscher Datentyp \newline % Row Count 4 (+ 1)
* Null = leere Referenz \newline % Row Count 5 (+ 1)
* Undefined = Nicht vorhandener Wert% Row Count 6 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://www.ab-heute-programmieren.de/js-teil-3-datentypen-und-hoisting/}}  \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}{Javascript Konzept: Hoisting}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Beim Hoisting werden sp{\"a}ter definierte Variablen bereits am Scopebeginn (für den Entwickler unsichtbar) automatisch deklariert. Dadurch k{\"o}nnen Wertzuweisungen auf eine Variable erfolgen, welche laut Quellkode noch gar nicht existiert.  \newline  \newline {\bf{Beispiel{\emph{ \newline  \newline num = 6; \newline console.log(num); // Gibt 6 zurück \newline var num = 7; \newline console.log(num); // Gibt 7 zurück \newline  \newline Hoisting gibt es auch für Funktionen \newline  \newline }}Beispiel{\bf{ \newline  \newline catName("Chloe"); \newline  \newline function catName(name) \{ \newline   console.log("Der Name meiner Katze ist " + name); \newline \} \newline /}} \newline Das Ergebnis des Codes oben ist: "Der Name meiner Katze ist Chloe" \newline {\emph{/ \newline  \newline  \newline Wichtig: Es werden nur die Deklarationen gehoisted, nicht die Zuweisungen. \newline  \newline }}Beispiele}}* \newline  \newline console.log(num); // Gibt undefined zurück \newline var num; \newline num = 6; \newline  \newline var x = 1; // Initialisiere x \newline console.log(x + " " + y); // '1 undefined' \newline var y = 2; // Initialisiere y \newline  \newline // Das obige Beispiel wird implizit als das folgende verstanden: \newline var x; // Deklariere x \newline var y; // Deklariere y \newline // Hoisting beendet. \newline  \newline x = 1; // Initialisiere x \newline console.log(x + " " + y); // '1 undefined' \newline y = 2; // Initialisiere y} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://developer.mozilla.org/de/docs/Glossary/Hoisting}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.56 cm} x{5.44 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Javascript - Typische Datentypkonvertierungen}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{nobreak\}\}25 + '' & Zahl -\textgreater{} String, Die Zahl 25 wird zu '25' \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\{\{nobreak\}\}'25' - 0 & String -\textgreater{} Zahl, Der Text '25' wird zur Zahl 25 \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
!!a & any -\textgreater{} boolean, Der Wert der Variablen a wird zum Wahrheitswert: true falls a einen Wert enth{\"a}lt und false falls nicht \tn 
% Row Count 9 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Umwandlung einer Promise Callback H{\"o}lle}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Alter Stil: \newline  \newline doSomething(function(result) \{ \newline   doSomethingElse(result, function(newResult) \{ \newline     doThirdThing(newResult, function(finalResult) \{ \newline       console.log('Got the final result: ' + finalResult); \newline     \}, failureCallback); \newline   \}, failureCallback); \newline \}, failureCallback); \newline  \newline Moderner Stil: \newline doSomething().then(function(result) \{ \newline   return doSomethingElse(result); \newline \}) \newline .then(function(newResult) \{ \newline   return doThirdThing(newResult); \newline \}) \newline .then(function(finalResult) \{ \newline   console.log('Got the final result: ' + finalResult); \newline \}) \newline .catch(failureCallback); \newline  \newline  \newline Der alte Stil kann in den neuen Stil überführt werden, wenn es nur darum geht, dass die inneren Promises nach den {\"a}u{\ss}eren ausgeführt werden und die {\"a}u{\ss}eren Variablen in den inneren Promises keine Rolle mehr spielen.} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\seqsplit{https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Using\_promises}}  \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}{Overloading von Funktionssignaturen}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{export class Test\{ \newline      \newline     public add( a: Number, b:Number):void; \newline     public add( a: String, b:String):void; \newline     public add( a: boolean, b:boolean):void; \newline     public add( a, b):void\{ \newline         console.log(a+b); \newline     \} \newline  \newline     public static run():any\{ \newline         let t:Test = new Test(); \newline         t.add('a','b'); \newline         t.add(3,5); \newline         t.add(true,true); \newline     \} \newline \} \newline  \newline Test.run(); \newline  \newline Erzeugt die Ausgaben: \newline ab  \newline 8 \newline 2} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}