\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{kuriositty}
\pdfinfo{
  /Title (javascript-objects-the-basics-pt1.pdf)
  /Creator (Cheatography)
  /Author (kuriositty)
  /Subject (JavaScript Objects: the basics pt1 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}{333333}
\definecolor{LightBackground}{HTML}{F8F8F8}
\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 Objects: the basics pt1 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{kuriositty} via \textcolor{DarkBackground}{\uline{cheatography.com/146616/cs/31746/}}}
\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}kuriositty \\
  \uline{cheatography.com/kuriositty} \\
  \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 18th April, 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*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Objects}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{There are 8 data types in JavaScript. 7 of them are called {\bf{primitive}}, because their values contain only a single thing (string, number, bigInt, boolean, null, undefined, symbol).} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{In contrast, {\bf{objects}} are used to store keyed collections of various data and more complex entities.} \tn 
% Row Count 7 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{An object can be created with {\emph{figure brackets}} `\{…\}` with an optional list of properties. A property is a `"key: value"` pair, where key is a {\emph{string}} (also called a {\emph{property name}}), and value can be anything.} \tn 
% Row Count 12 (+ 5)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{An empty object can be created using one of two syntaxes: `let user = new Object();` {\emph{object constructor}} syntax and `let user = \{\};`  {\emph{object literal}} syntax which is usually used} \tn 
% Row Count 16 (+ 4)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Property values are accessible using the dot notation: `delete user.age;`} \tn 
% Row Count 18 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{The last property in the list may end with a {\emph{trailing}} or {\emph{hanging}} comma which makes it easier to add/remove/move around properties, bcs all ines become alike:\{\{nl\}\}`~~age: 30,`\{\{nl\}\}`\};`} \tn 
% Row Count 22 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Property value shorthand}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{function makeUser(name, age) \{ \newline   return \{ \newline     name: name, \newline     age: age, \newline     // ...other properties \newline   \}; \newline \} \newline  \newline let user = makeUser("John", 30); \newline alert(user.name); // John \newline  \newline // or \newline  \newline function makeUser(name, age) \{ \newline   return \{ \newline     name, // same as name: name \newline     age,  // same as age: age \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}{The "for…in" loop}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{let user = \{ \newline   name: "John", \newline   age: 30, \newline   isAdmin: true \newline \}; \newline  \newline for (let key in user) \{ \newline   // keys \newline   alert( key );  // name, age, isAdmin \newline   // values for the keys \newline   alert( user{[}key{]} ); // John, 30, true \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{To walk over all keys of an object, `for..in` loop can be used. `key` and `prop` are widely used variable names.}  \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}{{[}Square brackets{]}}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{We can also use {\bf{multiword property names}}, but then they must be quoted: \{\{nl\}\}`"likes birds": true`} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{For multiword properties, the dot access doesn't work. The {\bf{dot requires the key to be a valid variable}} identifier.  \{\{nl\}\}`user.likes birds = true // a syntax  error`} \tn 
% Row Count 7 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{There's an alternative {\bf{square bracket notation that works with strings}}\{\{nl\}\}`user{[}"likes birds"{]} = true; // set`\{\{nl\}\}`alert(user{[}"likes birds"{]}); // get`\{\{nl\}\}or:\{\{nl\}\}`let key = "likes birds";`\{\{nl\}\} `user{[}key{]} = true;`} \tn 
% Row Count 12 (+ 5)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{The {\bf{dot notation cannot be used in a similar way}}:\{\{nl\}\}`let user = \{`\{\{nl\}\}`~~name: "John",`\{\{nl\}\}`~~age: 30`\{\{nl\}\}`\};`\{\{nl\}\}`let key = "name";`\{\{nl\}\}`alert( user.key ); // undefined`} \tn 
% Row Count 17 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{`{[}{]}` are much more powerful than dot notation}}. They allow any property names and variables. But they are also more cumbersome to write. Most of the time, when property names are known and simple, the dot is used. And if we need something more complex, then we switch to square brackets.}  \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}{Property names limitations}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{A variable cannot have a name equal to one of the language-reserved words like {\emph{for}}, {\emph{let}}, {\emph{return}} etc.  But for an object property, there's no such restriction. there are no limitations on property names.} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{They can be any strings or symbols (a special type for identifiers). Other types are automatically converted to strings. For instance, a number 0 becomes a string "0" when used as a property key: `0: "test" // same as "0": "test"`} \tn 
% Row Count 10 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Ordered like an object}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{let codes = \{ \newline   "+49": "Germany", \newline   "+41": "Switzerland", \newline   "+44": "Great Britain", \newline   // .., \newline   "+1": "USA" \newline \}; \newline  \newline for (let code in codes) \{ \newline   alert( +code ); // 49, 41, 44, 1 \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{If we loop over an object, do we get all properties in the same order they were added? Integer properties are sorted, others appear in creation order.}  \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}{{[}Square brackets: Computed properties{]}}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{let fruit = prompt("Which fruit to buy?", "apple"); \newline  \newline let bag = \{ \newline   {[}fruit{]}: 5,  \newline \}; \newline  \newline alert( bag.apple ); // 5 if fruit="apple" \newline  \newline // We can use more complex expressions  \newline // inside square brackets \newline  \newline let fruit = 'apple'; \newline let bag = \{ \newline   {[}fruit + 'Juice'{]}: 5 // bag.appleJuice = 5 \newline \}; \newline  \newline // Essentially, that works the same as: \newline  \newline let fruit = prompt("Which fruit to buy?", "apple"); \newline let bag = \{\}; \newline  \newline // take property name from the fruit variable \newline bag{[}fruit{]} = 5;} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{The meaning of a computed property is simple: `{[}fruit{]}` means that the property name should be taken from {\emph{fruit}}. So, if a visitor enters "apple", bag will become `\{apple: 5\}`}  \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}{Property existence test, "in" operator}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{A notable feature of objects in JavaScript, is that it's possible to access any property, because {\bf{reading a non-existing prooperty returns `undefined`}}.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{`let user = \{\}` \{\{nl\}\} `alert( user.noSuchProperty === undefined ); // true`} \tn 
% Row Count 6 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{There's also a special operator `in` for that. \{\{nl\}\} `let user = \{ name: "John", age: 30 \};`\{\{nl\}\}`alert( "age" in user ); // true`\{\{nl\}\}`alert( "blabla" in user ); // false`} \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{On the left side of `in` there must be a property name. That's usually a quoted string.  If we omit quotes, that means a variable should contain the actual name to be tested.} \tn 
% Row Count 14 (+ 4)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Despite `undefined`, `in` operator exists because it will recognize that a property actuallty exists when it's storing `undefined`. Situations like this happen very rarely, because undefined should not be explicitly assigned.} \tn 
% Row Count 19 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Long story short}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Property keys must be strings or symbols (usually strings). Values can be of any type.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{To access a property, we can use: \{\{nl\}\}The {\emph{dot notation}}: `obj.property` \{\{nl\}\} {\emph{Square brackets}} notation `obj{[}"property"{]}`. Square brackets allow taking the key from a variable, like `obj{[}varWithKey{]}`.} \tn 
% Row Count 7 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Additional operators:\{\{nl\}\}To delete a property: `delete obj.prop` \{\{nl\}\}To check if a property with the given key exists: `"key" in obj`\{\{nl\}\}To iterate over an object: `for (let key in obj)` loop.} \tn 
% Row Count 11 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}