\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{AC Winter (acwinter)} \pdfinfo{ /Title (javascript-basic-advanced-and-more.pdf) /Creator (Cheatography) /Author (AC Winter (acwinter)) /Subject (JavaScript: Basic, Advanced, \& More 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}{205591} \definecolor{LightBackground}{HTML}{F1F4F8} \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: Basic, Advanced, \& More Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{AC Winter (acwinter)} via \textcolor{DarkBackground}{\uline{cheatography.com/21349/cs/4084/}}} \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}AC Winter (acwinter) \\ \uline{cheatography.com/acwinter} \\ \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}} \\ \vspace{-2pt}Published 6th May, 2015.\\ Updated 9th May, 2016.\\ 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}{\{\{fa-file-text\}\} {\bf{About This Document}}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{the purpose of this cheat sheet is to briefly describe the core elements of the JavaScript language for those of studying it who have taken in much more than we can hold onto well. nothing here is explained {\emph{in full}} but rather meant to get you on the right track. also, this document purposely does not cover browser-specific methods / syntax / objects and the like. \newline % Row Count 8 (+ 8) \{\{fa-thumb-tack\}\} {\emph{this cheat sheet is a work in progress and may be updated -{}- check back on occasion!}}% Row Count 11 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{1.52 cm} x{3.42 cm} x{2.66 cm} } \SetRowColor{DarkBackground} \mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-exchange\}\} Types}} \tn % Row 0 \SetRowColor{LightBackground} {\bf{Type}} & {\bf{typeOf evaluation}} & {\bf{Primitive?}} \tn % Row Count 2 (+ 2) % Row 1 \SetRowColor{white} Null & object & yes \tn % Row Count 3 (+ 1) % Row 2 \SetRowColor{LightBackground} \seqsplit{Undefined} & undefined & yes \tn % Row Count 5 (+ 2) % Row 3 \SetRowColor{white} Boolean & boolean & yes \tn % Row Count 6 (+ 1) % Row 4 \SetRowColor{LightBackground} String & string & yes \tn % Row Count 7 (+ 1) % Row 5 \SetRowColor{white} Number & number & yes \tn % Row Count 8 (+ 1) % Row 6 \SetRowColor{LightBackground} Object & object & no -{}-{\emph{an object}} \tn % Row Count 10 (+ 2) % Row 7 \SetRowColor{white} \seqsplit{Function} & function & no -{}-{\emph{an object}} \tn % Row Count 12 (+ 2) % Row 8 \SetRowColor{LightBackground} Array & object & no -{}-{\emph{an object}} \tn % Row Count 14 (+ 2) % Row 9 \SetRowColor{white} Symbol & symbol & no -{}-{\emph{an object}} \tn % Row Count 16 (+ 2) % Row 10 \SetRowColor{LightBackground} {[}{]} & object & no -{}-{\emph{an object}} \tn % Row Count 18 (+ 2) % Row 11 \SetRowColor{white} \{\} & object & no -{}-{\emph{an object}} \tn % Row Count 20 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}---} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-fax\}\} Number \& Math Methods}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-angle-double-right\}\}`someNum.toFixed(num)` \newline % Row Count 1 (+ 1) • shortens someNum to have only num decimal places \newline % Row Count 3 (+ 2) \{\{fa-angle-double-right\}\}`num.toExponential()` \newline % Row Count 4 (+ 1) • converts num to exponential notation (i.e. 5.569e+0) \newline % Row Count 6 (+ 2) \{\{fa-angle-double-right\}\}`num.toString()` \newline % Row Count 7 (+ 1) • converts num to a string \newline % Row Count 8 (+ 1) \{\{fa-angle-double-right\}\}`num.toPrecision(\#)` \newline % Row Count 9 (+ 1) • converts num to a num with \# places starting with whole numbers \newline % Row Count 11 (+ 2) \{\{fa-angle-double-right\}\}`String(someValue)` \newline % Row Count 12 (+ 1) • converts or coerces someValue to a string - someValue can be any type, ie "Boolean(1)" returns true \newline % Row Count 15 (+ 3) \{\{fa-angle-double-right\}\}`parseInt(string, radix)` \newline % Row Count 17 (+ 2) \{\{fa-angle-double-right\}\}`parseFloat(string, radix)` \newline % Row Count 19 (+ 2) • converts a string into an integer. the optional radix argument defines the base -{}- i.e., base 10 (decimal) or base 16 (hexadecimal). \newline % Row Count 22 (+ 3) \{\{fa-angle-double-right\}\}`Math.round(num)` \newline % Row Count 23 (+ 1) • rounds num to nearest integer \newline % Row Count 24 (+ 1) \{\{fa-angle-double-right\}\}`Math.ceil(num)` \newline % Row Count 25 (+ 1) • rounds num {\emph{up}} to nearest integer \newline % Row Count 26 (+ 1) \{\{fa-angle-double-right\}\}`Math.floor(num)` \newline % Row Count 27 (+ 1) • rounds num {\emph{down}} to nearest integer \newline % Row Count 28 (+ 1) \{\{fa-angle-double-right\}\}`Math.max(num1, num2)` \newline % Row Count 29 (+ 1) • returns larger num \newline % Row Count 30 (+ 1) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-fax\}\} Number \& Math Methods (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-angle-double-right\}\}`Math.min(num1, num2)` \newline % Row Count 1 (+ 1) \{\{fa-angle-double-right\}\}`Math.pow(num1, num2)` \newline % Row Count 2 (+ 1) • returns num1 to the power num2 \newline % Row Count 3 (+ 1) \{\{fa-angle-double-right\}\}`Math.sqrt(num)` \newline % Row Count 4 (+ 1) \{\{fa-angle-double-right\}\}`Math.random()` \newline % Row Count 5 (+ 1) • returns decimal between 0 (inclusive) and 1(exclusive) \newline % Row Count 7 (+ 2) \{\{fa-angle-double-right\}\}`Math.abs(num)` \newline % Row Count 8 (+ 1) • returns absolute value of num•% Row Count 9 (+ 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}{\{\{fa-bullhorn\}\} Array "Extra Methods"}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-lightbulb-o\}\}{\bf{Note:}} these "extra methods," which are "higher-order" functions, ignore holes in the array (i.e.: {[}"apples", , , , "oranges"{]}). they also have more arguments than shown here -{}- best to look them up for more info! \newline % Row Count 5 (+ 5) \{\{fa-lightbulb-o\}\}{\bf{Note:}} array-{\emph{like}} objects, for example `arguments` and `NodeLists`, can also make use of these methods. \newline % Row Count 8 (+ 3) \{\{fa-angle-double-right\}\}`arr.some(callback)` \newline % Row Count 9 (+ 1) \{\{fa-angle-double-right\}\}`arr.every(callback)` \newline % Row Count 10 (+ 1) • returns a boolean value. returns true if {\emph{some}} or {\emph{every}} element in the array meets the evaluation. example: \newline % Row Count 13 (+ 3) ~~~`var a = {[}1,2,3{]};` \newline % Row Count 14 (+ 1) ~~~`var b = a.every(function(item)\{` \newline % Row Count 16 (+ 2) ~~~~~` return item \textgreater{} 1;` \newline % Row Count 18 (+ 2) ~~~`\}); // false` \newline % Row Count 19 (+ 1) \{\{fa-angle-double-right\}\}`arr.reduce(function(prev, next)\{..\}, startVal)` \newline % Row Count 21 (+ 2) \{\{fa-angle-double-right\}\}`arr.reduceRight(function(prev, next)\{..\}, startVal)` \newline % Row Count 23 (+ 2) • returns a value. {\emph{reduce}} employs a callback to run through the elements of the array, returning "prev" to itself with each iteration and taking the next "next" value in the array. for it's first "prev" value it will take an optional "startVal" if supplied. an interesting example: \newline % Row Count 29 (+ 6) ~~~`var arr = {[}"apple", "pear", "apple", "lemon"{]};` \newline % Row Count 31 (+ 2) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-bullhorn\}\} Array "Extra Methods" (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{~~~`var c = arr.reduce(function(prev, next) \{` \newline % Row Count 2 (+ 2) ~~~~~`prev{[}next{]} = (prev{[}next{]} += 1) || 1;` \newline % Row Count 4 (+ 2) ~~~~~`return prev;` \newline % Row Count 5 (+ 1) ~~~`\}, \{\});` \newline % Row Count 6 (+ 1) ~~~`// objCount = \{ apple: 2, pear: 1, lemon: 1 \}` \newline % Row Count 8 (+ 2) \{\{fa-angle-double-right\}\}`arr.filter(function()\{..\})` \newline % Row Count 10 (+ 2) • returns an array. {\emph{filter}} returns an array of elements that satisfy a given callback. example: \newline % Row Count 12 (+ 2) ~~~`var arr2 = {[}"jim", "nancy", "ned"{]};` \newline % Row Count 14 (+ 2) ~~~`var letter3 = \seqsplit{arr2.filter(function(item)} \{` \newline % Row Count 16 (+ 2) ~~~~~`return (item.length === 3);` \newline % Row Count 18 (+ 2) ~~~`\});` \newline % Row Count 19 (+ 1) \seqsplit{~~~`console.log(letter3);} // {[}'jim', 'ned'{]}` \newline % Row Count 21 (+ 2) \{\{fa-angle-double-right\}\}`arr.sort(function()\{..\})` \newline % Row Count 23 (+ 2) • returns {\emph{the original}} array, mutated. {\emph{sort}} returns the elements sorted with a given criteria. for example: \newline % Row Count 26 (+ 3) ~~~`var stock = {[}\{key: "r", num: 12\}, \{key: "a", num: 2\}, \{key: "c", num: 5\}{]};` \newline % Row Count 29 (+ 3) ~~~`var c = stock.sort(function(a,b) \{ ` \newline % Row Count 31 (+ 2) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-bullhorn\}\} Array "Extra Methods" (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{~~~~~`return a.num - b.num;` \newline % Row Count 2 (+ 2) ~~~`\} ); // {[} \{ key: 'a', num: 2 \}, \{ key: 'c', num: 5 \}, \{ key: 'r', num: 12 \} {]}` \newline % Row Count 5 (+ 3) \{\{fa-angle-double-right\}\}`arr.map()` \newline % Row Count 6 (+ 1) • returns an array. {\emph{map}} goes over every element in the array, calls a callback on the element, and sets an element in the new array to be equal to the return value the callback. for example: \newline % Row Count 10 (+ 4) ~~~`var stock = {[}\{key: "red", num: 12\}, \{key: "blue", num: 2\}, \{key: "black", num: 2\}{]};` \newline % Row Count 13 (+ 3) ~~~`var b = stock.map(function (item)\{` \newline % Row Count 15 (+ 2) ~~~~~`return item.key;` \newline % Row Count 16 (+ 1) ~~~`\}) // {[}"red","blue","black"{]}` \newline % Row Count 17 (+ 1) \{\{fa-angle-double-right\}\}`arr.forEach()` \newline % Row Count 18 (+ 1) • no return value. {\emph{forEach}} performs an operation on all elements of the array. for example: \newline % Row Count 20 (+ 2) ~~~`var arr = {[}"jim", "mary"{]};` \newline % Row Count 22 (+ 2) ~~~`a.forEach (function (item) \{` \newline % Row Count 23 (+ 1) ~~~~~` console.log("I simply love " +item);` \newline % Row Count 25 (+ 2) ~~~`\}); // "I simply love jim", "I simply love mary"` \newline % Row Count 27 (+ 2) \{\{fa-lightbulb-o\}\}{\bf{Note:}} you can combine array methods in a {\emph{chain}} where the result of the leftmost operation is passed to the right as such: \newline % Row Count 30 (+ 3) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-bullhorn\}\} Array "Extra Methods" (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\seqsplit{`array.sort().reverse()...`}% Row Count 1 (+ 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}{\{\{fa-rocket\}\} Functions \& Etc.}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-lightbulb-o\}\}{\bf{Callbacks: }} placing ( ) after a function call {\emph{executes it immediately}}. leaving these off allows for a callback. \newline % Row Count 3 (+ 3) {\bf{Function Declaration}} \newline % Row Count 4 (+ 1) \{\{fa-angle-double-right\}\}` function aFunctionName (args) \{...` \newline % Row Count 6 (+ 2) • functions created in this manner are evaluated when the code is parsed and are 'hoisted' to the top and are available to the code {\emph{even before}} they're formally declared. Note: Due to JS's odd construction, using function declarations within a flow control statement can be wonky and is best avoided. \newline % Row Count 13 (+ 7) {\bf{Function Expression / Anonymous Functions}} \newline % Row Count 14 (+ 1) \{\{fa-angle-double-right\}\}` var bar = function (args) \{...` \newline % Row Count 16 (+ 2) • (also referred to as 'Function Operators') anonymous functions are evaluated at 'runtime' and are therefore less memory intensive. they must be provided a variable name but need not have a function name (therefore: anonymous). {[}these are {]} \newline % Row Count 21 (+ 5) {\bf{Named Function Expression}} \newline % Row Count 22 (+ 1) \{\{fa-angle-double-right\}\}` var bar = function foo (args) \{...` \newline % Row Count 24 (+ 2) • confusingly, this is still an 'anonymous function.' assigning a name is useful for debugging purposes and also allows for self-referential / recursive calls \newline % Row Count 28 (+ 4) {\bf{Function Constructor}} \newline % Row Count 29 (+ 1) \{\{fa-angle-double-right\}\}` var anotherFunction = new Function (args, function () \{... \}) \{...\}` \newline % Row Count 31 (+ 2) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-rocket\}\} Functions \& Etc. (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{• equivalent to a functional expression \newline % Row Count 1 (+ 1) {\bf{Self-Invoking Anonymous Functions}} \newline % Row Count 2 (+ 1) \{\{fa-angle-double-right\}\}` ( function (args) \{ doSomething; \} ) ( );` \newline % Row Count 4 (+ 2) • (also known as IIFEs / 'Immediately Invoked Function Expressions') and invokes immediately% Row Count 6 (+ 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}{\{\{fa-undo\}\} Loops / Control Flow Statements}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{if .. else if .. else }} \newline % Row Count 1 (+ 1) ~~~`if (considtion1) \{` \newline % Row Count 2 (+ 1) ~~~~~` doSomething;` \newline % Row Count 3 (+ 1) ~~~`\} else if \{` \newline % Row Count 4 (+ 1) ~~~~` doSomethingElse;` \newline % Row Count 5 (+ 1) ~~~`\} else \{` \newline % Row Count 6 (+ 1) ~~~~` doSomethingMore;` \newline % Row Count 7 (+ 1) ~~~`\}` \newline % Row Count 8 (+ 1) {\bf{for loop }} \newline % Row Count 9 (+ 1) ~~~`for (var i = 0; i \textless{} someNumber; i++) \{` \newline % Row Count 11 (+ 2) ~~~` doSomething;` \newline % Row Count 12 (+ 1) ~~~`\}` \newline % Row Count 13 (+ 1) {\bf{switch loop}} \newline % Row Count 14 (+ 1) ~~~`switch (someEvaluation) \{` \newline % Row Count 15 (+ 1) ~~~` case "evaluatesAsThis" :` \newline % Row Count 16 (+ 1) ~~~~~~` doSomething;` \newline % Row Count 18 (+ 2) ~~~` case "evaluatesAsThat" :` \newline % Row Count 19 (+ 1) ~~~~ ~~` doSomethingElse;` \newline % Row Count 21 (+ 2) ~~~`\}` \newline % Row Count 22 (+ 1) {\bf{while loop}} \newline % Row Count 23 (+ 1) ~~~`while (someEvaluation === true) \{` \newline % Row Count 25 (+ 2) ~~~~` doSomething;` \newline % Row Count 26 (+ 1) ~~~`\}` \newline % Row Count 27 (+ 1) {\bf{do .. while}} \newline % Row Count 28 (+ 1) ~~~`do \{` \newline % Row Count 29 (+ 1) ~~~~` doSomething;` \newline % Row Count 30 (+ 1) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-undo\}\} Loops / Control Flow Statements (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{~~~`\}` \newline % Row Count 1 (+ 1) ~~~`while (someEvaluation === true);` \newline % Row Count 3 (+ 2) {\bf{for .. in (objects)}} \newline % Row Count 4 (+ 1) ~~~`for (anItem in anObject) \{` \newline % Row Count 5 (+ 1) ~~~~~` doSomething With anItem; ` \newline % Row Count 7 (+ 2) ~~~~~~~~~`// will be the key` \newline % Row Count 9 (+ 2) ~~~~~` doSomethingWith Object{[}anItem{]};` \newline % Row Count 11 (+ 2) ~~~~~~~` // will be the value of that key` \newline % Row Count 13 (+ 2) ~~~`\}`% Row Count 14 (+ 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}{\{\{fa-spinner\}\} {\bf{"this"}}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\emph{coming soon}}% Row Count 1 (+ 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}{\{\{fa-comment-o\}\} String Methods, Properties \& Etc}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-lightbulb-o\}\} a string {\emph{can be coerced into an array}} so many array methods are applicable as well \newline % Row Count 3 (+ 3) \{\{bb\}\} \newline % Row Count 4 (+ 1) \{\{fa-angle-double-right\}\}`str.charAt(num) ` \newline % Row Count 5 (+ 1) • returns the character in str at index num \newline % Row Count 6 (+ 1) \{\{fa-angle-double-right\}\}`str.charCodeAt(num)` \newline % Row Count 7 (+ 1) • returns the unicode value of the char \newline % Row Count 8 (+ 1) \seqsplit{String.fromCharCode(num)`} \newline % Row Count 9 (+ 1) • returns the character with unicode's num \newline % Row Count 10 (+ 1) \{\{fa-angle-double-right\}\}`str.indexOf(char)` \newline % Row Count 11 (+ 1) • returns -1 if char not found in str \newline % Row Count 12 (+ 1) \{\{fa-angle-double-right\}\}`str.lastIndexOf(subString)` \newline % Row Count 14 (+ 2) • returns the index of the last occurrence of subString \newline % Row Count 16 (+ 2) \{\{fa-angle-double-right\}\}`str.length` \newline % Row Count 17 (+ 1) • returns length of str starting at 1 \newline % Row Count 18 (+ 1) \{\{fa-angle-double-right\}\}`str.match(pattern)` \newline % Row Count 19 (+ 1) • returns null if not found. returns an {\emph{array}} of all matches \newline % Row Count 21 (+ 2) \{\{fa-angle-double-right\}\}`str.match(/pattern/g)` \newline % Row Count 22 (+ 1) • provides global search of string \newline % Row Count 23 (+ 1) \{\{fa-angle-double-right\}\}`str.replace(old, new)` \newline % Row Count 24 (+ 1) \{\{fa-angle-double-right\}\}`str.search(pattern)` \newline % Row Count 25 (+ 1) • returns index of first match or -1 if not found \newline % Row Count 27 (+ 2) \{\{fa-angle-double-right\}\}`str.substring(index1, index2)` \newline % Row Count 29 (+ 2) • char at index1 is returned, index2 is not \newline % Row Count 30 (+ 1) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-comment-o\}\} String Methods, Properties \& Etc (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-angle-double-right\}\}`str.split(char)` \newline % Row Count 1 (+ 1) • returns an array of str split on char \newline % Row Count 2 (+ 1) \{\{fa-angle-double-right\}\}`str.substr(index1, num)` \newline % Row Count 4 (+ 2) • returns substring starting at index1 and running num letters \newline % Row Count 6 (+ 2) \{\{fa-angle-double-right\}\}`str.toLowerCase()` \newline % Row Count 7 (+ 1) \{\{fa-angle-double-right\}\}`str.toUpperCase()` \newline % Row Count 8 (+ 1) \{\{fa-angle-double-right\}\}`str.toLocaleLowerCase()` \newline % Row Count 10 (+ 2) • takes local language settings into account \newline % Row Count 11 (+ 1) \{\{fa-angle-double-right\}\}`str.toLocaleUpperCase()` \newline % Row Count 13 (+ 2) • ibid \newline % Row Count 14 (+ 1) \{\{fa-angle-double-right\}\}`Number(var/string/object)` \newline % Row Count 16 (+ 2) • converts to number. "true" converts to 1, etc \newline % Row Count 17 (+ 1) \{\{fa-angle-double-right\}\}`one.concat(two)` \newline % Row Count 18 (+ 1) • concatenates string/array one with two \newline % Row Count 19 (+ 1) \{\{fa-angle-double-right\}\}`JSON.stringify( )` \newline % Row Count 20 (+ 1) • converts a javascript value/object into a string \newline % Row Count 22 (+ 2) \{\{fa-angle-double-right\}\}`JSON.parse ( )` \newline % Row Count 23 (+ 1) • converts a JSON string into a javascript object% Row Count 25 (+ 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}{\{\{fa-calendar\}\} Date Methods}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-lightbulb-o\}\}{\bf{Note:}} Unix epoch is January 1, 1970 \newline % Row Count 2 (+ 2) \{\{fa-angle-double-right\}\}`var today = new Date();` \newline % Row Count 4 (+ 2) • creates date object for now \newline % Row Count 5 (+ 1) \{\{fa-angle-double-right\}\}`var someDate = new Date("june 30, 2035");` \newline % Row Count 7 (+ 2) • creates date object for arbitrary date \newline % Row Count 8 (+ 1) \{\{fa-angle-double-right\}\}`var today = Date.now();` \newline % Row Count 10 (+ 2) • returns number of milliseconds since epoch \newline % Row Count 11 (+ 1) \{\{fa-angle-double-right\}\}`parse()` \newline % Row Count 12 (+ 1) • returns milliseconds between date and Unix epoch. \newline % Row Count 14 (+ 2) \{\{fa-angle-double-right\}\}`toDateString()` \newline % Row Count 15 (+ 1) \{\{fa-angle-double-right\}\}`toTimeString()` \newline % Row Count 16 (+ 1) \{\{fa-angle-double-right\}\}`toLocalTimeString()`% Row Count 17 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{3.2 cm} x{4.8 cm} } \SetRowColor{DarkBackground} \mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-clock-o\}\} Get / Set Date Methods}} \tn % Row 0 \SetRowColor{LightBackground} • getDate() & • getHours() \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} • getDay() & • getMilliseconds() \tn % Row Count 3 (+ 2) % Row 2 \SetRowColor{LightBackground} • getFullYear() & • getMinutes() \tn % Row Count 5 (+ 2) % Row 3 \SetRowColor{white} • getMonth() & • getSeconds() \tn % Row Count 6 (+ 1) % Row 4 \SetRowColor{LightBackground} • getTime() & • getTimezoneOffset() \tn % Row Count 8 (+ 2) \hhline{>{\arrayrulecolor{DarkBackground}}--} \SetRowColor{LightBackground} \mymulticolumn{2}{x{8.4cm}}{\{\{fa-lightbulb-o\}\}{\bf{Note:}} there are also 'set' methods such as {\emph{setMonth()}}. \newline \{\{fa-lightbulb-o\}\}{\bf{Note:}} getDay and getMonth return numeric representations starting with 0.} \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}{\{\{fa-coffee\}\} Miscellaneous Instructions}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-angle-double-right\}\}`break;` \newline % Row Count 1 (+ 1) • breaks out of the current loop \newline % Row Count 2 (+ 1) \{\{fa-angle-double-right\}\}`continue;` \newline % Row Count 3 (+ 1) • stops current loop iteration and increments to next \newline % Row Count 5 (+ 2) \{\{fa-angle-double-right\}\}`isNaN(someVar)` \newline % Row Count 6 (+ 1) • returns true if not a number \newline % Row Count 7 (+ 1) \{\{fa-angle-double-right\}\}`isFinite(someVar)` \newline % Row Count 8 (+ 1) \{\{fa-angle-double-right\}\}`var aVar = anObject{[}anAttribute{]} || "nonesuch";` \newline % Row Count 10 (+ 2) • assigns a default value if none exists \newline % Row Count 11 (+ 1) \{\{fa-angle-double-right\}\}`var aVar = anEvaluation ? trueVal : falseVal;` \newline % Row Count 13 (+ 2) • ternary operator. assigns trueVal to aVar if anEvaluation is true, falseVal if not \newline % Row Count 15 (+ 2) \{\{fa-angle-double-right\}\}`delete anObject{[}anAttribute{]}` \newline % Row Count 17 (+ 2) \{\{fa-angle-double-right\}\}`(aProperty in anObject)` \newline % Row Count 19 (+ 2) • returns true or false if aProperty is a property of anObject \newline % Row Count 21 (+ 2) \{\{fa-angle-double-right\}\}`eval(someString)` \newline % Row Count 22 (+ 1) • evaluates a someString as if it was JavaScript. i.e. eval("var x = 2+3") returns 5% Row Count 24 (+ 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}{\{\{fa-cogs\}\} Array Methods (basic)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{\{\{fa-lightbulb-o\}\}{\bf{Note:}} index numbers for arrays start at 0 \newline % Row Count 2 (+ 2) \{\{fa-angle-double-right\}\}`arr.length()` \newline % Row Count 3 (+ 1) \{\{fa-angle-double-right\}\}`arr. push(val)` \newline % Row Count 4 (+ 1) • adds val to end of arr \newline % Row Count 5 (+ 1) \{\{fa-angle-double-right\}\}`arr. pop()` \newline % Row Count 6 (+ 1) • deletes last item in arr \newline % Row Count 7 (+ 1) \{\{fa-angle-double-right\}\}`arr. shift()` \newline % Row Count 8 (+ 1) • deletes first item in arr \newline % Row Count 9 (+ 1) \{\{fa-angle-double-right\}\}`arr.unshift(val)` \newline % Row Count 10 (+ 1) • adds val to front of arr \newline % Row Count 11 (+ 1) \{\{fa-angle-double-right\}\}`arr.reverse ()` \newline % Row Count 12 (+ 1) \{\{fa-angle-double-right\}\}`arr1.concat(arr2)` \newline % Row Count 13 (+ 1) • concatenates arr1 with arr2 \newline % Row Count 14 (+ 1) \{\{fa-angle-double-right\}\}`arr.join(char)` \newline % Row Count 15 (+ 1) • returns string of elements of arr joined by char \newline % Row Count 17 (+ 2) \{\{fa-angle-double-right\}\}`arr.slice(index1, index2)` \newline % Row Count 19 (+ 2) • returns a new array from arr from index1 (inclusive) to index2 (exclusive) \newline % Row Count 21 (+ 2) \{\{fa-angle-double-right\}\}`arr.splice(index, num, itemA, itemB,..)` \newline % Row Count 23 (+ 2) • alters arr. starting at index and through index+num, overwrites/adds itemsA..% Row Count 25 (+ 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}{\{\{fa-graduation-cap\}\} Definitions \& Lingo}} \tn % Row 0 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{Higher Order Functions}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}functions that accept {\emph{other functions}} as an argument} \tn % Row Count 3 (+ 3) % Row 1 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Scope}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}the set of variables, objects, and functions available within a certain block of code} \tn % Row Count 6 (+ 3) % Row 2 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{Callback}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}(also {\emph{event handler}}) a reference to executable code, or a piece of executable code, that is passed as an argument to other code.} \tn % Row Count 10 (+ 4) % Row 3 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{the \% operator}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}\% returns the remainder of a division such that "3 \% 2 = 1" as 2 goes into 3 once leaving 1. called the "remainder" or "modulo" operator.} \tn % Row Count 14 (+ 4) % Row 4 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{Composition}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}the ability to assemble complex behaviour by aggregating simpler behavior. {\emph{chaining}} methods via dot syntax is one example.} \tn % Row Count 18 (+ 4) % Row 5 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Chaining}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}also known as {\emph{cascading}}, refers to repeatedly calling one method after another on an object, in one continuous line of code.} \tn % Row Count 22 (+ 4) % Row 6 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{Naming Collisions}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}where two or more identifiers in a given namespace or a given scope cannot be unambiguously resolved} \tn % Row Count 26 (+ 4) % Row 7 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{DRY}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Don't Repeat Yourself} \tn % Row Count 28 (+ 2) % Row 8 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{ECMAScript}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}(also {\emph{ECMA-262}}) the specification from which the JavaScript implementation is derived. version 5.1 is the current release.} \tn % Row Count 32 (+ 4) \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-graduation-cap\}\} Definitions \& Lingo (cont)}} \tn % Row 9 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Arity}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}refers to the number of arguments an operator takes. ex: a binary function takes two arguments} \tn % Row Count 3 (+ 3) % Row 10 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{Currying}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}refers to the process of transforming a function with multiple arity into the same function with less {\emph{arity}}} \tn % Row Count 7 (+ 4) % Row 11 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Recursion}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}an approach in which a function calls itself} \tn % Row Count 9 (+ 2) % Row 12 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{Predicate}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}a calculation or other operation that would evaluate either to "true" or "false."} \tn % Row Count 12 (+ 3) % Row 13 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Asynchronous}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}program flow that allows the code following an {\emph{asynchronous}} statement to be executed immediately without waiting for it to complete first.} \tn % Row Count 16 (+ 4) % Row 14 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{Callback Hell}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}code thickly nested with callbacks within callback within callbacks.} \tn % Row Count 19 (+ 3) % Row 15 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Closure}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}a function with access to the global scope, it's parent scope (if there is one), and it's own scope. a closure may retain those scopes even after it's parent function has {\emph{returned.}}} \tn % Row Count 24 (+ 5) % Row 16 \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\bf{IIFE}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Immediately Invoked Function Expressions. {\emph{pronounced "iffy."}} a function that is invoked immediately upon creation. employs a unique syntax.} \tn % Row Count 28 (+ 4) % Row 17 \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Method}}} \tn \mymulticolumn{1}{x{8.4cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}an object property has a function for its value.} \tn % Row Count 31 (+ 3) \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{x{1.872 cm} x{2.16 cm} x{1.656 cm} x{1.512 cm} } \SetRowColor{DarkBackground} \mymulticolumn{4}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-lock\}\} Reserved Words}} \tn % Row 0 \SetRowColor{LightBackground} abstract & arguments & boolean & break \tn % Row Count 1 (+ 1) % Row 1 \SetRowColor{white} byte & case & catch & char \tn % Row Count 2 (+ 1) % Row 2 \SetRowColor{LightBackground} class & const & continue & \seqsplit{debugger} \tn % Row Count 3 (+ 1) % Row 3 \SetRowColor{white} default & delete & do & double \tn % Row Count 4 (+ 1) % Row 4 \SetRowColor{LightBackground} else & enum & eval & export \tn % Row Count 5 (+ 1) % Row 5 \SetRowColor{white} extends & false & final & finally \tn % Row Count 6 (+ 1) % Row 6 \SetRowColor{LightBackground} float & for & function & goto \tn % Row Count 7 (+ 1) % Row 7 \SetRowColor{white} if & implements & import & in \tn % Row Count 8 (+ 1) % Row 8 \SetRowColor{LightBackground} \seqsplit{instanceof} & int & \seqsplit{interface} & let \tn % Row Count 9 (+ 1) % Row 9 \SetRowColor{white} long & native & new & null \tn % Row Count 10 (+ 1) % Row 10 \SetRowColor{LightBackground} package & private & \seqsplit{protected} & public \tn % Row Count 11 (+ 1) % Row 11 \SetRowColor{white} return & short & static & super \tn % Row Count 12 (+ 1) % Row 12 \SetRowColor{LightBackground} switch & \seqsplit{synchronized} & this & throw \tn % Row Count 13 (+ 1) % Row 13 \SetRowColor{white} throws & transient & true & try \tn % Row Count 14 (+ 1) % Row 14 \SetRowColor{LightBackground} typeof & var & void & \seqsplit{volatile} \tn % Row Count 15 (+ 1) % Row 15 \SetRowColor{white} while & with & yield & \tn % Row Count 16 (+ 1) \hhline{>{\arrayrulecolor{DarkBackground}}----} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{\{\{fa-user-plus\}\} Prototype-based Inheritance}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\emph{coming soon}}% Row Count 1 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}