\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{Aleordoh (Martin Ordonez)}
\pdfinfo{
  /Title (conceptos-basicos-de-js.pdf)
  /Creator (Cheatography)
  /Author (Aleordoh (Martin Ordonez))
  /Subject (Conceptos Básicos de JS 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}{43A34C}
\definecolor{LightBackground}{HTML}{F3F9F3}
\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{Conceptos Básicos de JS Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Aleordoh (Martin Ordonez)} via \textcolor{DarkBackground}{\uline{cheatography.com/146230/cs/31593/}}}
\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}Aleordoh (Martin Ordonez) \\
  \uline{cheatography.com/martin-ordonez} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 4th May, 2022.\\
   Updated 14th May, 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{0.988 cm} x{4.332 cm} x{2.28 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Variables}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{var}} & Variable de {\emph{scope}} global. & var nombre = 'Martin' \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{let}} & Variable de {\emph{scope}} local. Solo tiene efecto entre los \{\}. & let numero = 2 \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{\bf{const}} & Contante su valor no cambia nunca. & const pi= 3.14 \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.9 cm} x{2.812 cm} x{2.888 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Funciones}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Función Declarada}} & Se declara usando la\{\{nl\}\} {\emph{estructura básica}}. & function sumar (a,b)\{\{\{nl\}\}return a+b;\{\{nl\}\}\} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
{\bf{Función Expresada}} & Se asigna como {\emph{valor}}\{\{nl\}\} de una {\emph{variable}}. & let calculadora \{\{nl\}\}= function (a,b)\{\{\{nl\}\}return a+b\{\{nl\}\}\} \tn 
% Row Count 9 (+ 5)
% Row 2
\SetRowColor{LightBackground}
{\bf{Invocación de funcion}} & Se indica los argumentos\{\{nl\}\} para las variables\{\{nl\}\} de la función respetando\{\{nl\}\} el orden. & function saludar(ap, nom)\{\{\{nl\}\}return 'Hola '+nombre+' '+apellido;\{\{nl\}\}\}\{\{nl\}\}function('Martin', 'Ordoñes');\{\{nl\}\}(retorna 'Hola Martin Ordoñez') \tn 
% Row Count 19 (+ 10)
% Row 3
\SetRowColor{white}
{\bf{Función Constructora}} & Permite armar un {\emph{molde}} para crear objetos. Por convención el nombre de la funcion constructora se escribe la primer letra con mayúsculas. & function Auto(marca, modelo)\{\{\{nl\}\}this.marca = marca;\{\{nl\}\}this.modelo=modelo;\{\{nl\}\}\} \tn 
% Row Count 30 (+ 11)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{1.9 cm} x{2.812 cm} x{2.888 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Funciones (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
{\bf{Instanciar un objeto}} & Para crea un objeto se usa la palabra New y se llama a la funcion. & let autoNuevo = new Auto('Ford','Falcon);' \tn 
% Row Count 5 (+ 5)
% Row 5
\SetRowColor{white}
{\bf{Arrrow Functions}} & Permite escribir las funciones con una {\emph{sintaxis}} mas {\emph{compacta}}. & let sumar =(a,b) =\textgreater{}a+b;\{\{nl\}\}(*)let esMultiplo =(a,b) =\textgreater{}\{\{\{nl\}\}let resto = a \% b;\{\{nl\}\}return resto==0;\{\{nl\}\}\} \tn 
% Row Count 13 (+ 8)
% Row 6
\SetRowColor{LightBackground}
{\bf{Callback}} & Es una {\emph{funcion}} que pasa como {\emph{parámetro}} de otra funcion. Puede estar definida o no. & setTimeout(function()\{     console.log('Holamundo')\},1000 )\{\{nl\}\}let miCallback= () =\textgreater{} \seqsplit{console.log('Hola} Mundo') \seqsplit{setTimeout(miCallback},1000); \tn 
% Row Count 23 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{({\emph{)En las }}arrow functions{\emph{ no hace falta escribir \{\} ni }}return* salvo que haya as de una línea de código.-}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.128 cm} x{2.736 cm} x{2.736 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{JSON}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{JSON.parse()}} & {\emph{Recibe}} una cadena de texto en formato JSON y la {\emph{devuelve}} en  formato JS & let datos = ('\{"nombre":"Martin", "edad";46\}';\{\{nl\}\}console.log \seqsplit{(JSON.parse(datos);} //Devuelve \{nombre: 'Martin', edad:46\} \tn 
% Row Count 9 (+ 9)
% Row 1
\SetRowColor{white}
\{\{nobreak\}\}{\bf{JSON.stringify()}} & {\emph{Recibe}} un dato de JS y {\emph{devuelve}} una cadena de texto JSON & let objeto=\{nombre: 'Martin', edad:46\}\{\{nl\}\}console.log(JSON.stringify(objeto); //Devuelve '\{"nombre":"Martin", "edad";46\}' \tn 
% Row Count 18 (+ 9)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{{\bf{{\emph{JavaScript Object Notation}}}} similar a un  {\emph{Objeto Literal}} se usa para intercambiar información entre sistemas. \{\{nl\}\}\{"texto": "mi texto",\{\{nl\}\}"numero":16,\{\{nl\}\}"array":{[}"uno","dos"{]},\{\{nl\}\}"booleano": true\}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.064 cm} x{3.268 cm} x{3.268 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Strings}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{.length}} & Retorna la{\emph{cantidad total de caracteres}}. & let saludo = 'Hola mundo!';\{\{nl\}\}console.log(saludo.length); // Devuelve 11 \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
{\bf{indexOf()}} & {\emph{Busca}} en el string, el string que recibe como parámetro. & \seqsplit{console.log(saludo.IndexOf(mundo));} //Devuelve 5 por la posición de la letra {\emph{'m'}} \tn 
% Row Count 10 (+ 5)
% Row 2
\SetRowColor{LightBackground}
{\bf{.slice()}} & {\emph{Corta}} el string y devuelve la parte donde se aplica. & \seqsplit{console.log(saludo.slice(0},4)); //Devuelve 'Hola' \tn 
% Row Count 14 (+ 4)
% Row 3
\SetRowColor{white}
{\bf{.trim()}} & {\emph{Elimina espacios}} al principio y final del string. & let saludo = '    Hola mundo!    '\{\{nl\}\}console.log(saludo.trim); //Devuelve 'Hola Mundo!' \tn 
% Row Count 20 (+ 6)
% Row 4
\SetRowColor{LightBackground}
{\bf{split()}} & Recibe un {\emph{string}} que usa ocmo separador y devuelve un {\emph{array}} con las partes del string. & \seqsplit{console.log(saludo.split('} ')); //Devuelve {[}'Hola','mundo!'{]} \tn 
% Row Count 26 (+ 6)
% Row 5
\SetRowColor{white}
{\bf{replace()}} & {\emph{Reemplaza}} una parte del string con otraº & \seqsplit{console.log(saludo.replace('mundo'},'pais')); //Devuelve 'Hola Pais!' \tn 
% Row Count 30 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{Los {\emph{string}} son un {\emph{array}} de caracteres. El índice al igual que en el array comienza en 0.\{\{nl\}\} P/Ej.: nombre=¡Hola!, soy Carli' //nombre{[}2{]} devuelve la letra {\bf{'o'}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.76 cm} x{3.344 cm} x{3.496 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Ciclos}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{for}} & Permite {\emph{Repetir Instrucciones}} de manera sencilla. & for ( let i=0 ; i\textless{}=x ; i=i+2)\{\{\{nl\}\}suma=suma+i;\{\{nl\}\}\} \tn 
% Row Count 4 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.216 cm} x{3.192 cm} x{3.192 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Arrays (métodos)}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{.length}} & {\emph{Longitud}} del array. Indica la cantidad de elementos que componen el array. & let colores= {[}'Rojo','Azul','Amarillo'{]};\{\{nl\}\}console.log(colores.length); //Devuelve 3 \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
{\bf{.pop()}} & {\emph{Elimina el ultimo}} elemento el array. Devuelve del elemento eliminado. & let ultimoColor = colores.pop();\{\{nl\}\}console.log(colores);//Devuelve {[}'Rojo','Azul'{]}\{\{nl\}\}console.log (ultimoColor); //Devuelve 'Amarillo' \tn 
% Row Count 15 (+ 9)
% Row 2
\SetRowColor{LightBackground}
{\bf{.push()}} & {\emph{Agrega}} uno o mas elementos al final del array. & \seqsplit{console.log(colores.push('Violeta'},'Gris')); //Devuelve {[}'Rojo','Azul','Amarillo','Violeta','Gris'{]}); \tn 
% Row Count 22 (+ 7)
% Row 3
\SetRowColor{white}
{\bf{.shift()}} & {\emph{Elimina el primer}} elemento el array. Devuelve el elemento eliminado. & let primerColor = colores.shift()\{\{nl\}\}console.log(colores);//Devuelve {[}'Azul','Amarillo''{]}\{\{nl\}\}console.log \seqsplit{(primerColor);//Devuelve} 'Rojo' \tn 
% Row Count 31 (+ 9)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{1.216 cm} x{3.192 cm} x{3.192 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Arrays (métodos) (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
{\bf{.unshift()}} & {\emph{Agrega}} uno o mas elementos al principio del array. & \seqsplit{consolo.log(colores}.unshift('Violeta'));\{\{nl\}\}//Devuelve {[}'Violeta','Rojo','Azul','Amarillo''{]}) \tn 
% Row Count 6 (+ 6)
% Row 5
\SetRowColor{white}
{\bf{.join()}} & {\emph{Une}} los elementos del array usando un separador. Se debe indicar el separador. & console.log \seqsplit{(colores.join());} //Devuelve 'Rojo', 'Azul', 'Amarillo'\{\{nl\}\}console.log \seqsplit{(colores.join(-));} //Devuelve \seqsplit{'Rojo-Azul-Amarillo'} \tn 
% Row Count 15 (+ 9)
% Row 6
\SetRowColor{LightBackground}
{\bf{indexOf()}} & {\emph{Busca}} en el array el parámetro indicado. Si no lo encuentra retorna -1.\{\{nl\}\}Siempre retorna el primer índice ocupado por el parámetro. & \seqsplit{console.log(colores.indexOf('Azul'));} //Devuelve 1 \tn 
% Row Count 24 (+ 9)
% Row 7
\SetRowColor{white}
{\bf{lastIndexOf}} & Similar a indexOf pero busca de {\emph{Derecha a Izquierda}}. & \seqsplit{console.log(colores.lastIndexOf('Amarillo'));} //Devuelve 0 \tn 
% Row Count 28 (+ 4)
% Row 8
\SetRowColor{LightBackground}
{\bf{.includes}} & {\emph{Busca}} en el array el parámetro indicado y retorna un {\emph{Booleano}}. & \seqsplit{console.log(colores}.includes('Azul'));\{\{nl\}\} //Devuelve truef \tn 
% Row Count 33 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{1.216 cm} x{3.192 cm} x{3.192 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Arrays (métodos) (cont)}}  \tn
% Row 9
\SetRowColor{LightBackground}
{\bf{.map()}} & Recibe una función (callback) como parámetro y devuelve un array modificado. & let numeros ={[}2,4,6{]};\{\{nl\}\}let doble = numeros.map(function(num)\{\{\{nl\}\}return 2*num;\})\{\{nl\}\} \seqsplit{console.log(doble);//} Devuelve {[}4,8,12\} \tn 
% Row Count 9 (+ 9)
% Row 10
\SetRowColor{white}
{\bf{filter()}} & Recorre el array y {\emph{filtra}} según la condición establecida. & let edades ={[}22,46,6,18,5,25,3{]};\{\{nl\}\} let mayores = edades.filter(function(edad)\{\{\{nl\}\}return edad\textgreater{}=18);\{\{nl\}\}\} \seqsplit{console.log(mayores)//} Devuelve {[}22,46,18,25{]} \tn 
% Row Count 19 (+ 10)
% Row 11
\SetRowColor{LightBackground}
{\bf{reduce()}} & Recorre el array y devuelve un único elemento.\{\{nl\}\}En este caso el callback recibe dos parámetros, un acumulador u el elemento actual que esta recorriendo. & let num = {[}5,7,16{]}\{\{nl\}\}suma=num.reduce(function(acumulador,elemento)\{\{\{nl\}\}return acumulador+elemento;\{\{nl\}\}) \seqsplit{console.log(suma);//} Muestra 28 \tn 
% Row Count 29 (+ 10)
% Row 12
\SetRowColor{white}
{\bf{forEach()}} & Tiene la finalidad de iterar sobre el array. Recibe un callBack y un index (no es necesario escribir el index salvo que se necesite a futuro). & let paises={[}'Argentina' , 'Colombia' , 'Chile' , 'Ecuador'{]};\{\{nl\}\}paises.forEach(function(pais)\{\{\{nl\}\}console.log(pais)\{\{nl\}\}\}) //Devuelve: Argentina, Colombia, Chile, Ecuador \tn 
% Row Count 40 (+ 11)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{{\emph{Las arrays se indican entre {[}{]} y son colecciones de datos ordenados.}} P/Ej.: colores={[}'Rojo','Azul','Amarillo'{]}\{\{nl\}\}{\emph{El índice de cada elemento comienza en 0.}} P/Ej.: colores{[}0{]} //devuelve Rojo y colores{[}2{]} //devuelve Amarillo.}  \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}{Destructuring}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Desestructurar un {\emph{Array}} u {\emph{Objeto Literal}} consiste en extraer los elementos del del mismo. Esta acción no modifica el array u objeto literal, solo extrae los datos \newline  \newline {\bf{{\emph{Array}}}} \newline let destinosDelMundo = {[}'Marruecos', 'Bariloche', 'Barcelona', 'China', 'Grecia'{]} \newline let{[},,,china{]}=destinosDelMundo \newline console.log(china)// Devuelve china \newline  \newline {\bf{{\emph{Objetos Literales}}}} \newline let auto  = \{marca: 'Ferrari', kilometros: 31, color: "Rojo"\}; \newline let \{ marca \} = auto; \newline console.log(marca) //Devuelve Ferrari} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.28 cm} x{2.66 cm} x{2.66 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Tipos de Datos}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{numéricos (number)}} & Números enteros o decimales (el separador decimal es el ".") & 1, 2, 7 , 4.5 \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
{\bf{cadenas de caracteres (string)}} & Cadena de texo se escriben ente " o ' & "Hola Mundo!" \{\{nl\}\} 'Hola Mundo!' \tn 
% Row Count 8 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{\bf{lógicos o booleanos}} & Sus valores pueden ser {\emph{true}} o {\emph{false}} & 6 \textless{} 8 = false \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
{\bf{objetos literales}} & Son {\emph{colecciones de datos}}.\{\{nl\}\}Se reconocen por estar encerrados entre \{\} & let datos=\{Nombre:'Javier',\{\{nl\}\}edad: 55,\{\{nl\}\}soltero: true\} \tn 
% Row Count 17 (+ 6)
% Row 4
\SetRowColor{LightBackground}
{\bf{arrays}} & {\emph{Coleccion de datos}} \{\{nl\}\}se declaran con {[}{]} & let Comidas={[}'Milanesa','Ravioles con salsa','budin de pan'{]} \tn 
% Row Count 22 (+ 5)
% Row 5
\SetRowColor{white}
{\bf{NaN}} ({\emph{Not a number}}) & Indica que un valor no puede ser evaluado como número & let \seqsplit{division='35'/2} = NaN \tn 
% Row Count 26 (+ 4)
% Row 6
\SetRowColor{LightBackground}
{\bf{Null}} (nulo) & Indica valor vacío o desconocido & let \seqsplit{temperatura=null} \tn 
% Row Count 29 (+ 3)
% Row 7
\SetRowColor{white}
{\bf{Undefined}} (sin definir) & Indica ausencia de valor & let saludo; \tn 
% Row Count 32 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.292 cm} x{3.116 cm} x{3.192 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Condicionales}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{if}} & Condicional Simple & let edad = 19;\{\{nl\}\}let acceso = '';\{\{nl\}\}if (edad\textless{}16)\{\{\{nl\}\}acceso = 'Prohibido';\{\{nl\}\}\} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
{\bf{else if}} & Agrega otra condición en el caso\{\{nl\}\}que la anterior sea falsa. \{\{nl\}\}Es opcional & let edad = 19;\{\{nl\}\}let acceso = '';\{\{nl\}\}if (edad\textless{}16)\{\{\{nl\}\}acceso = 'Prohibido;'\{\{nl\}\}\}else if(edad\textgreater{}=16 \&\& edad\textless{}=19)\{\{\{nl\}\}acceso = 'Acompañado de un mayor';\{\{nl\}\}\} \tn 
% Row Count 17 (+ 11)
% Row 2
\SetRowColor{LightBackground}
{\bf{else}} & Código a ejecutar si las condiciones\{\{nl\}\}anteriores son falsas.\{\{nl\}\}Es opcional & let edad = 19\{\{nl\}\}let acceso = ''\{\{nl\}\}if (edad\textless{}16)\{\{\{nl\}\}acceso = 'Prohibido;'\{\{nl\}\}\}else if(edad\textgreater{}=16 \&\& edad\textless{}=19)\{\{\{nl\}\}acceso = 'Acompañado de un mayor';\{\{nl\}\}\}else\{\{\{nl\}\}acceso = 'Permitido';\{\{nl\}\}\} \tn 
% Row Count 30 (+ 13)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{1.292 cm} x{3.116 cm} x{3.192 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Condicionales (cont)}}  \tn
% Row 3
\SetRowColor{LightBackground}
{\bf{ if ternario}} & Se escribe de forma {\emph{horizontal}}. & 4 \textgreater{}10 ? 'EL 4 es mas grande' : 'El 10 es mas grande' \tn 
% Row Count 4 (+ 4)
% Row 4
\SetRowColor{white}
{\bf{Switch}} & Esta compuesto por una expresión a evaluar, seguida de diferentes casos que terminan en {\emph{break}}. & switch (fruta) \{\{\{nl\}\}case 'manzana':\{\{nl\}\}case 'pera':\{\{nl\}\}console.log('Mas rica es la Naranja!);\{\{nl\}\}break;\{\{nl\}\}default:\{\{nl\}\}console.log('Que fruta es?');\{\{nl\}\}break;\{\{nl\}\}\} \tn 
% Row Count 16 (+ 12)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.672 cm} x{2.964 cm} x{2.964 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Operadores}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{De Asignación}} (=) & Asigna un valor a una variable & let color = 'rojo' \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
{\bf{Aritméticos}} & Suma\{\{nl\}\}Resta\{\{nl\}\}Multiplicación\{\{nl\}\}División\{\{nl\}\}Incremento\{\{nl\}\}Decrementeo\{\{nl\}\}Módulo (devuelde el resto de una división) & 15+6 = 21\{\{nl\}\}15-6=9\{\{nl\}\}2*6=12\{\{nl\}\}21/3=7\{\{nl\}\}15++=16\{\{nl\}\}17-{}-=16\{\{nl\}\}15\%2=1 \tn 
% Row Count 12 (+ 9)
% Row 2
\SetRowColor{LightBackground}
{\bf{Comparación}} & Igualdad simple\{\{nl\}\}Desigualdad simple\{\{nl\}\}Igualdad estricta\{\{nl\}\}Desigualdad estricta\{\{nl\}\}Mayor\{\{nl\}\}Mayor igual\{\{nl\}\}Menor\{\{nl\}\}Menor igual & 15==15 -\textgreater{} True\{\{nl\}\}10!=15-\textgreater{}true\{\{nl\}\}5==='15'-\textgreater{}false\{\{nl\}\}10!=='10'-\textgreater{}true\{\{nl\}\}15\textgreater{}15-\textgreater{}false\{\{nl\}\}15\textgreater{}=15-\textgreater{}true\{\{nl\}\}10\textless{}15-\textgreater{}true\{\{nl\}\}15\textless{}=15-\textgreater{}true \tn 
% Row Count 22 (+ 10)
% Row 3
\SetRowColor{white}
{\bf{Lógicos}} & Y: and (\&\&)//Y\{\{nl\}\}O: or (||)\{\{nl\}\}No es:not (!) & 10\textgreater{}15 \&\& 5\textless{}3-\textgreater{} false\{\{nl\}\}10\textgreater{}15||5\textless{}3-\textgreater{}true\{\{nl\}\}!10\textless{}15-\textgreater{}false \tn 
% Row Count 27 (+ 5)
% Row 4
\SetRowColor{LightBackground}
{\bf{Concatenación}} & Une distintos tipos de datos. Siempre devuelve un string & let fila = 'M';\{\{nl\}\}let asiento=7;\{\{nl\}\}let ubicacion=fila + asiento -\textgreater{} M7 como string \tn 
% Row Count 33 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{1.368 cm} x{3.116 cm} x{3.116 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Objeto Date}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{.getDay()}} & Nos devuelve el día de la semana, donde 0 es Domingo y Sábado 7 & let miFecha = fechaActual.getDay()\{\{nl\}\}console.log(fechaActual);// Devuelve 5 (hoy es viernes) \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
{\bf{getDate()}} & Nos devuelve el día del mes. & let miFecha = fechaActual.getDate()\{\{nl\}\} \seqsplit{console.log(fechaActual);//Devuelve} 15 (hoy es Viernes 15 de Abril) \tn 
% Row Count 13 (+ 7)
% Row 2
\SetRowColor{LightBackground}
{\bf{getMonth()}} & Nos devuelve el número de mes del año. Tener en cuenta que enero = 0 y diciembre = 11 & et miFecha = fechaActual.getMonth()\{\{nl\}\} \seqsplit{console.log(fechaActual);//Devuelve} 3 (abril) \tn 
% Row Count 19 (+ 6)
% Row 3
\SetRowColor{white}
{\bf{getFullYear()}} & Nos devuelve el año actual. & let miFecha = fechaActual.getFullYear();\{\{nl\}\} \seqsplit{console.log(miFecha);//} Devuelve 2022 \tn 
% Row Count 25 (+ 6)
% Row 4
\SetRowColor{LightBackground}
{\bf{new Date()}} & Permite {\emph{crear}} una fecha. si no se indica nada devolver´\textless{} la fecha actual & let miCumple = new Date(1975,08,06);\{\{nl\}\}console.log(miCumple);// Devuelve \seqsplit{1975-09-06T03:00:00}.000Z(**) \tn 
% Row Count 32 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{Antes de usar el Objeto Date es necesario crear una instancia del mismo en una variable. P/Ej.:\{\{nl\}\}let fechaActual = new Date;\{\{nl\}\}console.log(fechaActual) // Devuelve 2022-04-15T12:25:00.538Z \newline (**)Notese que el mes en la fecha ingresada es 08 y la instancia devolvió 09, sumando automáticamente 1 al mes.-}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.128 cm} x{2.736 cm} x{2.736 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Objetos Literales}}  \tn
% Row 0
\SetRowColor{LightBackground}
\{\{nobreak\}\}{\bf{objeto.propiedad}} & Accedemos al valor de una propiedad del objeto. & \seqsplit{console.log(tenista.activo);} //Devuelve true \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
{\bf{Metodo}} & Cuando una {\emph{propiedad}} almacena una {\emph{función}}, a esa función la llamamos {\emph{método}}. & let tenista =\{ \{\{nl\}\}nombre: 'Roger',\{\{nl\}\}edad: 38,\{\{nl\}\}activo: true,\{\{nl\}\}saludar: function()\{\{\{nl\}\}return '¡Hola! me llamo Roger'\}\{\{nl\}\}\} \tn 
% Row Count 15 (+ 11)
% Row 2
\SetRowColor{LightBackground}
{\bf{objeto.metodo()}} & {\emph{Ejecuta}} el método {\emph{(funcion)}} almacenado en un objeto. & \seqsplit{console.log(tenista.saludar());} //Devuelve '¡Hola! me llamo Roger' \tn 
% Row Count 20 (+ 5)
% Row 3
\SetRowColor{white}
{\bf{this.propiedad}} & {\emph{Accedemos}} al valor de cada propiedad del objeto. & let tenista =\{ \{\{nl\}\}nombre: 'Roger',\{\{nl\}\}edad: 38,\{\{nl\}\}activo: true,\{\{nl\}\}saludar: function()\{\{\{nl\}\}return '¡Hola! me llamo ' + this.nombre\}\{\{nl\}\}\}\{\{nl\}\}console.log(tenista.saludar()); //Devuelve '¡Hola! me llamo Roger' \tn 
% Row Count 36 (+ 16)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{Un Objeto es una estructura de datos.\{\{nl\}\}let tenista =\{ \{\{nl\}\}nombre: 'Roger',\{\{nl\}\}edad: 38,\{\{nl\}\}activo: true,\{\{nl\}\}\}\{\{nl\}\}Donde: {\bf{nombre, edad y activo}} son {\bf{{\emph{propiedades}}}} y {\bf{'roger', 38 y true}} los {\bf{{\emph{Valores}}}} de esas propiedades.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.204 cm} x{2.66 cm} x{2.736 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Spread operator y Rest parameter}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Spread operator}} en arrays & Permite {\emph{expadir}} los elementos de un elemento iterable dentro de otro. & let dias1 = {[}'Lunes','Martes','Miercoles'{]};\{\{nl\}\} let dias2= {[}'Jueves','Viernes','Sabado','Domingo'{]};\{\{nl\}\} let semana = {[}...dias1,...dias2{]};\{\{nl\}\} \seqsplit{console.log(semana);//} Devuelve {[}   'Lunes',   'Martes',   'Miercoles',   'Jueves',   'Viernes',   'Sabado',   'Domingo' {]} \tn 
% Row Count 20 (+ 20)
% Row 1
\SetRowColor{white}
{\bf{Spread operator}} en objetos & {\emph{Idem}} & let auto=\{marca: 'Ferrari',anio:'2019'\};\{\{nl\}\} let piloto=\{nombre:'Vettel',edad:'31',...auto\};\{\{nl\}\} \seqsplit{console.log(piloto)} //devuelve \{ nombre: 'Vettel', edad: '31', marca: 'Ferrari', anio: '2019' \} \tn 
% Row Count 34 (+ 14)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{2.204 cm} x{2.66 cm} x{2.736 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Spread operator y Rest parameter (cont)}}  \tn
% Row 2
\SetRowColor{LightBackground}
{\bf{Spread operator}} en funciones & {\bf{ver}} & {\bf{ver}} \tn 
% Row Count 3 (+ 3)
% Row 3
\SetRowColor{white}
{\bf{Rest Parameter}} & Usando el operador {\bf{"..."}} como último parámetro de una función, permite capturar los parámetros adicionales de la función. & function sumar(...numeros)\{\{\{nl\}\}return \seqsplit{numeros.reduce((acum},num) =\textgreater{} acum += num)\{\{nl\}\}\}\{\{nl\}\}console.log(sumar(6,3)) // Devuelve 9 \tn 
% Row Count 13 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}