\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{raposinha}
\pdfinfo{
  /Title (javascript-fundamentals.pdf)
  /Creator (Cheatography)
  /Author (raposinha)
  /Subject (Javascript Fundamentals 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}{4D0101}
\definecolor{LightBackground}{HTML}{F9F7F7}
\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 Fundamentals Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{raposinha} via \textcolor{DarkBackground}{\uline{cheatography.com/197915/cs/42598/}}}
\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}raposinha \\
  \uline{cheatography.com/raposinha} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 21st November, 2024.\\
   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*}{3}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Introduction}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Javascript was designed to run only in browsers so every browser uses a Javascript Engine. Node combines C++ and JS so JS can run outside of browsers.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{ECMASCRIPT, Specification, defines JS standards.} \tn 
% Row Count 4 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{The Javascript Console can be found in Chrome \textgreater{} Inspect \textgreater{} Console.} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{Just like browsers, Node includes the v8 JavaScript engine, so it can read and execute JavaScript scripts} \tn 
% Row Count 9 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Operator's precedence}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{The precedence is as follows: multiplication *, sum +} \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{3.13551 cm} x{1.84149 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Bitwise operators}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{A little less practical.} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{1 = 00000001, 2 = 00000010} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Bitwise are similar to Logical operators, but they operate on the singular bits of a number: each bit/8 is compared.} \tn 
% Row Count 5 (+ 3)
% Row 3
\SetRowColor{white}
Bitwise OR & console.log(1 | 2); //3 \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
With OR, each individual bit is compared, if any of them is 1, the result is zero, like: & 00000001 //1 \tn 
% Row Count 11 (+ 4)
% Row 5
\SetRowColor{white}
 & 00000010 //2 \tn 
% Row Count 12 (+ 1)
% Row 6
\SetRowColor{LightBackground}
 & 00000011 //(1 | 2) \tn 
