\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{teog29}
\pdfinfo{
  /Title (fundamental-js.pdf)
  /Creator (Cheatography)
  /Author (teog29)
  /Subject (Fundamental JS 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}{9A62A3}
\definecolor{LightBackground}{HTML}{F8F5F9}
\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{Fundamental JS Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{teog29} via \textcolor{DarkBackground}{\uline{cheatography.com/201249/cs/42582/}}}
\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}teog29 \\
  \uline{cheatography.com/teog29} \\
  \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 2nd March, 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}{x{1.54287 cm} x{3.43413 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Null vs Undefined}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{null}} & has no value, on purpose \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\bf{undefined}} & declared, but not defined (is not assign a vaalue) \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{null type}} & object \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
{\bf{undefined type}} & undefiend (it s a data type itself) \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Most languages have data type for variables. JS also has, but at the time of declaration, there is no type decided. \newline {\bf{loose equality(==)}} - performs type conversion (converts the operands to the same type before making the comparison) ('5' == 5) \newline {\bf{strict equality(===)}} - compares the value and also checks the data type}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.89126 cm} x{3.08574 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Function vs Block Scope}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{function scope (ES5)}} & hoisting - {\bf{var}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{block scope (ES6)}} & creates separate scope - {\bf{let + const}} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{local scope}} & limited to a function \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
{\bf{global scope}} & accessible for all functions \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{{\bf{HOISITNG}} - A process which is happening behind the scene, internally it is bringing the declarations on top (not the assignment) \newline {\bf{const}} - cannot be reassigned \newline {\bf{let + const}} - cannot be redeclarable, {\bf{var}} can be \newline The concept of {\bf{"block scope"}} refers to the visibility domain of variables declared within such a code block. In JS, a variable declared within a code block is {\bf{ visible  only within that block}}  and not outside of it.}  \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}{ASI (Automatic Semicolon Insertion)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{It's a good practice to have a ; (semicolon) at the end of a line, but it is {\bf{optional}} because JS compiler inserts a semicolon} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{"use strict" doesn't change the behaviours, it doesn't force you to put a semicolon on all lines} \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{The purpose of "use strict" in JavaScript is to enable a stricter set of rules for code execution, helping to catch common coding errors and promoting safer and more maintainable cod} \tn 
% Row Count 9 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{function rest() \{ return ;- undefined because js compiler adds a semicolon \newline \{ a : 5 \newline \}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.46464 cm} x{2.65466 cm} p{0.4577 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{5.377cm}}{\bf\textcolor{white}{Rest \& Spread operator (ES6)}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Rest operator}} & is used in function parameters to deal with an arbitrary number of arguments &  \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
{\bf{Spread operator}} & spreads elements of {\bf{an array}} or {\bf{object}} into individual elements &  \tn 
% Row Count 8 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{function restex(...elems)\{ console.log(elems)\} \newline let max = Math.max(...arr)}  \tn 
\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}{Infinity \& -Infinity}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{{\bf{Number.NEGATIVE\_INFINITY}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{{\bf{Number.POSITIVE\_INFINITY}}} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
{\bf{isFinite()}} & to check finite or infinite value. \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{You got -Infinity or Infinity when a numeric value exceeds the range of 64-bit format.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.29402 cm} x{3.68298 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{NaN (Not a Number)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{You get this error when there is a {\bf{non-numeric value or operation}} performed} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{isNaN()}} & is going to check whether the value is a number or not \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{isFinite()}} & checks for NaN as well as for Infinite values \tn 
% Row Count 6 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{console.log(NaN === NaN) - {\bf{false}} - strict equality or non-equality, it is not going to match with NaN because there is always a unique value for NaN.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.24425 cm} x{3.73275 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Arrow functions}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{this}} & object does not work with arrow function \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{arguments}} & object does not work with arrow function (we can use spread operator ...arg) \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{\bf{new}} & cannot use it to call arrow function \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{{\bf{Arrow functions}} offer a concise syntax for writing anonymous functions, leading to shorter and more readable code. \newline if you have one parameter you can avoid writing paranthesis \newline {\bf{IIFE}} – It is a function which gets called automatically (function())()}  \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}{Currying}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{sum(5)(6)}} - sum is calling the parent function, and the second parentheses calls the inner function} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Unique way to call {\bf{inner functions}} where you can pass arguments partially or pass multiple arguments in a function but 1 arument at a time} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Solves various purposes like passing partial parameters or avoiding unwanted repetitions (functional programming technique)} \tn 
% Row Count 9 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Closure}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{CLOSURE is useful when you want to make private members available globally when needed.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{When a function comes under another function a {\bf{"closure"}} is created. Closure pattern remembers outer variable \& also helps to access outer scope members} \tn 
% Row Count 6 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{function outer() \{ \newline       {\bf{function inner() }}\{ \newline           console.log("inner called..") \}\}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.18988 cm} x{2.78712 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Iterables \& Iterators (ES6)}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Symbol.iterator }} & convert an object literal into an interable object \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
{\bf{Arrays, Strings, Maps, Sets}} & iterable \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{next() method}} & itr obj will automatically have this method \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{New mechanism to iterate or traverse through data structures. \newline console.log(itr.next()) = \{value: 4, status: false\}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.24425 cm} x{3.73275 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Generators}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{function}}* & define a generator function \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{yeld}} & pauses the generator + receive input \& send outpur \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{yeld}}* & recursive function \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
{\bf{next()}} & returns an obj with 2 keys (value + next status - boolean) \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
{\bf{return()}} & terminates generator execution \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{white}
{\bf{throw()}} & triggers custom exception. \tn 
% Row Count 11 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Generators help you to pause \& resume the code. Normally when you write a function, it returns a single value -\textgreater{} generators are kind of function which returns multiple values in phases \newline {\bf{next()}} - it moves the function pointer to the next line from last suspended yield.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.83689 cm} x{2.14011 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Errors}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{try ... catch()}} & err.name / err.message \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{finally()}} & code is executed at the end \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
{\bf{throw new (Error, TypeError, SyntaxError)}} & generate your own custom error \tn 
% Row Count 7 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{When the program faces errors, even after validation, it should handle it \& notify the user with proper error details.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}