\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{Sadaf Niknam (sadaf.niknaam)}
\pdfinfo{
  /Title (javascript.pdf)
  /Creator (Cheatography)
  /Author (Sadaf Niknam (sadaf.niknaam))
  /Subject (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}{0FD99C}
\definecolor{LightBackground}{HTML}{F0FCF8}
\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 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Sadaf Niknam (sadaf.niknaam)} via \textcolor{DarkBackground}{\uline{cheatography.com/121020/cs/21997/}}}
\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}Sadaf Niknam (sadaf.niknaam) \\
  \uline{cheatography.com/sadaf-niknaam} \\
  \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 23rd March, 2020.\\
   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}{Object.is}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/sadaf-niknaam_1583859670_jxcqwbks1krz.png}}} \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}{Object.is}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/sadaf-niknaam_1583859763_3hu2uwmydmac.png}}} \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{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{ar\}\} \newline % Row Count 1 (+ 1)
زمانی که لازم است برای رسیدن پاسخی از سمت سرور صبر کند؛ عملیات ناهنگام است \newline % Row Count 4 (+ 3)
{\bf{Callback}} \newline % Row Count 5 (+ 1)
یکی از رایج‌ترین و قدیمی‌ترین راه‌های مدیریت عملیات ناهمگام استفاده از توابع کالبک هست \newline % Row Count 9 (+ 4)
وقتی عملیات نا‌همگام به پایان رسید، نتیجه‌ی این عملیات برای پردازش می‌تونه به یک تابع فرستاده بشه که به این تابع میگن کالبک.% Row Count 14 (+ 5)
} \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}{Callback}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{خب اینجا یکم کار سخت میشه. چون وقتی یک یا چند تابع {\bf{کالبک}} درون هم دیگه قرار می‌گیرن، علاوه بر اینکه ساختار کدهای ما زشت میشن، کدها تو در تو میشن و کار با اطلاعات و متغیرها و نهایتا مدیریت کد سخت میشه که به این قضیه میگن جهنم کال‌بک \newline % Row Count 9 (+ 9)
 {\bf{(Callback Hell)}} \newline % Row Count 10 (+ 1)
\{\{ar\}\}% Row Count 11 (+ 1)
} \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}{Pro}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Closure}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{function init() \{ \newline     var counter = 0; \newline   \newline     function jump\_counter() \{ \newline         counter++; \newline          \newline         return counter; \newline     \} \newline   \newline     return jump\_counter; \newline \} \newline   \newline var jump = init(); \newline   \newline jump(); \newline jump(); \newline jump(); \newline  \newline \textasciicircum{}کلاژر، یک تابعی هست که توی یک تابع دیگه تعریف میشه که می‌تونه علاوه بر متغیرهای حوزه‌ی خودش، به متغیرهای حوزه‌ی تابع بیرونی هم دسترسی داشته باشه.\textasciicircum{}} \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}{this}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{فقط نحوه‌ی فراخوانی اون تابع هست که مقدار دیس رو تعیین می‌کنه.% Row Count 3 (+ 3)
} \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}{this}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{var name = "David"; \newline   \newline var person = \{ \newline     name: "Ali", \newline     getName: function() \{ \newline         console.log(this.name); \newline     \} \newline \} \newline   \newline var getName = person.getName; \newline   \newline getName(); // David \newline person.getName(); // Ali} \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}{Call() \& Apply()}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{توی کال پارامترها رو باید بصورت تک تک پاس بدیم و توی اپلای میشه بصورت آرایه پاس داد. \newline % Row Count 4 (+ 4)
\{\{ar\}\}% Row Count 5 (+ 1)
} \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}{this}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\{\{ar\}\} \newline % Row Count 1 (+ 1)
"use strict"; \newline % Row Count 2 (+ 1)
در این حالت دیس دیگر گلوبال نیس و آندیفاین است \newline % Row Count 4 (+ 2)
-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}- \newline % Row Count 5 (+ 1)
Arrow Function \newline % Row Count 6 (+ 1)
مقدار دیس توی توابع معمولی به آبجکتی اشاره می‌کنه که داره اون تابع رو اجرا می‌کنه. اما توی ارو فانکشن ها مقدار دیس به صاحب (حوزه) آبجکتی اشاره می‌کنه که ‌‌ارو فانکشن توی اون تعریف شده% Row Count 13 (+ 7)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}