% Row Count 14 (+ 2)
% Row 7
\SetRowColor{white}
Bitwise AND & console.log(1 \& 2); // \tn 
% Row Count 16 (+ 2)
% Row 8
\SetRowColor{LightBackground}
With AND, each individual bit is compared, if both bits are 1, the result is one, otherwise 0: & 00000011 //(1 \& 2) \tn 
% Row Count 20 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.44333 cm} x{3.53367 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Logical operators with non-booleans}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{If the operand/'condition' is not 'true' or 'false'(boolean) JS will try to interpret it as 'truey' or 'falsey'.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
"Falsey" values: & undefined, null, 0, false, '', "", NaN \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
"Truthy" values: & anything else - Strings, natural numbers \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.77809 cm} x{1.87657 cm} x{1.92234 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{5.377cm}}{\bf\textcolor{white}{Logical operators}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Logical} AND \seqsplit{(\&\&)} & Returns 'true' if both operands or conditions are 'true' & true \&\& true =\textgreater{} true; true \&\& false =\textgreater{} false \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\seqsplit{Logical} OR (||) & Returns 'true' if one of the \seqsplit{operands/conditions} are 'true' & true || false =\textgreater{} true; true || true =\textgreater{} true; false || true =\textgreater{} true; false || false =\textgreater{} false \tn 
% Row Count 10 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{Logical} NOT (!) & Will turn the operand /condition into false if true, true if false & let happy = !sad \tn 
% Row Count 15 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Ternary operators}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// Ternary operators \newline  \newline // If a costumer has over 10 points they're a GOLD costumer, otherwise they're silver. \newline  \newline let points = 110; \newline // Condition (produces boolean), if true, set to 'gold', otherwise, 'silver' \newline let customerType = points \textgreater{} 100 ? 'gold' : 'silver'; \newline  \newline console.log(customerType); \newline  \newline There's a better way to shorten this if the condition's result is true or false: \newline return width \textgreater{} height; \newline instead of : return width \textgreater{} height ? true : false;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{These conditions use booleans to return a value depending on the boolean type.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Operators}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Operators are used alongside variables to create expressions. With these we can create logic and algorithms.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{In JavaScript we have Arithmetic, Assigment,  Comparison, Bitwise and Logical Operators.} \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Arithmetic} \tn 
% Row Count 6 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{Assignment} \tn 
% Row Count 7 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Arithmetic Operators}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{let x = 10; \newline let y = 3; \newline  \newline console.log(x + y); \newline console.log(x - y); \newline console.log(x {\emph{ y); \newline console.log(x / y); \newline console.log(x \% y); \newline console.log(x }}* y); \newline  \newline //// Increment and Decrement Operators \newline // 10 \newline console.log(x); \newline  \newline // 11+1 (operation applied first) \newline console.log(++x); \newline  \newline // 11+1 (operation applied later) \newline console.log(x++);} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Used for performing calculations, like mathematics. Usually variables with numeric values are used (operands) to produce new values (expression - something that produces a value. \newline For increment and decrement operators, if applied before the variable, the operation will be performed before the action. If applied after, after the action is executed.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Assignment operators}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1712556401_assignment-operators-1.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Comparison operators}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// Relational operators \newline let xx = 1; \newline console.log(xx \textgreater{} 0); \newline // true, 1 is bigger than 0 \newline console.log(xx \textgreater{}= 1); \newline // true, 1 is equal or bigger than 1 \newline console.log(xx \textless{} 1); \newline // false, 1 is no less than 1 \newline console.log(xx \textless{}= 1); \newline // true, 1 is equal or smaller to 1 \newline  \newline  \newline // Equality operators \newline console.log(xx === 1); \newline // true, x is the same value and type as 1 \newline console.log(xx !== 1); \newline // false,  x is no different to 1} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{We use them to compare the value of a variable with something else. \newline The result of an expression that includes a comparison operator is a boolean (true or false).}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Equality operators}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// Equality operators \newline console.log(xx === 1); \newline // true, x is the same value and type as 1 \newline console.log(xx !== 1); \newline // false,  x is no different to 1 \newline  \newline //// Lose equality operators \newline console.log( xx == y); \newline  \newline //// Strict equality operators \newline console.log( xx === y); \newline  \newline // true \newline console.log( '1' == 1 ); \newline // false \newline console.log( '1' === 1 );} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Lose equality operators ensure that two variables share value, Strict equality operators ensure that two variables share value and type. Type such as number, string, etc. \newline  \newline Lose equality will take the first variable's type and convert the second to that type automatically when compared.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Boilerplate project}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{To start off, create an HTML document. Set a \textless{}script\textgreater{} tag on the head or body, but best practice is at the end of the \textless{}body\textgreater{} element because the browser will parse the content the DOM first.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{// This is a comment.} \tn 
% Row Count 5 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{console.log("This is a sequence. It logs this message from the console.")} \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{\textless{}script src="index.js"/\textgreater{}} \tn 
% Row Count 8 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{From the terminal, launch "node index.js" to run the JavaScript script} \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{From VSCode, run View \textgreater{} Terminal to run the JavaScript script} \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4577 cm} x{2.15119 cm} x{1.96811 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{5.377cm}}{\bf\textcolor{white}{Reference types}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Objects} & A type that holds properties - when multiple properties are related we can fit them inside an Object. & let person = \{\} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
 & Inside an object tehre's value and keys: & \{ name: 'Mosh', age: 27 \} \tn 
% Row Count 9 (+ 3)
% Row 2
\SetRowColor{LightBackground}
 & Objects can also be printed & \seqsplit{console.log(person);} \tn 
% Row Count 11 (+ 2)
% Row 3
\SetRowColor{white}
 & Object properties can be changed. (Dynamic typing, remember?) & person.name = 'Sara' \tn 
% Row Count 15 (+ 4)
% Row 4
\SetRowColor{LightBackground}
 &  & person{[}'name'{]} = "Mary" \tn 
% Row Count 17 (+ 2)
% Row 5
\SetRowColor{white}
\seqsplit{Arrays} & A type used to store other types in a list-like manner. Technically an Object. & let selectedColors = {[}{]}; \tn 
% Row Count 22 (+ 5)
% Row 6
\SetRowColor{LightBackground}
 &  & let selectedColors = {[}'red', 'blue'{]}; \tn 
% Row Count 25 (+ 3)
% Row 7
\SetRowColor{white}
 & Array elements each have an index, in this case: red is 0, blue is 1. To access them & selectedColors{[}0{]}; // red \tn 
