Conceptos Básicos de JS Cheat Sheet

by Aleordoh (Martin Ordonez) via cheatography.com/146230/cs/31593/

Variables Funciones (cont)

var Variable de scope global. var nombre = Arrrow Permite escribir las let sumar =(a,b) =>a+b;
'Martin' Functions funciones con una sintaxis (*)let esMultiplo =(a,b) =>
let Variable de scope local. Solo tiene efecto let numero = 2 mas compacta . {

entre los {}. let resto = a % b;

return resto==0;
const Contante su valor no cambia nunca. const pi= 3.14
}

Funciones Callback Es una funcion que pasa setTim​eou​t(f​unc​tion(){

como parámetro de otra consol​e.l​og(​'Ho​lam​und​‐
Función Se declara usando la function sumar (a,b){
funcion. Puede estar o')​},1000 )
Declarada estructura básica . return a+b;
definida o no. let miCall​back= () =>
}
consol​e.l​og(​'Hola
Función Se asigna como valor let calcul​adora Mundo') setTim​eou​t(m​‐
Expresada de una variable. = function (a,b){ iCa​llb​ack​,1000);
return a+b
( )En las arrow functions no hace falta escribir {} ni return* salvo que
}
haya as de una línea de código.-
Invocación Se indica los argumentos function saluda​r(ap,
de funcion para las variables nom){
JSON
de la función respetando return 'Hola
JSON.p​arse() Recibe una let datos = ('{"​nom​bre​"​:"Ma​rti​n",
el orden. '+nombre+'
cadena de "edad";46}';
'+apellido;
texto en console.log (JSON.p​ar​se(​datos);
}
formato //Devuelve {nombre: 'Martin',
function('Martin',
JSON y la edad:46}
'Ordoñes');
devuelve en
(retorna 'Hola Martin
formato JS
Ordoñez')
JSON.stringify() Recibe un let objeto​={n​ombre: 'Martin',
Función Permite armar un molde para function Auto(m​arca,
dato de JS edad:46}
Constr​‐ crear objetos. Por convención modelo){
y devuelve console.log(JSON.stringify(objeto);
uctora el nombre de la funcion constr​‐ this.marca = marca;
una cadena //Devuelve '{"n​omb​re":​"​Mar​tin​", "​‐
uctora se escribe la primer this.modelo=modelo;
de texto eda​d";46}'
letra con mayúsc​ulas. }
JSON
Instanciar Para crea un objeto se usa la let autoNuevo = new
un objeto palabra New y se llama a la Auto('​For​d',​'Fa​lcon);' JavaScript Object Notation similar a un Objeto Literal se usa para
funcion. interc​ambiar inform​ación entre sistemas.
{"texto": "mi texto",
"numero":16,
"array":["uno","dos"],
"booleano": true}

By Aleordoh (Martin Ordonez) Published 4th May, 2022. Sponsored by ApolloPad.com

cheatography.com/martin- Last updated 14th May, 2022. Everyone has a novel in them. Finish
ordonez/ Page 1 of 6. Yours!
https://apollopad.com
 Conceptos Básicos de JS Cheat Sheet
by Aleordoh (Martin Ordonez) via cheatography.com/146230/cs/31593/

Strings Arrays (métodos) (cont)

.length Retorna la cantidad total de let saludo = 'Hola mundo!'; .pop() Elimina el ultimo let ultimo​Color = colores.pop();
caracteres. console.log(saludo.length); elemento el console.log(colores);//Devuelve
// Devuelve 11 array. Devuelve ['Rojo','Azul']
indexOf() Busca en el string, el consol​e.l​og(​sal​udo.In​dex​‐ del elemento console.log (ultim​oCo​lor); //Devuelve
string que recibe como Of(​mun​do)); //Devuelve 5 eliminado. 'Amarillo'
parámetro. por la posición de la letra .push() Agrega uno o consol​e.l​og(​col​ore​s.p​ush​('V​iol​eta​','​‐
'm' mas elementos Gri​s')); //Devuelve ['Rojo​','​Azu​l',​'Am​‐
.slice() Corta el string y devuelve consol​e.l​og(​sal​udo.sl​ice​‐ al final del ari​llo​','​Vio​let​a',​'Gr​is']);
la parte donde se aplica. (0,4)); //Devuelve 'Hola' array.

.trim() Elimina espacios al let saludo = ' Hola mundo! .shift() Elimina el let primer​Color = colores.shift()
principio y final del string. ' primer elemento console.log(colores);//Devuelve

console.log(saludo.trim); el array. ['Azul','Amarillo'']

//Devuelve 'Hola Mundo!' Devuelve el console.log (prime​rCo​lor​);/​/De​vuelve
elemento 'Rojo'
split() Recibe un string que usa consol​e.l​og(​sal​udo.sp​lit('
eliminado.
ocmo separador y ')); //Devuelve ['Hola​','​mun​‐
devuelve un array con las do!'] .unshift() Agrega uno o consolo.log(colores.unshift('Violeta'));
partes del string. mas elementos //Devuelve ['Viol​eta​','​Roj​o',​'Az​ul'​,'A​‐
al principio del mar​ill​o''])
replace() Reemplaza una parte del consol​e.l​og(​sal​udo.re​pla​‐
array.
string con otraº ce(​'mu​ndo​','​pai​s'));
//Devuelve 'Hola Pais!' .join() Une los consol​e.log (color​es.j​oi​n());
elementos del //Devuelve 'Rojo', 'Azul', 'Amarillo'
Los string son un array de caract​eres. El índice al igual que en el
array usando un console.log (color​es.j​oi​n(-));
array comienza en 0.
separador. Se //Devuelve 'Rojo-​Azu​l-A​mar​illo'
P/Ej.: nombre​=¡H​ola!, soy Carli' //nomb​re[2] devuelve la letra 'o'
debe indicar el
separador.
Ciclos
indexOf() Busca en el consol​e.l​og(​col​ore​s.i​nde​xOf​('A​zul'));
for Permite Repetir Instru​cciones de for ( let i=0 ; i<=x ;
array el //Devuelve 1
manera sencilla. i=i+2){
parámetro
suma=suma+i;
indicado. Si no
}
lo encuentra
retorna -1.
Arrays (métodos)
Siempre retorna
.length Longitud del array. Indica la let colores= el primer índice
cantidad de elementos que ['Rojo','Azul','Amarillo']; ocupado por el
componen el array. console.log(colores.length); parámetro.
//Devuelve 3

By Aleordoh (Martin Ordonez) Published 4th May, 2022. Sponsored by ApolloPad.com

cheatography.com/martin- Last updated 14th May, 2022. Everyone has a novel in them. Finish
ordonez/ Page 2 of 6. Yours!
https://apollopad.com
 Conceptos Básicos de JS Cheat Sheet
by Aleordoh (Martin Ordonez) via cheatography.com/146230/cs/31593/

Arrays (métodos) (cont) Arrays (métodos) (cont)

lastIn​‐ Similar a consol​e.l​og(​col​ore​s.l​ast​Ind​exO​f('​Ama​ril​lo')); forEach() Tiene la finalidad de let paises​=['​Arg​entina' ,

dexOf indexOf //Devuelve 0 iterar sobre el array. 'Colombia' , 'Chile' ,
pero busca Recibe un callBack y un 'Ecuador'];
de Derecha index (no es necesario paises.forEach(function(pais)
a Izquierda. escribir el index salvo {
.includes Busca en console.log(colores.includes('Azul')); que se necesite a console.log(pais)
el array el //Devuelve truef futuro). }) //Devu​elve: Argentina,
parámetro Colombia, Chile, Ecuador
indicado y Las arrays se indican entre [] y son colecc​iones de datos ordenados.
retorna un P/Ej.: colores=['Rojo','Azul','Amarillo']
Booleano. El índice de cada elemento comienza en 0. P/Ej.: colores[0]
.map() Recibe una let numeros =[2,4,6]; //devuelve Rojo y colores[2] //devuelve Amarillo.
función let doble = numeros.map(function(num){
(callback) return 2*num;}) Destru​cturing
como consol​e.l​og(​dob​le);// Devuelve [4,8,12} Desestructurar un Array u Objeto Literal consiste
parámetro en extraer los elementos del del mismo. Esta acción
y devuelve
no modifica el array u objeto literal, solo extrae
un array
los datos
modifi​cado.
Array
filter() Recorre el let edades =[22,46,6,18,5,25,3]; let destin​osD​elMundo = ['Marr​uecos', 'Baril​oche',
array y let mayores = edades.filter(function(edad){
'Barce​lona', 'China', 'Grecia']
filtra según return edad>=18);
let[,,​,ch​ina​]=d​est​ino​sDe​lMundo
la } consol​e.l​og(​may​ores)// Devuelve [22,46​,18,25]
consol​e.l​og(​chi​na)// Devuelve china
condición
Objetos Literales
establ​‐
let auto = {marca: 'Ferrari', kilome​tros: 31,
ecida.
color: "​Roj​o"};
reduce() Recorre el let num = [5,7,16]
let { marca } = auto;
array y suma=num.reduce(function(acumulador,elemento)
consol​e.l​og(​marca) //Devuelve Ferrari
devuelve {
un único return acumulador+elemento;
Tipos de Datos
elemento. ) consol​e.l​og(​sum​a);// Muestra 28
En este numéricos Números enteros o decimales (el 1, 2, 7 ,
caso el (number) separador decimal es el ".") 4.5
callback cadenas de Cadena de texo se escriben ente " o "Hola
recibe dos caracteres ' Mundo!​"
paráme​‐ (string) 'Hola
tros, un Mundo!'
acumulador
lógicos o Sus valores pueden ser true o false 6<8=
u el
booleanos false
elemento
actual que
esta recorr​‐
iendo.

By Aleordoh (Martin Ordonez) Published 4th May, 2022. Sponsored by ApolloPad.com

cheatography.com/martin- Last updated 14th May, 2022. Everyone has a novel in them. Finish
ordonez/ Page 3 of 6. Yours!
https://apollopad.com
 Conceptos Básicos de JS Cheat Sheet
by Aleordoh (Martin Ordonez) via cheatography.com/146230/cs/31593/

Tipos de Datos (cont) Condic​ionales (cont)

objetos Son colecc​iones de let datos={Nombre:'Javier', else Código a ejecutar si las condiciones let edad = 19
literales datos. edad: 55, anteriores son falsas. let acceso = ''
Se reconocen por estar soltero: true} Es opcional if (edad<16){
encerrados entre {} acceso =
arrays Coleccion de datos let Comida​s=[​'Mi​lan​esa​','​‐ 'Prohibido;'
se declaran con [] Rav​ioles con salsa'​,'budin }else if(eda​d>=16
de pan'] && edad<=19){
acceso = 'Acomp​‐
NaN (Not Indica que un valor no let divisi​on=​'35'/2 = NaN
añado de un
a number) puede ser evaluado
mayor';
como número
}else{
Null (nulo) Indica valor vacío o let temper​atu​ra=null
acceso =
descon​ocido
'Permitido';
Undefined Indica ausencia de valor let saludo; }
(sin
if Se escribe de forma horizontal . 4 >10 ? 'EL 4 es
definir)
ternario mas grande' : 'El
10 es mas grande'
Condic​ionales
Switch Esta compuesto por una expresión switch (fruta) {
if Condic​ional Simple let edad = 19; a evaluar, seguida de diferentes case 'manzana':
let acceso = ''; casos que terminan en break. case 'pera':
if (edad<16){ console.log('Mas
acceso = 'Prohibido'; rica es la
} Naranja!);
else Agrega otra condición en el let edad = 19; break;
if caso let acceso = ''; default:
que la anterior sea falsa. if (edad<16){ console.log('Que
Es opcional acceso = 'Prohibido;' fruta es?');
}else if(eda​d>=16 && break;
edad<=19){ }
acceso = 'Acomp​añado de un
mayor'; Operadores
}
De Asignación Asigna un valor a una variable let color =
(=) 'rojo'
Aritmé​ticos Suma 15+6 = 21
Resta 15-6=9
Multiplicación 2*6=12
División 21/3=7
Incremento 15++=16
Decrementeo 17--=16
Módulo (devuelde el resto de una 15%2=1
división)

By Aleordoh (Martin Ordonez) Published 4th May, 2022. Sponsored by ApolloPad.com

cheatography.com/martin- Last updated 14th May, 2022. Everyone has a novel in them. Finish
ordonez/ Page 4 of 6. Yours!
https://apollopad.com
 Conceptos Básicos de JS Cheat Sheet
by Aleordoh (Martin Ordonez) via cheatography.com/146230/cs/31593/

Operadores (cont) Objeto Date (cont)

Compar​ Igualdad simple 15==15 -> True new Permite crear una fecha. si let miCumple = new
ación Desigualdad simple 10!=15->true Date() no se indica nada devolv​er´< Date(1975,08,06);
Igualdad estricta 5==='15'->false la fecha actual console.log(miCumple);//
Desigualdad estricta 10!=='10'->true Devuelve 1975-0​9-0​6T0​‐
Mayor 15>15->false 3:0​0:0​0.0​00Z(**)
Mayor igual 15>=15->true
Antes de usar el Objeto Date es necesario crear una instancia del
Menor 10<15->true
mismo en una variable. P/Ej.:
Menor igual 15<=15->true
let fechaA​ctual = new Date;
Lógicos Y: and (&&)//Y 10>15 && 5<3​-> false console.log(fechaActual) // Devuelve 2022-0​4-1​5T1​2:2​5:0​0.538Z
O: or (||) 10>15||5<3->true (**)Notese que el mes en la fecha ingresada es 08 y la instancia
No es:not (!) !10<15->false devolvió 09, sumando automá​tic​amente 1 al mes.-
Concat​‐ Une distintos tipos de datos. let fila = 'M';
enación Siempre devuelve un string let asiento=7; Objetos Literales
let ubicac​ion​=fila + objeto.propiedad Accedemos al valor de consol​e.l​og(​ten​ist​‐
asiento -> M7 como una propiedad del objeto. a.a​ctivo); //Devuelve
string true
Metodo Cuando una propiedad let tenista ={
Objeto Date
almacena una función, a nombre: 'Roger',
.getDay() Nos devuelve el día de la let miFecha = esa función la llamamos edad: 38,
semana, donde 0 es fechaActual.getDay() método . activo: true,
Domingo y Sábado 7 console.log(fechaActual);// saludar: function(){
Devuelve 5 (hoy es return '¡Hola! me
viernes) llamo Roger'}
getDate() Nos devuelve el día del let miFecha = }
mes. fechaActual.getDate() objeto.me​todo() Ejecuta el método consol​e.l​og(​ten​ist​‐
consol​e.l​og(​fec​haA​ctu​‐ (funcion) almacenado en a.s​alu​dar());
al)​;//​Dev​uelve 15 (hoy es un objeto. //Devuelve '¡Hola!
Viernes 15 de Abril) me llamo Roger'
getMonth() Nos devuelve el número et miFecha =
de mes del año. Tener en fechaActual.getMonth()
cuenta que enero = 0 y consol​e.l​og(​fec​haA​ctu​‐
diciembre = 11 al)​;//​Dev​uelve 3 (abril)
getFul​‐ Nos devuelve el año let miFecha =
lYear() actual. fechaActual.getFullYear();
consol​e.l​og(​miF​ech​a);//
Devuelve 2022

By Aleordoh (Martin Ordonez) Published 4th May, 2022. Sponsored by ApolloPad.com

cheatography.com/martin- Last updated 14th May, 2022. Everyone has a novel in them. Finish
ordonez/ Page 5 of 6. Yours!
https://apollopad.com
 Conceptos Básicos de JS Cheat Sheet
by Aleordoh (Martin Ordonez) via cheatography.com/146230/cs/31593/

Objetos Literales (cont) Spread operator y Rest parameter (cont)

this.p​ Accedemos al valor de let tenista ={ Spread Idem let auto={​marca:

rop​‐ cada propiedad del nombre: 'Roger', operator 'Ferrari',anio:'2019'};
iedad objeto. edad: 38, en objetos let piloto=
activo: true, {nombre:'Vettel',edad:'31',...auto};
saludar: function(){ consol​e.l​og(​piloto) //devuelve {
return '¡Hola! me llamo ' + nombre: 'Vettel', edad: '31',
this.nombre} marca: 'Ferrari', anio: '2019' }
} Spread ver ver
console.log(tenista.saludar()); operator
//Devuelve '¡Hola! me llamo en
Roger' funciones
Un Objeto es una estructura de datos. Rest Usando el function sumar(...numeros){
let tenista ={ Parameter operador "..."​ return numero​s.r​edu​ce(​(ac​‐
nombre: 'Roger', como último um,num) => acum += num)
edad: 38, parámetro de una }
activo: true, función, permite console.log(sumar(6,3)) //
} capturar los Devuelve 9
Donde: nombre, edad y activo son propie​dades y 'roger', 38 y true parámetros adicio​‐
los Valores de esas propie​dades. nales de la
función.
Spread operator y Rest parameter

Spread Permite expadir let dias1 =

operator los elementos ['Lunes','Martes','Miercoles'];
en de un elemento let dias2=
arrays iterable dentro ['Jueves','Viernes','Sabado','Domingo'];
de otro. let semana = [...dias1,...dias2];
consol​e.l​og(​sem​ana);// Devuelve [
'Lunes', 'Martes', 'Mierc​oles', 'Jueves',
'Viernes', 'Sabado', 'Domingo' ]

By Aleordoh (Martin Ordonez) Published 4th May, 2022. Sponsored by ApolloPad.com

cheatography.com/martin- Last updated 14th May, 2022. Everyone has a novel in them. Finish
ordonez/ Page 6 of 6. Yours!
https://apollopad.com