\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{sathiyapriyan\_j} \pdfinfo{ /Title (javascript.pdf) /Creator (Cheatography) /Author (sathiyapriyan\_j) /Subject (Javascript Cheat Sheet) } % Lengths and widths \addtolength{\textwidth}{6cm} \addtolength{\textheight}{-1cm} \addtolength{\hoffset}{-3cm} \addtolength{\voffset}{-2cm} \setlength{\tabcolsep}{0.2cm} % Space between columns \setlength{\headsep}{-12pt} % Reduce space between header and content \setlength{\headheight}{85pt} % If less, LaTeX automatically increases it \renewcommand{\footrulewidth}{0pt} % Remove footer line \renewcommand{\headrulewidth}{0pt} % Remove header line \renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit % This two commands together give roughly % the right line height in the tables \renewcommand{\arraystretch}{1.3} \onehalfspacing % Commands \newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour \newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols \newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns \newcommand{\tn}{\tabularnewline} % Required as custom column type in use % Font and Colours \definecolor{HeadBackground}{HTML}{333333} \definecolor{FootBackground}{HTML}{666666} \definecolor{TextColor}{HTML}{333333} \definecolor{DarkBackground}{HTML}{0800ED} \definecolor{LightBackground}{HTML}{EFEFFD} \renewcommand{\familydefault}{\sfdefault} \color{TextColor} % Header and Footer \pagestyle{fancy} \fancyhead{} % Set header to blank \fancyfoot{} % Set footer to blank \fancyhead[L]{ \noindent \begin{multicols}{3} \begin{tabulary}{5.8cm}{C} \SetRowColor{DarkBackground} \vspace{-7pt} {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}} } \end{tabulary} \columnbreak \begin{tabulary}{11cm}{L} \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Javascript Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{sathiyapriyan\_j} via \textcolor{DarkBackground}{\uline{cheatography.com/182774/cs/39201/}}} \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}sathiyapriyan\_j \\ \uline{cheatography.com/sathiyapriyan-j} \\ \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, 2023.\\ Updated 14th June, 2023.\\ 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*}{4} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{01 . Into to javascrtipt}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{• Js is a plAnd it allows developers to add dynamic and interactive effects to any webpage. \newline % Row Count 2 (+ 2) • We also use it to manipulate the content or the CSS, load data from remote servers ,and really build entire applications in the browser, \newline % Row Count 5 (+ 3) • There has been a huge update to the language in 2015, which is officially called ES2015, but most people just call it ES6,% Row Count 8 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Conditional operator}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{syntax: condition:true statement : false statement \newline \newline const age = 88; \newline age \textgreater{}= 18 ? console.log("you can") :console.log("you wont ");} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Template literals}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{const firstname = "Sathiya"; \newline const firstname1 = "SathiyaPriyan"; \newline const \$new = `\$\{firstname\} is a guy `; \newline console.log(\$new);} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{Template literals - use varible in a string , use multiple line is easy} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{p1-use stright mode}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{"use strict"; \newline % Row Count 1 (+ 1) -\textgreater{} Use certian things and visible errors \newline % Row Count 2 (+ 1) -\textgreater{} and like that write more secure code. And when secure, I mean that strict mode \newline % Row Count 4 (+ 2) makes it easier for us developers to avoid accidental error% Row Count 6 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Array methods}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{// Adds \newline % Row Count 1 (+ 1) push - add an element in a end \newline % Row Count 2 (+ 1) unshift(): Adds elements to the beginning of an array. \newline % Row Count 4 (+ 2) //Remove \newline % Row Count 5 (+ 1) pop - remove last element of an array \newline % Row Count 6 (+ 1) shift(): Removes and returns the first element of an array. \newline % Row Count 8 (+ 2) //Find index \newline % Row Count 9 (+ 1) indexOf(): Returns the index of the first occurrence of a specified element ; minus value mean does not exit \newline % Row Count 12 (+ 3) //Check array exit or not \newline % Row Count 13 (+ 1) includes(): Checks if an array contains a specified element. - immutable% Row Count 15 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Link js file}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{\textless{}script src="index.js"\textgreater{}\textless{}/script\textgreater{}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{Link from another page , Script in same page simple use script tag} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Value and variable}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{Camal case% Row Count 1 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Type Conversion and Coercion}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{nan - not a valid number or not a number \newline % Row Count 1 (+ 1) Js - convert only string , boolen , number not other type% Row Count 3 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{True valuse and false value}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{5 falsy values in js \newline % Row Count 1 (+ 1) 0,'',undefined , null , nan% Row Count 2 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Version of javascript}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{p{3.833cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/sathiyapriyan-j_1686641632_Screenshot from 2023-06-13 03-33-21.png}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{p2-Function declaration and expression}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{"use strict"; \newline \newline // Function declaration \newline \newline function calAge1(birthYear) \{ \newline const age = 2029 - birthYear; \newline return age; \newline \} \newline console.log(calAge1(2003)); \newline \newline // Anonymous function - expressions is a vaule \newline const me = function (birthYear) \{ \newline const age = 2029 - birthYear; \newline return age; \newline \};} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Object}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{// and it's called the object literal Syntax \newline \newline const spObject = \{ \newline firstName: "sathiya", \newline lastName: "sp", \newline age: 27, \newline destinitation: "student", \newline habits: {[}"productivity", "time management"{]}, \newline \};} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{In arrays there is no way of giving these elements a name. And so we can't reference them by name, but only by their order number in which they appear in the array. \newline \newline So we solve that problem we have another data structure in JavaScript, which is object \newline \newline object is for unstructured data \newline array is for ordered data} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{3 ways iof declaring a javascript}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{let , const is a modern way of declaring variable var is a old way of declarig of js \newline % Row Count 2 (+ 2) -{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-- \newline % Row Count 4 (+ 2) let age = 0 // Varaibale declare \newline % Row Count 5 (+ 1) age = 1 // it is a mutated variable or reasign variable \newline % Row Count 7 (+ 2) -{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-- \newline % Row Count 9 (+ 2) let vs const -\textgreater{} const is a best practice . \newline % Row Count 10 (+ 1) The reason for this is that it's a good practice \newline % Row Count 11 (+ 1) to have as little variable mutations or variable changes as possible because changing variables introduces a potential bug \newline % Row Count 14 (+ 3) -{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-{}-- \newline % Row Count 16 (+ 2) var is completely avoid \newline % Row Count 17 (+ 1) or declare nothing - bad practice% Row Count 18 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Equality operator}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{The strict equality operator (`===`) compares two values without type coercion \newline % Row Count 2 (+ 2) while the loose equality operator (`==`) compares values with type coercion in JavaScript.is full of really weird rules and behaviors. this can introduce many hard \newline % Row Count 6 (+ 4) to find bugs into our code. clean code% Row Count 7 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Version-pic-2}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{p{3.833cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/sathiyapriyan-j_1686642180_Screenshot from 2023-06-13 03-42-06.png}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{p3-Arrow functions}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{syntax : let func = (arg1, arg2, ..., argN) =\textgreater{} expression \newline \newline It is introuded in ES6 vesrion} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Javascript dot vs bracket}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{\seqsplit{https://codepen.io/pen/tour/welcome/start?editors=1010}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Put into any via loops}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{const yearsfa = {[}1991, 2007, 1967, 2020{]}; \newline \newline const age = {[}{]}; \newline const newArray = {[}{]}; \newline function calAge(\$var) \{ \newline return 2023 - \$var; \newline \} \newline for (let count = 0; count \textless{}= years.length; count++) \{ \newline console.log((age{[}count{]} = calAge(years{[}count{]}))); \newline newArray.push(age); \newline \} \newline console.log("-{}-"); \newline console.log(newArray); \newline \newline console.log(calAge(2003)); \newline for (let count = 0; count \textless{} array.length; count++) \{ \newline const element = array{[}count{]}; \newline \}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{To check what kind of data type}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{typeof% Row Count 1 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Data types}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{p{3.833cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/sathiyapriyan-j_1686624499_Screenshot from 2023-06-12 22-48-00.png}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{NULL is undefined data type} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{operator}} \tn \SetRowColor{white} \mymulticolumn{1}{x{3.833cm}}{Check c notes \newline % Row Count 1 (+ 1) Operator precedence So basically the order in which operators are executed.% Row Count 3 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Get input from webpage}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{const \$colour = prompt(`Tell your \newline most favourate colour`); \newline \newline console.log(\$colour);} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Version-pic-3}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{p{3.833cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/sathiyapriyan-j_1686642456_Screenshot from 2023-06-13 03-47-20.png}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{\seqsplit{https://kangax.github.io/compat-table/es6/}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{3.833cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Calling function inside another functions}} \tn \SetRowColor{LightBackground} \mymulticolumn{1}{x{3.833cm}}{function cutFruit(fruit) \{ \newline return fruit * 4; \newline \} \newline \newline function fruitProcessor(apples, oranges) \{ \newline const appleP = cutFruit(apples); \newline const orangesP = cutFruit(oranges); \newline const juice = `Juice with \$\{apples\} apples and \$\{oranges\} oranges`; \newline return juice; \newline \}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}