\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 30th July, 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)
\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}
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 12 (+ 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{1.69218 cm} x{3.28482 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 6 (+ 6)
% 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 10 (+ 4)
% 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 20 (+ 10)
% Row 3
\SetRowColor{white}
Constructor functions & Written in Pascal Notation. These are also functions to generate objects. \tn 
% Row Count 23 (+ 3)
% Row 4
\SetRowColor{LightBackground}
 & The keyword 'this' is used instead of return, it's a reference to the object executing this code. \tn 
% Row Count 27 (+ 4)
% Row 5
\SetRowColor{white}
 & 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 33 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{1.69218 cm} x{3.28482 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Objects (cont)}}  \tn
% Row 6
\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 6 (+ 6)
\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}


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

\end{document}