\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{miroo}
\pdfinfo{
  /Title (javascript-data-structure-and-algorithms.pdf)
  /Creator (Cheatography)
  /Author (miroo)
  /Subject (Javascript Data Structure \& Algorithms 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 Data Structure \& Algorithms Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{miroo} via \textcolor{DarkBackground}{\uline{cheatography.com/138520/cs/29185/}}}
\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}miroo \\
  \uline{cheatography.com/miroo} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 19th September, 2021.\\
   Updated 19th September, 2021.\\
   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}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Arrays Methods}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{concat (array0?, value1?, ... , valueN?)} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array. \{\{nl\}\}`const letters = {[}'a', 'b', 'c'{]}; \{\{nl\}\}const numbers = {[}1, 2, 3{]};  \{\{nl\}\}letters.concat(numbers); \{\{nl\}\}// result in {[}'a', 'b', 'c', 1, 2, 3{]}`\}} \tn 
% Row Count 8 (+ 8)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{splice(start, deleteCount?, item1?, item2?, itemN?)} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, see slice(). \{\{nl\}\}`const months = {[}'Jan', 'March', 'April', 'June'{]}; \{\{nl\}\}months.splice(1, 0, 'Feb');\{\{nl\}\}//output: {[}"Jan", "Feb", "March", "April", "June"{]}`} \tn 
% Row Count 18 (+ 10)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{slice (start?, end?)} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified. \{\{nl\}\}`const animals = {[}'ant', 'bison', 'camel', 'duck', 'elephant'{]};\{\{nl\}\}animals.slice(2, 4)\{\{nl\}\}// output: {[}"camel", "duck"{]}`} \tn 
% Row Count 27 (+ 9)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{shit ()} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.} \tn 
% Row Count 31 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Arrays Methods (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{unshift (element0,element1)} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.} \tn 
% Row Count 4 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{sort ((firstEl, secondEl) =\textgreater{} \{ ... \} )} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings \{\{nl\}\}If compareFunction(a, b) returns a value {\bf{\textgreater{} than 0}}, sort b before a. \{\{nl\}\}If compareFunction(a, b) returns a value {\bf{\textless{} than 0}}, sort a before b. \{\{nl\}\}If compareFunction(a, b) {\bf{returns 0}}, a and b are considered equal.} \tn 
% Row Count 14 (+ 10)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{filter ((element, index, array) =\textgreater{} \{ ... \} )} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The filter() method creates a new array with all elements that pass the test implemented by the provided function.\{\{nl\}\} callbackFn Function is a predicate, to test each element of the array. Return a value that coerces to true to keep the element, or to false otherwise.\{\{nl\}\}`let filtered = {[}12, 5, 8, 130, 44{]}.filter(value =\textgreater{} value\textgreater{}=10) \{\{nl\}\}// filtered is {[}12, 130, 44{]}`} \tn 
% Row Count 23 (+ 9)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{find ((element, index, array) =\textgreater{} \{ ... \} )} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned. \{\{nl\}\}If you need the index of the found element in the array, use findIndex().\{\{nl\}\}`const array1 = {[}5, 12, 8, 130, 44{]};  \{\{nl\}\}const found = array1.find(element =\textgreater{} element \textgreater{} 10); \{\{nl\}\}// expected output: 12`} \tn 
% Row Count 33 (+ 10)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Arrays Methods (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{join(separator?)} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.\{\{nl\}\}`var a = {[}'Wind', 'Water', 'Fire'{]}; \{\{nl\}\}a.join();// 'Wind,Water,Fire' \{\{nl\}\}a.join('');    // 'WindWaterFire'`} \tn 
% Row Count 10 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Linked List}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{class Node \{ \newline constructor(element) \newline     \{ \newline         this.element = element; \newline         this.next = null; \newline         this.previous = null; \newline     \} \newline \} \newline class LinkedList \{ \newline     constructor() \newline     \{ \newline         this.head = null; //root Node \newline         this.tail = null; // last element of the list \newline         this.size = 0; \newline     \} \newline    \newline   //Adds element to the begining of the list. Similar to Array.unshift \newline   //O(1) \newline    addHead(value) \{ \newline     const newNode = new Node(value); \newline  \newline     newNode.next = this.head; \newline  \newline     if (this.head) \{ \newline       this.head.previous = newNode; \newline     \} else \{ \newline       this.tail = newNode; \newline     \} \newline  \newline     this.head = newNode; // update head \newline     this.size += 1; \newline  \newline     return newNode; \newline   \} \newline  \newline     //Adds element to the end of the list (tail) \newline     //O(1) \newline     addTail(value) \{ \newline     const newNode = new Node(value); \newline  \newline     if (this.head) \{ \newline       newNode.previous = this.tail; \newline       this.tail.next = newNode; \newline       this.tail = newNode; \newline     \} else \{ \newline       this.head = newNode; \newline       this.tail = newNode; \newline     \} \newline  \newline     this.size += 1; \newline  \newline     return newNode; \newline   \} \newline   \newline     // insert element at the position index of the list \newline     insertAt(element, index) \newline     \{ \newline 	if (index \textless{} 0 || index \textgreater{} this.size) \newline 		return console.log("Please enter a valid index."); \newline 	else \{ \newline 		// creates a new node \newline 		var node = new Node(element); \newline 		var curr, prev; \newline  \newline 		curr = this.head; \newline  \newline 		// add the element to the \newline 		// first index \newline 		if (index == 0) \{ \newline 			node.next = this.head; \newline 			this.head = node; \newline 		\} else \{ \newline 			curr = this.head; \newline 			var it = 0; \newline  \newline 			// iterate over the list to find \newline 			// the position to insert \newline 			while (it \textless{} index) \{ \newline 				it++; \newline 				prev = curr; \newline 				curr = curr.next; \newline 			\} \newline  \newline 			// adding an element \newline 			node.next = curr; \newline 			prev.next = node; \newline 		\} \newline 		this.size++; \newline 	    \} \newline      \} \newline  \newline   //Removes element from the start of the list (head/root). \newline   //Runtime O(1) \newline    removeHead() \{ \newline     const head = this.head; \newline  \newline     if (head) \{ \newline       this.head= head.next; \newline       if (this.head) \{ \newline         this.head.previous = null; \newline       \} else \{ \newline         this.tail = null; \newline       \} \newline       this.size -= 1; \newline     \} \newline     return head \&\& head.value; \newline   \} \newline  \newline    //Removes element to the end of the list. Similar to Array.pop \newline    //Runtime: O(1) \newline   removeTail() \{ \newline     const tail = this.tail; \newline  \newline     if (tail) \{ \newline       this.tail = tail.previous; \newline       if (this.tail) \{ \newline         this.tail.next = null; \newline       \} else \{ \newline         this.head = null; \newline       \} \newline       this.size -= 1; \newline     \} \newline     return tail \&\& tail.value; \newline   \} \newline  \newline    // removes an element from the specified location \newline    removeFrom(index) \newline    \{ \newline     if (index \textless{} 0 || index \textgreater{}= this.size) \newline         return console.log("Please Enter a valid index"); \newline     else \{ \newline         var curr, prev, it = 0; \newline         curr = this.head; \newline         prev = curr; \newline    \newline         // deleting first element \newline         if (index === 0) \{ \newline             this.head = curr.next; \newline         \} else \{ \newline             // iterate over the list to the \newline             // position to removce an element \newline             while (it \textless{} index) \{ \newline                 it++; \newline                 prev = curr; \newline                 curr = curr.next; \newline             \} \newline    \newline             // remove the element \newline             prev.next = curr.next; \newline         \} \newline         this.size-{}-; \newline    \newline         // return the remove element \newline         return curr.element; \newline      \} \newline    \} \newline  \newline     // removes a given element from the list \newline     removeElement(element) \newline     \{ \newline 	var current = this.head; \newline 	var prev = null; \newline  \newline 	// iterate over the list \newline 	while (current != null) \{ \newline 		// comparing element with current \newline 		// element if found then remove the \newline 		// and return true \newline 		if (current.element === element) \{ \newline 			if (prev == null) \{ \newline 				this.head = current.next; \newline 			\} else \{ \newline 				prev.next = current.next; \newline 			\} \newline 			this.size-{}-; \newline 			return current.element; \newline 		\} \newline 		prev = current; \newline 		current = current.next; \newline 	\} \newline 	return -1; \newline     \} \newline  \newline     // finds the index of element \newline     indexOf(element) \newline    \{ \newline     var count = 0; \newline     var current = this.head; \newline    \newline     // iterae over the list \newline     while (current != null) \{ \newline         // compare each element of the list \newline         // with given element \newline         if (current.element === element) \newline             return count; \newline         count++; \newline         current = current.next; \newline     \} \newline    \newline     // not found \newline     return -1; \newline    \} \newline  \newline    \newline     isEmpty() \newline    \{ \newline     return this.size == 0; \newline    \} \newline  \newline \}} \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}{Queue with Array}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{//FIFO(First in First Out)  \newline class Queue \{ \newline     // Array is used to implement Queue \newline     constructor()    \{ \newline         this.items = {[}{]}; \newline     \}   \newline  \newline     enqueue(element)\{  //O(1) \newline       \seqsplit{this.items.push(element);}  \newline     \} \newline  \newline      //Removes an element from the front of a queue (items{[}0{]}) \newline     dequeue()\{ // O(n)        \newline       return this.items.shift(); \newline     \} \newline     peek()\{ \newline     // return the front element from the queue \newline     return this.items{[}0{]}; \newline     \} \newline     isEmpty()\{ \newline      // return true if queue is empty \newline     return this.items.length == 0; \newline    \} \newline \}} \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}{Queue with Linked List}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{class Queue \{ \newline   constructor() \{ \newline     this.items = new LinkedList(); \newline   \} \newline  \newline    //Add element to the queue \newline    //Runtime: O(1) \newline   enqueue(item) \{ \newline     \seqsplit{this.items.addTail(item);} \newline     return this; \newline   \} \newline  \newline  //Remove element from the queue \newline  //Runtime: O(1) \newline   dequeue() \{ \newline     return this.items.removeHead(); \newline   \} \newline  \newline   get size() \{ \newline     return this.items.size; \newline   \} \newline  \newline   isEmpty() \{ \newline     return !this.items.size; \newline   \}} \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}{{\bf{Stack with Array}}}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{//LIFO(Last in First Out) AND FILO(First in Last Out) \newline class Stack \{ \newline     // Array is used to implement stack \newline     constructor()    \{ \newline         this.items = {[}{]}; \newline     \}   \newline  \newline     push(element)\{  //O(1) \newline       \seqsplit{this.items.push(element);}  \newline     \} \newline  \newline     pop()\{ // O(1) \newline        return this.items.pop(); \newline     \} \newline     peek()\{ \newline     // return the top most element from the stack \newline     return this.items{[}this.items.length - 1{]}; \newline     \} \newline     isEmpty()\{ \newline      // return true if stack is empty \newline     return this.items.length == 0; \newline    \} \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}