\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{crafter7058}
\pdfinfo{
  /Title (yet-another-javascript.pdf)
  /Creator (Cheatography)
  /Author (crafter7058)
  /Subject (Yet Another 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}{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{Yet Another JavaScript Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{crafter7058} via \textcolor{DarkBackground}{\uline{cheatography.com/149534/cs/32482/}}}
\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}crafter7058 \\
  \uline{cheatography.com/crafter7058} \\
  \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 June, 2022.\\
   Updated 14th June, 2022.\\
   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}{What is a program}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{- Program - a sequence of {\bf{statements}} that are executed in a certain order (by default sequentially, from top to bottom). \newline % Row Count 3 (+ 3)
In synchronous programs only {\bf{one statement is executed at a time}}. \newline % Row Count 5 (+ 2)
During the execution of these statements {\bf{input data}} is (optionally) received from the outside of program, then through the use of {\bf{expressions}} somehow transformed and/or used to create new data, and then the resulting data is {\bf{output}} to the outside of program. \newline % Row Count 11 (+ 6)
Program also operates on the data that is created during the program execution. \newline % Row Count 13 (+ 2)
Data is passed throughout the program by associating it with a {\bf{variable}} and later referencing variable name to access data created during the previous steps of the program. \newline % Row Count 17 (+ 4)
Some programs start their execution, do their task and output the result. After which they terminate (finish). Such programs are sometimes called scripts. They are usually relatively simple. \newline % Row Count 21 (+ 4)
Other programs run indefinetely, until an external command is given to terminate a program (e.g. 'close' button is pressed).% Row Count 24 (+ 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}{Values, data types}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{- Value - {\bf{a piece of data}} that a program works with. Always belongs to one of the {\bf{types}}. \newline % Row Count 2 (+ 2)
- Literal value - value that is created during program execution. For instance, if you need to add 3 to some value, you would write literal value `3` in your code in order to perform this operation. \newline % Row Count 6 (+ 4)
- (Data) Types - different categories of data that are defined by a programming language. Different languages have different types. JavaScript has 8 types, of them {\bf{7 primitive}} types and an {\bf{object }}type. \newline % Row Count 11 (+ 5)
Types determine what kind of {\bf{operations}} can be performed on values of that type. For instance a string of text can be converted to lower case, while two numbers can be multipled by each other. \newline % Row Count 15 (+ 4)
Performing an {\bf{invalid}} (illegal) operation on a value (e.g. trying to multiply two strings) is a {\bf{mistake}} \& usually (but in JS not always) results in an explicit {\bf{program error}}. \newline % Row Count 19 (+ 4)
Values can be {\bf{converted}} between types, becoming values of {\bf{another type}}. However not all type conversions are possible or make sense. \newline % Row Count 22 (+ 3)
Number 512 can become a string '512'. But string 'hello' can't become any meaningful number. \newline % Row Count 24 (+ 2)
Additionally dividing data between types allows programming language to store data and operate on it more efficiently. For instance arrays are optimized to allow very fast iteration of their elements. \newline % Row Count 29 (+ 5)
N.B. In JS arrays aren't its own type, but rather a special variety of objects.% Row Count 31 (+ 2)
} \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}{Boolean literals, null, undefined}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{true \newline false \newline // Can be only this two values \newline  \newline null // lack of real value, "nothing" \newline undefined // lack real of value, "nothing"} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{null and undefined are functionally similar, but two different types, duplication is due to historical reasons. \newline  \newline Language itself uses undefined most of the times (e.g. a function without a return, returns undefined). Because of that the convention is to use null when you (as opposed to the program) need to use "nothing" as a value}  \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}{Operators, expressions, variables}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{- Operator - special symbol or symbols (e.g. +) that takes values (operands) and results in a new value \newline % Row Count 3 (+ 3)
- Expression - one or many operators with their operands. Always results in (resolves to) a single value \newline % Row Count 6 (+ 3)
- Variable - a container (label, binding) with a programmer-defined name that is associated with (holds) a single value. \newline % Row Count 9 (+ 3)
Once a value associated with (assigned to, bound to) a varibale, it can be used in the following code by referencing variable name. \newline % Row Count 12 (+ 3)
In JS any variable can hold any type (JS is a dynamically typed language). That is, a variable doesn't have a type, but its value does. \newline % Row Count 15 (+ 3)
- Assignment operaror ( `=` ) - takes value on its right side and puts it in its left-side operand (variable, object property, array index) \newline % Row Count 18 (+ 3)
It has a very low precedence, so whatever is being assigned almost always resolves to value and then is assigned.% Row Count 21 (+ 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}{Expressions 1}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{/* Literals */ \newline // Literal of any type is an expression that resolves to itself \newline  \newline 5 // literal \newline  \newline "foo" // literal \newline  \newline /* Operators with operands */ \newline  \newline 5 + (7 * 13) // math expression \newline  \newline true \&\& (false || !false) // logical expression \newline  \newline +"562" // unary operator} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Expression is something that resolves to a value (is evaluated) during program execution}  \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}{Complex expression resolution example}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{/* Preparation */ \newline  \newline let myVarA = 3 \newline  \newline const myVarB = 2 \newline  \newline const arr = {[}5, 6, 7{]} \newline  \newline function squared(number) \{ \newline   return number * number \newline \} \newline  \newline /* Example */ \newline  \newline 55 / (12 - arr{[}2{]}) - +(true \&\& !false) / squared(myVarB) - ++myVarA \newline // 55 / (12 - {\bf{7}}) - +(true \&\& !false) / squared(myVarB) - ++myVarA \newline // 55 / {\bf{5}} - +(true \&\& !false) / squared(myVarB) - ++myVarA \newline // 55 / 5 - +(true \&\& {\bf{true}}) / squared(myVarB) - ++myVarA \newline // 55 / 5 - +{\bf{true}} / squared(myVarB) - ++myVarA \newline // 55 / 5 - +true / {\bf{4}} - ++myVarA \newline // 55 / 5 - {\bf{1}} / 4 - ++myVarA \newline // 55 / 5 - 1 / 4 - {\bf{4}} \newline // {\bf{11}} - 1 / 4 - 4 \newline // 11 - {\bf{0.25}} - 4 \newline // {\bf{10.75}} - 4 \newline // {\bf{6.75}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{See operation precedence \{\{link="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator\_Precedence\#table"\}\}table\{\{/link\}\} for order in which subexpressions resolve}  \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}{Non-primitive (composite) types}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Types that have internal structure and contain primitive types or other non-primitive types as its components. They are alternatively called composite, compound or aggregate data types. \newline % Row Count 4 (+ 4)
Is JS there is only one non-primitive data type - object. Its internal structure is a collection of key-value pairs, where each value is stored and accessed by its key (a string that programmer chooses similar to a variable name). \newline % Row Count 9 (+ 5)
Such data types is useful when we need to store heterogeneous, but related values. For instance, different information about a user (his name, age, date of birth etc.). \newline % Row Count 13 (+ 4)
However there are special variates of objects that behave differently. Two main subtypes are arrays and functions. \newline % Row Count 16 (+ 3)
Arrays store many values in themselves, each values is stored at and accessed by an integer index. Indices in array are contiguous, that is after 0 goes 1, then 2, then 3 and so on. \newline % Row Count 20 (+ 4)
Arrays are useful when we need to store a list of similar values. For instance, a series of numerical measurements. \newline % Row Count 23 (+ 3)
N.B. In JS it's technically possible skip indices and after storing value at an index 0, for example, store next one at an index 10. However that breaks internal optimizations of arrays and is a fundamentally wrong way to use them. \newline % Row Count 28 (+ 5)
Functions are special syntactic constructs (but in JS they are also values). They contain a series of statements in themselves and can be called (invoked, executed) in different places throughout the program. When called they (optionally) take some input data, execute its contained statements and (optionally) return result back where they were called.% Row Count 36 (+ 8)
} \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}{Arrays}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{[}1, 2, 3{]} // literal \newline  \newline {[}1, "foo", true, null, undefined{]} // can hold values of multiple types \newline  \newline {[}{[}1, 2{]}, {[}3, 4{]}{]} // can hold other arrays as elements \newline  \newline {[}\{amount: 6\}, \{amount: 16\}{]} // can hold objects as elements \newline  \newline const arr = {[}11, 22, 33{]} \newline  \newline arr{[}1{]} // get array element value, resolves to 22 \newline  \newline arr{[}1{]} = 0 // set a element value, now arr is {[}11, 0, 33{]}, overwrites existing value \newline  \newline arr.length // special property, it contains number of elements (is this case 3)} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Each array element is stored at an index. Indices start at {\emph{0}}, not 1. \newline  \newline For iteration over arrays see block on iteration}  \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}{Iteration (loops)}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{let counterA = 0 \newline  \newline while (counterA \textless{} 10) \{ \newline   // at the start of every iteration checks if condition is true \newline   // If true, runs body, then checks again \newline   // If false, then the loop is finished \newline   console.log('counterA equals ' + counterA) \newline   counterA++ \newline \} \newline  \newline for (let i = 0; i \textless{} 10; i++) \{ \newline    console.log('i equals ' + i) \newline \} \newline // let i = 0 - runs one time when loop starts \newline // i \textless{} 10 - checks condition at the start of every iteration, \newline // same logic as in while loop \newline // i++ - runs at the end of every iteration \newline  \newline // two loops above are functionally identical, \newline // but for loop encapsulates counter (i) declaration within its syntax \newline // and separates main action of the loop in its body \newline // from changing counter value \newline  \newline const arr = {[}'a', 'b', 'c'{]} \newline  \newline for (let i = 0; i \textless{} arr.length; i++) \{ \newline    console.log('element of arr at index ' + i + ' equals ' + arr{[}i{]})  \newline \} \newline  \newline let counterB = 0 \newline  \newline while (counterB \textless{} 10) \{ \newline   if (counterB === 3) \{ \newline     counterB++ \newline     continue // forces immediate exit from current iteration \newline     // goes to next iteration \newline     // can be used in 'for' loops as well \newline   \} \newline  \newline   console.log('counterB equals ' + counterB) \newline   counterB++ \newline \} \newline  \newline let counterC = 0 \newline  \newline while (true) \{ // condition will never be false \newline   console.log('counterC equals ' + counterC) \newline  \newline   counterC++ \newline  \newline   if (counterC === 5) \{ \newline     break // forces immediate loop termination \newline     // program execution goes further \newline     // can be used in 'for' loops as well \newline   \} \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Loop body runs repeatedly (iterates) for as long as the loop condition is true. When the loop condition becomes false, the loop terminates, and program execution contiues further.}  \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}{Loop use cases}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Usually loops are used to do the same action, but with a different value that changes between iterations. \newline % Row Count 3 (+ 3)
That value is stored in a variable (often called counter, index, i) outside of loop body and is changed inside loop body (always in case of 'while' loops and occasionally in 'for' loops) or, in case of 'for' loops, in a special expression inside parentheses (last of three expressions). \newline % Row Count 9 (+ 6)
Most often that repeated action is about doing something with an array element and the value of 'i' variable is used as an index to access an array element at that index. \newline % Row Count 13 (+ 4)
'for' loops are good for that case, because number of iterations are known at the start of the loop (for instance array length equals the number of iterations for iterate over an entire array). \newline % Row Count 17 (+ 4)
Alternatively loops are used to repeat some action until something happens (for instance network request is successful). \newline % Row Count 20 (+ 3)
'while' loops are good for that case, because the number of iterations are unknown at the start of a loop (we don't know how many times we have to repeat the request until it succeeds).% Row Count 24 (+ 4)
} \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}{Statements}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{A statement is a command to a computer to do something. \newline % Row Count 2 (+ 2)
Programming languages (including JS) have a number of special words ({\bf{keywords}}) that, when used in the code, indicate to the computer that a statement is issued and needs to be executed when program is run. \newline % Row Count 7 (+ 5)
In JavaScript statements can be on single line (for instance variable declaration), or on multiple (for instance 'if' statement). \newline % Row Count 10 (+ 3)
- Block statement ( `\{\}` ) - a special statement that contains other statements within it. Rarely used on its own, usually it is used as a part of another statement ('if', 'while', 'for', 'function' etc.). When used as a part of another statement it's called "{\bf{body}}" (e.g. function body). \newline % Row Count 16 (+ 6)
In JS statements without blocks are (optionally) terminated by a {\bf{semicolon}} ( `;` ). \newline % Row Count 18 (+ 2)
N.B. More than one statement can be on a single line, in which case they {\bf{must}} be separated (terminated) by a semicolon. Example: \newline % Row Count 21 (+ 3)
`let a; let b = 5; let c; // last semicolon is not mandatory` \newline % Row Count 23 (+ 2)
There are also a few other edge cases when semicolons must be used, because without them it's impossible to unabmiguously divide code into statements. But there cases are very rare. \newline % Row Count 27 (+ 4)
Even though semicolons are optional begginners are often encouraged to still use them, because that way it's easier for programmer to see where one statement ends \& another begins.% Row Count 31 (+ 4)
} \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}{Primitive types}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Types with no internal structure (e.g. a single string of text, a single number). \newline % Row Count 2 (+ 2)
Primitive types are immutable, that is their value can't be changed. Examples: \newline % Row Count 4 (+ 2)
`5 + 10 // two values are used to create new value` \newline % Row Count 6 (+ 2)
`let myVar = 7` \newline % Row Count 7 (+ 1)
`myVar = myVar + 4 // existing myVar value is used (alognside 4) to create new value` \newline % Row Count 9 (+ 2)
`// That new value overwrites existing myVar value` \newline % Row Count 11 (+ 2)
N.B. strings are considered primitives, but technically have internal structure, since it's possible to access (but not change) its individual characters.% Row Count 15 (+ 4)
} \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}{Number literals}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{12 // integer \newline  \newline 3.45 // float \newline  \newline -512 // negative \newline  \newline 0 \newline  \newline Infinity // also {\emph{-Infinity}} \newline  \newline NaN // "not a number", special value \newline // results from illegal operations such as {\emph{5 / "foo"}}} \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}{String literals}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{'foo' \newline  \newline "foo" // same as single quotes \newline  \newline /* Escaping */ \newline  \newline 'I don\textbackslash{}'t know' // {\emph{I don't know}} \newline  \newline "Jack \textbackslash{}"Owl\textbackslash{}" Smith" // {\emph{Jack "Owl" Smith}} \newline  \newline "Don't need to escape" \newline  \newline "Use this to escape \textbackslash{}\textbackslash{} in strings" // {\emph{Use this to escape \textbackslash{} in strings}} \newline  \newline /* Special characters */ \newline  \newline "First line.\textbackslash{}nSecond line" \newline /* \newline First line. \newline Second line \newline */} \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}{Variable declaration}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{/* Declare \& assign (initialize) */ \newline  \newline var myVarA = 2 // outdated keyword, don't use \newline  \newline let myVarB = 4 \newline  \newline const myVarC = 8 // can't be reassigned later \newline // recommended to be used by default \newline  \newline /* Only declare */ \newline  \newline let myVarD // has {\emph{undefined}} as value \newline  \newline /* Reassign */ \newline  \newline myVarB = "foo" \newline myVarD = {[}1, 2, 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}{Expressions 2}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{/* Variables */ \newline  \newline const myVar = "Hello world" \newline  \newline myVar // resolves to a value stored in the variable \newline  \newline /* Object properties */ \newline  \newline const human = \{ \newline   name: "John", \newline   age: 20, \newline \} \newline  \newline human.age // resolves to a value stored in the property \newline  \newline /* Array elements */ \newline  \newline const arr = {[}10, 20, 30{]} \newline  \newline arr{[}1{]} // resolves to a value stored at that index \newline  \newline /* Function calls */ \newline // Resolves to whatever is returned by a funtion \newline  \newline function sum(a, b) \{ \newline   return a + b \newline \} \newline  \newline sum(5, 15)} \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}{Places to use values}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{const value = "I'm just a value" \newline  \newline // As a part of a larger expression \newline value + ". Or am I?" \newline  \newline // Assigned to variables \newline const newValue = value \newline  \newline // Assigned to object properties \newline const obj = \{\} \newline obj.message = value \newline  \newline // Put in an array at a certain index \newline const arr = {[}1, 2, 3{]} \newline arr{[}0{]} = value \newline  \newline // As function parameters \newline function isBoolean(toTest) \{ \newline   return toTest === false || toTest === true \newline \} \newline isBoolean(value) \newline  \newline // As a function returned value \newline function getTen() \{ \newline   const value = 10 \newline   return value \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Expressions resolve to values \& values can used in these places}  \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}{Objects}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\{ \newline   key: "value", \newline   key2: 5, \newline \} // literal \newline  \newline // can hold arrays \& other objects \newline const post = \{ \newline   text: "Come and join me!", \newline   categories: {[}"fun", "user-friendly", "paywalled"{]}, \newline   isVisible: true, \newline   createdAt: \seqsplit{"2022-06-12T18:58:13.059Z"}, \newline   engagement: \{ \newline     likes: 5, \newline     comments: 0, \newline     shares: 0, \newline   \}, \newline \} \newline  \newline post.isVisible // get value stored in property "isVisible" \newline  \newline post.text = "Best time of your life" // set value for property "text", \newline // overwrites existing value \newline  \newline post.engagements.like // get and set deeply nested properties \newline // by chaining property names \newline  \newline post.foo // getting non-existing property evaluates to {\emph{undefined}}, \newline // but doesn't result in explicit error \newline  \newline post.foo.bar // this results in an error, \newline // because it's impossible to access property of {\emph{undefined}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Objects are containers for values, where each values is associated with a string key (a property). Key-value pairs are separated by a comma. \newline  \newline They are used to store values of different types that are related in some way (for instance to represent real world entities: people, cars, bank accounts etc.)}  \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}{Conditionals}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{let conditionA = true \newline  \newline if (conditionA) \{ \newline   console.log("I will run") \newline \} \newline  \newline conditionA = false \newline  \newline if (conditionA) \{ \newline   console.log("I won't run") \newline \} \newline  \newline // any condition must resolve to a boolean value. \newline // If an expression in condtion isn't boolean, it's converted to boolean \newline  \newline conditionA = 5 \newline  \newline if (conditionA) \{ \newline   console.log("I, too, will run") \newline \} \newline  \newline // logical operators can be used to create complex conditions \newline const conditionB = false \newline  \newline if (conditionA \&\& !conditionB) \{ \newline   console.log("Complex condition is true!") \newline \} \newline  \newline // use esle keyword to do something if condition is false \newline if (conditionB) \{ \newline   console.log("Either I will run") \newline \} else \{ \newline   console.log("Or me") \newline \} \newline  \newline // use else if keyword to check for multiple cases. \newline // It checks conditions until the first true condition is met, \newline // that branch runs, following branches are ignored \newline const age = 15 \newline  \newline if (age \textless{} 5) \{ \newline   console.log("Baby") \newline \} else if (age \textless{} 16) \{ \newline   console.log("Child") // this will run \newline \} else if (age \textless{} 30) \{ \newline   console.log("Young adult") // this and following branches won't run \newline   // even though condition is true, \newline   // because previous branch was executed already \newline \} else if (age \textless{} 60) \{ \newline   console.log("Adult") \newline \} else \{ // this is optional, to run if all above condtions are false \newline   console.log("Old man") \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}