\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{xenaxon}
\pdfinfo{
  /Title (master-javascript.pdf)
  /Creator (Cheatography)
  /Author (xenaxon)
  /Subject (Master Javascript 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}{FF0000}
\definecolor{LightBackground}{HTML}{FFEFEF}
\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{Master Javascript Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{xenaxon} via \textcolor{DarkBackground}{\uline{cheatography.com/196679/cs/41372/}}}
\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}xenaxon \\
  \uline{cheatography.com/xenaxon} \\
  \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 3rd June, 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*}{2}

\begin{tabularx}{8.4cm}{x{1.44 cm} x{6.56 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Data Types}}  \tn
% Row 0
\SetRowColor{LightBackground}
String & a series of characters \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Number & any numeric value up to 16 in length (check \seqsplit{Number.MAX\_SAFE\_INTEGER)} \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{Boolean} & either true or false \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
Object & data structure of key-value pairs or class instances. Arrays are also objects in JS \tn 
% Row Count 8 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{Undefined} & variable value not defined, type not defined \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
Null & used mainly for objects for referring absence of any object value and if any function or variable returns null, then we can infer that the object could not be created \tn 
% Row Count 16 (+ 6)
% Row 6
\SetRowColor{LightBackground}
Symbol & a data type that is a unique value. usage: Symbol() or Symbol(label) or Symbol.for(label). Youtube Explained: 4J5hnOCj69w \tn 
% Row Count 20 (+ 4)
% Row 7
\SetRowColor{white}
Bigint & used to store big integer values that are too big to be represented by Number type \tn 
% Row Count 23 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.4 cm} x{5.6 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Variables}}  \tn
% Row 0
\SetRowColor{LightBackground}
var & - global scoped or function scoped\{\{nl\}\}- it is hoisted\{\{nl\}\}-can be used without being declared\{\{nl\}\}-it also binds to 'this' \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
var redeclaring & Because var is function scoped and not Block scoped, redeclaring a variable inside a block will also redeclare the variable outside the block \tn 
% Row Count 11 (+ 6)
% Row 2
\SetRowColor{LightBackground}
let & - block scoped variable\{\{nl\}\} \tn 
% Row Count 13 (+ 2)
% Row 3
\SetRowColor{white}
const & - block scoped variable\{\{nl\}\}-cannot be reassigned. \{\{nl\}\}-must be assigned a value\{\{nl\}\}- const doesnt mean it's a constant value. It is a constant REFERENCE to a value.\{\{nl\}\}-you can't reassign it a different value/object/array, but you can change it's object or array elements and properties\{\{nl\}\}Other than that, it behaves same as let \tn 
% Row Count 26 (+ 13)
% Row 4
\SetRowColor{LightBackground}
let and const & let and const have block scope.\{\{nl\}\} let and const can not be redeclared.\{\{nl\}\} let and const must be declared before use.\{\{nl\}\} let and const does not bind to this.\{\{nl\}\} let and const are not hoisted.\{\{nl\}\} \tn 
% Row Count 34 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.4 cm} x{5.6 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Variables (cont)}}  \tn
% Row 5
\SetRowColor{LightBackground}
var VS let & - Variables declared by let are only available inside the block where they're defined.\{\{nl\}\}- Variables declared by var are available throughout the function in which they're declared.\{\{nl\}\}- Variables declared with var can be redeclared, ones with let canoot. they will give an error \tn 
% Row Count 11 (+ 11)
% Row 6
\SetRowColor{white}
global VS local & Global and local variables with the same name are different variables. Modifying one, does not modify the other. \tn 
% Row Count 15 (+ 4)
% Row 7
\SetRowColor{LightBackground}
Variable Lifetime & - While identifier is reachable, it will not be deleted from memory.\{\{nl\}\}- Global variables live until the page is discarded / tab closed / page changed / etc \{\{nl\}\}- Local variables are deleted when the function is completed\{\{nl\}\}- In CLOSURES, as long as the variable is still accessible, it will not be removed. \tn 
% Row Count 27 (+ 12)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Functions}}  \tn
% Row 0
\SetRowColor{LightBackground}
Function Declaration & function funcA (parameters) \{ statements; return value)\{\{nl\}\}If it starts with function keyword, it's a function declaration \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
Function Expression & const funcA = function (parameters) \{ statements; return value)\{\{nl\}\}If name of function is omitted, then it's a function expression \tn 
% Row Count 14 (+ 7)
% Row 2
\SetRowColor{LightBackground}
Anonymous Function & (function () \{ ... \}); \{\{nl\}\}An anonymous function is a function without a name. So the function inside a function expression is also an anonymous function \tn 
% Row Count 22 (+ 8)
% Row 3
\SetRowColor{white}
Arrow Function & const arrowFunc = (params) =\textgreater{} statement \{\{nl\}\}It is a Shorthand for function expression.\{\{nl\}\}- Single Line arrow Functions can ommit return statement and just return the result of the statement directly! \tn 
% Row Count 33 (+ 11)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Functions (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
Arrow Function (with multiple statements body) & const arrowFunc = (params) =\textgreater{} \{statement; return value\} \{\{nl\}\} - If the anonymous function has multiple statements, it needs to be surrounded by \{\} and must contain a return statement in order to return a value \tn 
% Row Count 11 (+ 11)
% Row 5
\SetRowColor{white}
Self Invoking Function & (function(params)\{\{\{nl\}\}body\{\{nl\}\}\})() \tn 
% Row Count 13 (+ 2)
% Row 6
\SetRowColor{LightBackground}
Closure & const add = (function () \{\{\{nl\}\}   let counter = 0;\{\{nl\}\}   return function () \{\{\{nl\}\}counter += 1; \{\{nl\}\}return counter\}\{\{nl\}\}\})();\{\{nl\}\}- It makes it possible for a function to have "private" variables. The counter is protected by the scope of the anonymous function, and can only be changed using the add function. \tn 
% Row Count 29 (+ 16)
% Row 7
\SetRowColor{white}
() Operator & The () Operator invokes (calls) a function. The function parameters are passed between the round braces.\{\{nl\}\}Example myFunc() or myFunc(param1, param2, etc...) \tn 
% Row Count 37 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Functions (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
let myVar = myFunc vs myVar = myFunc() & myFunc reffers to the function Object\{\{nl\}\}myFunc() reffers to the function result after invoking it \tn 
% Row Count 5 (+ 5)
% Row 9
\SetRowColor{white}
let totalFields = function (rows=10, columns=2) \{ return rows*columns \} & If we invoke totalFields, without parameters we will get back 20, because default values will be used \tn 
% Row Count 11 (+ 6)
% Row 10
\SetRowColor{LightBackground}
Function 'arguments' variable & Every function has a built in variable arguments that will contain an array of all the parameters passed upon invocation.\{\{nl\}\}- This can be used inside the function to create custom logic for parameters missing or of different value than expected, or can be used to permit the function to receive an unknown number of parameters.\{\{nl\}\} - \$arguments can be iterated like a normal array\{\{nl\}\}- If arguments are not passed, then the arguments array will be empty \tn 
% Row Count 34 (+ 23)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Functions (cont)}}  \tn
% Row 11
\SetRowColor{LightBackground}
Function combined output func(a)(b) & fun(a)(b) will return a combined output by using both the parameter in the parent function and the parameter in the child function. \tn 
% Row Count 7 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Native Array Methods}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Array Creation Methods}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Array.from() & Creates a new array instance from an array-like or iterable object. \tn 
% Row Count 5 (+ 4)
% Row 2
\SetRowColor{LightBackground}
Array.isArray() & Returns true if the argument is an array. \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
Array.of() & Creates a new array instance with a variable number of arguments, regardless of number or type of the arguments. \tn 
% Row Count 13 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Array Mutator Methods}}} \tn 
% Row Count 14 (+ 1)
% Row 5
\SetRowColor{white}
\seqsplit{Array.prototype.copyWithin()} & Copies part of an array to another location in the same array. \tn 
% Row Count 17 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.fill()} & Fills all the elements of an array from a start index to an end index with a static value. \tn 
% Row Count 22 (+ 5)
% Row 7
\SetRowColor{white}
\seqsplit{Array.prototype.pop()} & Removes the last element from an array and returns that element. \tn 
% Row Count 25 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.push()} & Adds one or more elements to the end of an array and returns the new length of the array. \tn 
% Row Count 30 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Native Array Methods (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.reverse()} & Reverses the order of the elements of an array in place. \tn 
% Row Count 3 (+ 3)
% Row 10
\SetRowColor{white}
\seqsplit{Array.prototype.shift()} & Removes the first element from an array and returns that element. \tn 
% Row Count 6 (+ 3)
% Row 11
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.sort()} & Sorts the elements of an array in place and returns the array. \tn 
% Row Count 9 (+ 3)
% Row 12
\SetRowColor{white}
\seqsplit{Array.prototype.splice()} & Adds and/or removes elements from an array. \tn 
% Row Count 11 (+ 2)
% Row 13
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.unshift()} & Adds one or more elements to the beginning of an array and returns the new length of the array. \tn 
% Row Count 16 (+ 5)
% Row 14
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Accessor Methods}}} \tn 
% Row Count 17 (+ 1)
% Row 15
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.concat()} & Merges two or more arrays. \tn 
% Row Count 19 (+ 2)
% Row 16
\SetRowColor{white}
\seqsplit{Array.prototype.includes()} & Determines whether an array includes a certain value among its entries. \tn 
% Row Count 23 (+ 4)
% Row 17
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.indexOf()} & Returns the first index at which a given element can be found in the array. \tn 
% Row Count 27 (+ 4)
% Row 18
\SetRowColor{white}
\seqsplit{Array.prototype.join()} & Joins all elements of an array into a string. \tn 
% Row Count 30 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Native Array Methods (cont)}}  \tn
% Row 19
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.lastIndexOf()} & Returns the last index at which a given element can be found in the array. \tn 
% Row Count 4 (+ 4)
% Row 20
\SetRowColor{white}
\seqsplit{Array.prototype.slice()} & Returns a shallow copy of a portion of an array into a new array object. \tn 
% Row Count 8 (+ 4)
% Row 21
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.toString()} & Returns a string representing the array and its elements. \tn 
% Row Count 11 (+ 3)
% Row 22
\SetRowColor{white}
\seqsplit{Array.prototype.toLocaleString()} & Returns a localized string representing the array and its elements. \tn 
% Row Count 15 (+ 4)
% Row 23
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{{\bf{Iteration Methods}}} \tn 
% Row Count 16 (+ 1)
% Row 24
\SetRowColor{white}
\seqsplit{Array.prototype.entries()} & Returns a new array iterator object that contains the key/value pairs for each index in the array. \tn 
% Row Count 21 (+ 5)
% Row 25
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.every()} & Tests whether all elements in the array pass the test implemented by the provided function. \tn 
% Row Count 26 (+ 5)
% Row 26
\SetRowColor{white}
\seqsplit{Array.prototype.filter()} & Creates a new array with all elements that pass the test implemented by the provided function. \tn 
% Row Count 31 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Native Array Methods (cont)}}  \tn
% Row 27
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.find()} & Returns the value of the first element in the array that satisfies the provided testing function. \tn 
% Row Count 5 (+ 5)
% Row 28
\SetRowColor{white}
\seqsplit{Array.prototype.findIndex()} & Returns the index of the first element in the array that satisfies the provided testing function. \tn 
% Row Count 10 (+ 5)
% Row 29
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.forEach()} & Executes a provided function once for each array element. \tn 
% Row Count 13 (+ 3)
% Row 30
\SetRowColor{white}
\seqsplit{Array.prototype.keys()} & Returns a new array iterator that contains the keys for each index in the array. \tn 
% Row Count 17 (+ 4)
% Row 31
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.map()} & Creates a new array with the results of calling a provided function on every element in the calling array. \tn 
% Row Count 22 (+ 5)
% Row 32
\SetRowColor{white}
\seqsplit{Array.prototype.reduce()} & Executes a reducer function on each element of the array, resulting in a single output value. \tn 
% Row Count 27 (+ 5)
% Row 33
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.reduceRight()} & Executes a reducer function on each element of the array, from right to left, resulting in a single output value. \tn 
% Row Count 33 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Native Array Methods (cont)}}  \tn
% Row 34
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.some()} & Tests whether at least one element in the array passes the test implemented by the provided function. \tn 
% Row Count 5 (+ 5)
% Row 35
\SetRowColor{white}
\seqsplit{Array.prototype.values()} & Returns a new array iterator object that contains the values for each index in the array. \tn 
% Row Count 10 (+ 5)
% Row 36
\SetRowColor{LightBackground}
\seqsplit{Array.prototype.flat()} & Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. \tn 
% Row Count 15 (+ 5)
% Row 37
\SetRowColor{white}
\seqsplit{Array.prototype.flatMap()} & Maps each element using a mapping function, then flattens the result into a new array. \tn 
% Row Count 19 (+ 4)
% Row 38
\SetRowColor{LightBackground}
Array.prototype{[}@@iterator{]}() & Returns the default iterator for an array, which is the same as the `values()` method. \tn 
% Row Count 23 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.72 cm} x{5.28 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Arithmetic \& Assignment Operators}}  \tn
% Row 0
\SetRowColor{LightBackground}
+ & Addition \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
x + y (numbers) & Adds x and y together and returns the sum\{\{nl\}\} x and y are called Operands and + is called Operator \tn 
% Row Count 5 (+ 4)
% Row 2
\SetRowColor{LightBackground}
x + y (strings) & Concatenation Operator (joins two strings into one) \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
x+y (string + number) & Using the + operator with strings and numbers at same time will result in string concatenation. \{\{nl\}\} Example: "Hello"+5 = "Hello5"\{\{nl\}-In an operation, if multiple number operands preceed a string, the numbers will be added together until the js interpreter reaches the string, then it concatenates the sum with the string.\{\{nl\}\}Example: 16 + 4 + "Volvo" = "20Volvo" \tn 
% Row Count 22 (+ 15)
% Row 4
\SetRowColor{LightBackground}
- & Subtraction \tn 
% Row Count 23 (+ 1)
% Row 5
\SetRowColor{white}
* & Multiplication \tn 
% Row Count 24 (+ 1)
% Row 6
\SetRowColor{LightBackground}
** & Exponentiation (raise to power) Ex: 2**4 \tn 
% Row Count 26 (+ 2)
% Row 7
\SetRowColor{white}
/ & Division \tn 
% Row Count 27 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\% & Modulus (division remainder) ex: 10\%4=2 (10/4=2.5, (0.5*4 is remainder) so whatever is not a full number is added, and the sum is what is called "remainder") \tn 
% Row Count 34 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.72 cm} x{5.28 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Arithmetic \& Assignment Operators (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
++ & Increment\{\{nl\}\} ++x will add 1 and return x\{\{nl\}\}x++ will return x and then add 1 to it\{\{nl\}\} Example: let x = 0; let count = x++ will set count to 0 and x to 1. \tn 
% Row Count 7 (+ 7)
% Row 10
\SetRowColor{white}
-{}- & Decrement\{\{nl\}\} - same behavior as ++x and x++ subtracts instead. \tn 
% Row Count 10 (+ 3)
% Row 11
\SetRowColor{LightBackground}
= & Assignment Operator \tn 
% Row Count 11 (+ 1)
% Row 12
\SetRowColor{white}
x+=y & Shorthand for: x = x + y (same for all other operators) \tn 
% Row Count 14 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} x{7.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Comparison Operators}}  \tn
% Row 0
\SetRowColor{LightBackground}
== & equal to \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
=== & equal value and equal type \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
!= & not equal \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
!== & not equal value or not equal type \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\textgreater{} & greater than \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\textless{} & less than \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\textgreater{}= & greater than or equal to \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\textless{}= & less than or equal to \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
? & ternary operator \tn 
% Row Count 9 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} x{7.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Logical Operators}}  \tn
% Row 0
\SetRowColor{LightBackground}
\&\& & logical and \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
|| & logical or \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
! & logical not \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
TODO & ADD LOGICAL ASSIGNMENT OPERATORS\{\{nl\}\}https://www.w3schools.com/js/js\_assignment.asp \tn 
% Row Count 6 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The Logical Operators are used in logical statements to test multiple conditions alternatively, simultaneously or to negate a condition. \newline Example:  \newline if ( 1\textless{}5 \&\& 6\textless{}10 ) console.log(true) \newline if ( !(6\textless{}5) ) console.log(true) \newline  \newline Negation operator must be used in combination with round braces over the expression which needs to be negated. Otherwise for example: ( !0\textless{}5 ) will test if 0 is not true. not if 0\textless{}5 is not true.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Bitwise Operators}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{TODO: I need to add this later}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.8 cm} x{5.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Objects}}  \tn
% Row 0
\SetRowColor{LightBackground}
Key Value Pairs & Objects are key: value pairs that can have:\{\{nl\}\} - any valid value as key\{\{nl\}\}- can contain any data type as value \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
Properties \& Methods & Objects can contain:\{\{nl\}\}-properties (variables,constants)\{\{nl\}\}-methods (local functions, stored in properties as well, as function definitions) \tn 
% Row Count 11 (+ 6)
% Row 2
\SetRowColor{LightBackground}
Classes (ES6) & - Classes where introduced in ECMAScript2015 (ES6)\{\{nl\}\} - Objects can be instances of a class \tn 
% Row Count 15 (+ 4)
% Row 3
\SetRowColor{white}
Arrays & In Javascript, arrays are not a primitive data type. Arrays are Objects as well with index based key:value pairs. \tn 
% Row Count 20 (+ 5)
% Row 4
\SetRowColor{LightBackground}
Associative Arrays & Objects can be used as Associative Arrays, by using key value pairs and accessing them using the objectName{[}"key"{]} syntax \tn 
% Row Count 25 (+ 5)
% Row 5
\SetRowColor{white}
Built-In Objects & Javascript has several Built-In Objects including: \{\{nl\}\}- Date\{\{nl\}\}-JSON\{\{nl\}\}-Math\{\{nl\}\}- and other (check: \seqsplit{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects)} \tn 
% Row Count 33 (+ 8)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.8 cm} x{5.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Objects (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
Object Property Access & Object Properties can be accessed in 2 ways:\{\{nl\}\}- objectName{[}"propertyName"{]}\{\{nl\}\}objectName.propertyName\{\{nl\}\}- objectName{[}"propertyName"{]} by this way we can access properties with STRING key names. as opposed to using "." (dot) with which we can only access properties with keys that have valid variable names. As said above, this way we can use objects as associative arrays and even more complex, multidimensional arrays or combinations of arrays/objects on multiple dimensions. \tn 
% Row Count 19 (+ 19)
% Row 7
\SetRowColor{white}
this & This is a keyword in javascript which refers to a specific object depending on the context in which it is used. More on this in the section dedicated to this. \tn 
% Row Count 26 (+ 7)
\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}{this}}  \tn
% Row 0
\SetRowColor{LightBackground}
this & In JavaScript, the this keyword refers to an object. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Inside Object Method & In an object method, this refers to the object. \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Inside Function & In a function, this refers to the global object. \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
In Function (Strict Mode) & In a function, in strict mode, this is undefined. \tn 
% Row Count 10 (+ 3)
% Row 4
\SetRowColor{LightBackground}
Inside Event Handler & In an event, this refers to the element that received the event. \tn 
% Row Count 13 (+ 3)
% Row 5
\SetRowColor{white}
Special Object Methods & Methods like call(), apply(), and bind() can refer this to any object.\{\{nl\}\}Example: \seqsplit{person1.fullName.call(person2);} will call fullName as if we did person2.fullName with the function definition in person1 \tn 
% Row Count 22 (+ 9)
% Row 6
\SetRowColor{LightBackground}
This Immutable & This is not a variable, it is a keyword that refers to an object. This cannot be changed or reassigned \tn 
% Row Count 27 (+ 5)
% Row 7
\SetRowColor{white}
Global this & When used alone, this refers to the global object.\{\{nl\}\}-In a browser window the global object is {[}object Window{]}: \tn 
% Row Count 32 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}