\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{Techelopment (techelopment)}
\pdfinfo{
  /Title (javascript-advanced.pdf)
  /Creator (Cheatography)
  /Author (Techelopment (techelopment))
  /Subject (JavaScript Advanced Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{JavaScript Advanced Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Techelopment (techelopment)} via \textcolor{DarkBackground}{\uline{cheatography.com/212073/cs/46105/}}}
\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}Techelopment (techelopment) \\
  \uline{cheatography.com/techelopment} \\
        \uline{\seqsplit{www}.techelopment.it/}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 13th April, 2025.\\
   Updated 13th April, 2025.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Promise}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{function getData() \{ \newline   return new Promise((resolve, reject) =\textgreater{} \{ \newline     setTimeout(() =\textgreater{} \{ \newline       resolve("Obtained data"); \newline     \}, 1000); \newline   \}); \newline \} \newline  \newline getData() \newline   .then(data =\textgreater{} console.log(data)) // Output: Obtained data (after 1 second) \newline   .catch(error =\textgreater{} console.error(error));} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Objects that represent the future result of an asynchronous operation.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{module}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{// file: module.js \newline export function greet(name) \{ \newline      console.log(`Hello, \$\{name\}!`); \newline \} \newline  \newline // file: main.js \newline import \{ greet \} from './module.js'; \newline greet('Bob'); // Output: Hello, Bob!} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{import and export to share code between files. \newline They allow you to organize your code in a modular and reusable way.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{SessionStorage}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{//SAVING \newline const sessionToken = 'abcdef12345'; \newline sessionStorage.setItem('sessionToken', sessionToken); \newline console.log('Session token saved to sessionStorage.'); \newline  \newline //RETRIEVING \newline const storedToken = \seqsplit{sessionStorage.getItem('sessionToken');} \newline if (storedToken) \{ \newline   console.log('Session token retrieved from sessionStorage:', storedToken); \newline \} else \{ \newline   console.log('No session token found.'); \newline \} \newline  \newline  \newline //SAVING and RETRIEVING a temporary object \newline const currentOrderStatus = \{ \newline   orderId: 123, \newline   status: 'pending' \newline \}; \newline sessionStorage.setItem('orderStatus', \seqsplit{JSON.stringify(currentOrderStatus));} \newline console.log('Order status saved to sessionStorage.'); \newline  \newline const storedOrderStatus = \seqsplit{sessionStorage.getItem('orderStatus');} \newline if (storedOrderStatus) \{ \newline   const parsedStatus = \seqsplit{JSON.parse(storedOrderStatus);} \newline   console.log('Order status retrieved from sessionStorage:', parsedStatus); \newline   console.log('Current status:', parsedStatus.status); \newline \} \newline  \newline  \newline //Removing a specific session item \newline sessionStorage.removeItem('sessionToken'); \newline console.log('Session token removed from sessionStorage.'); \newline  \newline  \newline //Clearing all session items \newline sessionStorage.clear(); \newline console.log('All items cleared from sessionStorage.');} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{1. Allows you to store data in the browser. \newline 2. Data persists only for the current browser session. \newline 3. Exists only within the current browser tab. \newline 4. The data is stored as key-value pairs, and both the key and the value must be strings.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{async/await}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{async function getDataAsync() \{ \newline   try \{ \newline     const data = await getData(); //getData() is a Promise \newline     console.log(data); // Output: Obtained data (after 1 second) \newline   \} catch (error) \{ \newline     console.error(error); \newline   \} \newline \} \newline  \newline getDataAsync();} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{More readable syntax for working with Promises. \newline async indicates that a function returns a Promise. \newline await suspends execution until a Promise is completed.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{LocalStorage}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{const username = "JohnDoe"; \newline localStorage.setItem('username', username); \newline console.log('Username saved to localStorage.'); \newline  \newline const storedUsername = \seqsplit{localStorage.getItem('username');} \newline if (storedUsername) \{ \newline   console.log('Username retrieved from localStorage: ', storedUsername); \newline \} else \{ \newline   console.log('No username found in localStorage.'); \newline \} \newline  \newline  \newline //SAVING OBJECT requires stringify \newline const userSettings = \{ \newline   theme: 'dark', \newline   fontSize: '16px', \newline   notificationsEnabled: true \newline \}; \newline localStorage.setItem('userSettings', \seqsplit{JSON.stringify(userSettings));} \newline console.log('User settings saved to localStorage.'); \newline  \newline  \newline //RETRIEVING OBJECT needs to be parsed \newline const storedSettings = \seqsplit{localStorage.getItem('userSettings');} \newline if (storedSettings) \{ \newline   const parsedSettings = \seqsplit{JSON.parse(storedSettings);} \newline   console.log('User settings retrieved from localStorage: ', parsedSettings); \newline   console.log('Current theme: ', parsedSettings.theme); \newline \} else \{ \newline   console.log('No user settings found in localStorage.'); \newline \} \newline  \newline  \newline //Removing a specific local item \newline localStorage.removeItem('username'); \newline console.log('User after removal:', \seqsplit{localStorage.getItem('theme'));} // Output: User after removal: null \newline  \newline  \newline //Clearing all local items \newline localStorage.clear(); \newline console.log('Items in localStorage after clear:', localStorage); // Output: Storage \{length: 0\}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Allows you to store data in the browser. \newline Data persists even after closing the browser. \newline Shared between all windows (or tabs) with the same origin \newline The data is stored as key-value pairs, and both the key and the value must be strings.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}