% Row Count 30 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{p{0.4577 cm} x{2.15119 cm} x{1.96811 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{5.377cm}}{\bf\textcolor{white}{Reference types (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
 & Because JavaScript is a dynamic language, variables can be set, added, deleted at runtime or any time. And they can be of any type & selectedColors{[}2{]} = 'yellow'; \tn 
% Row Count 8 (+ 8)
% Row 9
\SetRowColor{white}
 &  & selectedColors{[}3{]} = 8; \tn 
% Row Count 10 (+ 2)
% Row 10
\SetRowColor{LightBackground}
 & Because Arrays are Objects, they have their own inherited properties like indexOf, length... &  \tn 
% Row Count 16 (+ 6)
% Row 11
\SetRowColor{white}
\seqsplit{Functions} & A set of statements that perform a task or calculates a value &  \tn 
% Row Count 20 (+ 4)
% Row 12
\SetRowColor{LightBackground}
 & The variable we parse into the function is an 'argument'. & greet('María'); \tn 
% Row Count 24 (+ 4)
% Row 13
\SetRowColor{white}
 & If we don't parse a second variable, it will print undefined. & greet("Juana",lastName); \tn 
% Row Count 28 (+ 4)
% Row 14
\SetRowColor{LightBackground}
 & All functions in JavaScript are objects, so they have properties and methods that we can access using the dot notation (I.e.: Object.keys &  \tn 
% Row Count 36 (+ 8)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{JavaScript is a Dynamic Typing language}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1710964550_dynamic-typing.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Primitive variable types}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{5.377cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/raposinha_1710775527_primitive-variable-types.PNG}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{To check a primitive variable type {\bf{typeof}} is used: \newline typeof n !== 'number'}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.54287 cm} x{3.43413 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Control flow}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{- If ... Else} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
- Switch ... Case & switch(case) \{ \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
 & case 'guest': \tn 
% Row Count 4 (+ 1)
% Row 3
\SetRowColor{white}
 & console.log('Guest'); \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
 & break; \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
 & case 'moderator': \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
 & \seqsplit{console.log('Moderator');} \tn 
% Row Count 8 (+ 1)
% Row 7
\SetRowColor{white}
 & default: \tn 
% Row Count 9 (+ 1)
% Row 8
\SetRowColor{LightBackground}
 & console.log('Unknown'); \tn 
% Row Count 10 (+ 1)
% Row 9
\SetRowColor{white}
 & \} \tn 
% Row Count 11 (+ 1)
% Row 10
\SetRowColor{LightBackground}
 & Note 1: If break is not added, the condition doesn't skip and case doesn't work, it just executes the next statement within the first case read. \tn 
% Row Count 17 (+ 6)
% Row 11
\SetRowColor{white}
 & Note 2: An expression is any valid unit of code that resolves to a VALUE. Case is an expression, whether it is 2, 'a', or true. When case matches the variables, wether with a given variable or a set expression like 'true', code will execute, check the condition and if matching, execute and break. \tn 
% Row Count 28 (+ 11)
% Row 12
\SetRowColor{LightBackground}
- For ... & 'for' includes 3 statements: Initial expression, where a variable is initialized, it's usually set like 'i', short for Index. Condition, where we usually  compare the value of the Index to something else; the loop will continue unless this condition is false. If we want the loop to go on 5 times, we make it likeso: 1 \textless{} 5 and add the next expression. IncrementExpression will be next, so for each time the statements under for are executed it will sum one to the initial expression , check for the condition, and when i is no longer less than 5 it will stop. \tn 
% Row Count 49 (+ 21)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{1.54287 cm} x{3.43413 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Control flow (cont)}}  \tn
% Row 13
\SetRowColor{LightBackground}
 & for (let i = 0; i \textless{} 5; i++;) \tn 
% Row Count 2 (+ 2)
% Row 14
\SetRowColor{white}
 & for (let i = 5; i \textgreater{}= 1; i-{}-;) \tn 
% Row Count 4 (+ 2)
% Row 15
\SetRowColor{LightBackground}
- While ... & while(condition)\{statement\} \tn 
% Row Count 5 (+ 1)
% Row 16
\SetRowColor{white}
- Do ... while & Do-whiles are always executed once even if the condition is not true. \tn 
% Row Count 8 (+ 3)
% Row 17
\SetRowColor{LightBackground}
 & do \{ sentence \} while ( condition ) \tn 
% Row Count 10 (+ 2)
% Row 18
\SetRowColor{white}
Infinite loops & You can create them accidentally, causing a system break. Check for them on the console \tn 
% Row Count 14 (+ 4)
% Row 19
\SetRowColor{LightBackground}
- For ... in & for( let key in person )\{\} \tn 
% Row Count 15 (+ 1)
% Row 20
\SetRowColor{white}
 & For each iteration the key variable will hold the name of one of the properties of the oobject. \tn 
% Row Count 19 (+ 4)
% Row 21
\SetRowColor{LightBackground}
 & To access object's values: person.name, person{[}"name"{]} or person{[}key{]} if we don't know the properties name beforehand and we need to calculate it at runtime. Here, 'key' inside the brackets is the throwaway name for the properties' value. 'key' on its own will print the property name (name, age...) \tn 
% Row Count 31 (+ 12)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{1.54287 cm} x{3.43413 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Control flow (cont)}}  \tn
% Row 22
\SetRowColor{LightBackground}
- For ... of & for (let color of colors) \tn 
% Row Count 1 (+ 1)
% Row 23
\SetRowColor{white}
 & In this type of loop, the property's value is selected instead of the whole object \tn 
% Row Count 5 (+ 4)
% Row 24
\SetRowColor{LightBackground}
 & Objects are not iterable, only Arrays and Maps. To force an Object into an array, use Object.keys(object) like For ... in or Object.entries(object) \tn 
% Row Count 11 (+ 6)
% Row 25
\SetRowColor{white}
Break and continue & They can be used in any kind of loop.  'break;'  interrupts the code, 'continue' jumps to the beginning of the loop on its breakpoint and the next execution happens. \tn 
% Row Count 18 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Functions}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{// Functions \newline  \newline // Performing a task: \newline function greet (name, lastName)\{ \newline     console.log('Hello ' + name + ' ' + lastName + '!!!') \newline \} \newline  \newline greet("Juana"); \newline let lastName = "la Loca" \newline greet("Juana",lastName); \newline  \newline // Calculating a value: \newline  \newline function square (Number) \{ \newline     return Number * Number; \newline \} \newline  \newline let n = square(2); \newline  \newline console.log(n); \newline //4 \newline  \newline console.log(4/2);} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Basic concepts}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Variables}} & Variables are data stored somewhere in memory temporarly. When adressed, the variable adress will be accesed by the variable's name. Like a box. The name will describe its content, the contents will be stored in the box. \tn 
% Row Count 11 (+ 11)
% Row 1
\SetRowColor{white}
\seqsplit{Declaring/initializing} variables (as of ES6) & {\bf{let}} name = 'raposa'; \tn 
% Row Count 14 (+ 3)
% Row 2
\SetRowColor{LightBackground}
 & Variables cannot be reserved keywords. They should be concise and meaningful, meaning they give us a clue of the contents. They cannot start with a number. They can't contain spaces or hyphens. Camel notation should be used (firstName)). They're case sensitive. They can be declared in the same line (let name, firstName, lastName;) \tn 
% Row Count 31 (+ 17)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Basic concepts (cont)}}  \tn
% Row 3
\SetRowColor{LightBackground}
Constant variables & They are used when we don't want the values to ever change. If you don't want to redefine constant should be the default. \tn 
% Row Count 7 (+ 7)
% Row 4
\SetRowColor{white}
{\bf{Types}} & There are primitive and reference types. \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{LightBackground}
Primitive types: & String, number, boolean, undefined, null \tn 
% Row Count 11 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Objects}}  \tn
% Row 0
\SetRowColor{LightBackground}
Declaring an object & `const = circle \{ \{\{nl\}\} radius:1, \{\{nl\}\} location : \{ \{\{nl\}\} x: 1, \{\{nl\}\} y : 1 \{\{nl\}\} \} \{\{nl\}\} draw: function()\{ console.log('draw'\} \{\{nl\}\} \}` \tn 
% Row Count 8 (+ 8)
% Row 1
\SetRowColor{white}
Factory functions & Functions that create objects in order to not repeat code everytime you need a new one \tn 
% Row Count 13 (+ 5)
% Row 2
\SetRowColor{LightBackground}
 & `function createCircle(radius, x, y)\{  \{\{nl\}\}return \{\{\{nl\}\}         radius: radius,\{\{nl\}\}         location: \{\{\{nl\}\}             x: x,\{\{nl\}\}             y: y\{\{nl\}\}         \},\{\{nl\}\}         draw() \{\{\{nl\}\} console.log('draw')\{\{nl\}\} \}     \{\{nl\}\}\};\{\{nl\}\} \}\{\{nl\}\}` \tn 
% Row Count 26 (+ 13)
% Row 3
\SetRowColor{white}
Constructor functions & Written in Pascal Notation. These are also functions to generate objects. \tn 
% Row Count 30 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Objects (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
 & function Object() \{\} is an example of a Constructor function. Whenever we create an object using the Object literal syntax,  a call is made into that objectconstructor function \tn 
% Row Count 9 (+ 9)
% Row 5
\SetRowColor{white}
 & The keyword 'this' is used instead of return, it's a reference to the object executing this code. \tn 
% Row Count 14 (+ 5)
% Row 6
\SetRowColor{LightBackground}
 & When using the 'new' operator a new empty object is created, then the properties used with 'this' are set dinamically, then the object is returned. \tn 
% Row Count 22 (+ 8)
% Row 7
\SetRowColor{white}
 & function Address (street, city, zipcode) \{     this.street = street;     this.city = city;     this.zipcode = zipcode;          this.showAddress = function showAddress() \{         for (let key in Address)\{             console.log(key, Address{[}key{]})         \}     \} \} \tn 
% Row Count 36 (+ 14)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Objects (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
Dynamic & Objects in JavaScript are dynamic, which means that once created you can always add new properties or methods, or remove existing ones. \tn 
% Row Count 7 (+ 7)
% Row 9
\SetRowColor{white}
Functions are objects, they have constructors & Circle.constructor -\textgreater{} f \tn 
% Row Count 10 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Circle{\bf{.call}}(\{\},1) and const circle7 = new Circle(1) are the same, {\bf{.call}} is a function prebuilt metjod. `\{\}` stands for the first argument, an empty object - then `this` will reference the new empty object instead of the base object, window. The rest of the arguments will be passed explicitly (like -\textgreater{} this.radius = radius; Circle(radius);circle7(\{\},5). Which is to mean that if the 'new' keyword isn't used, 'this' will point to window object.} \tn 
% Row Count 20 (+ 10)
% Row 11
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{The {\bf{apply}} method can also be used the same as ''call'', but the explicit argument are parsed through an array, like Circle.apply(\{\}, {[}1,2{]})} \tn 
% Row Count 23 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{In JavaScript, `radius: radius,` and  'radius,` is the same when defining an object.  \newline camelCaseNotation, PascalNotation}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.74655 cm} x{4.23045 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Objects}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Cloning} & for (let key in circle)      another1{[}key{]} = circle{[}key{]} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
 & Object.assign(another2, circle) \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
 & const another3 = Object.assign(\{     color: 'yellow' \}, circle) \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
 & const another4 = \{...circle\} \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Garbage collection}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{In low level languages when creating an object we have to allocate memory for it then deallocate it, not with JS. This is where the Garbage Collector comes in. It finds the variables and constants that are not used and deallocate the memory} \tn 
% Row Count 5 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Math Object}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{It's a built-in Object.} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{The Math namespace object contains static properties and methods for mathematical constants and functions.} \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{It's designed for mathematical calculations and so are its Properties and Functions (Math.PI, Math.floor(), ...)} \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{Math.random(), Math.round(), Math.max(1,2,3), Math.min(1,2,3) (...)} \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Math}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{String Objects}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{String is a primitive type, primitive types don't have properties and methods, only objects. But a String Object also exists for JavaScript.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{const message = new String('hi');} \tn 
% Row Count 4 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{It's typeof will be 'object'} \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{However, the internal JavaScript engine will automatically convert a String primitive type onto a String Object if we use the dot notation} \tn 
% Row Count 8 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{String.length, String{[}3{]}, String.includes('my'), String.startsWith('a'), String.indexOf('my')} \tn 
% Row Count 10 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/String}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.4931 cm} x{3.4839 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Strings}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\textbackslash{}n adds a new line within a String} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Template literals & With these, ``, the text formats prints as it's written \tn 
% Row Count 3 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.74195 cm} x{3.23505 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Date Object (Built-in)}}  \tn
% Row 0
\SetRowColor{LightBackground}
const now = new Date() & Creates the current date and time when object is created \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{Has get, set methods} \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Date} -\textgreater{} to check formats, methods}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}