Show Menu
Cheatography
  1. Home >
  2. Programming >

Conceptos Básicos de JS Cheat Sheet by

Chets Sheet en español de Java Script

Variables

var
Variable de scope global.
var nombre = 'Martin'
let
Variable de scope local. Solo tiene efecto entre los {}.
let numero = 2
const
Contante su valor no cambia nunca.
const pi= 3.14

Funciones

Función Declarada
Se declara usando la
estructura básica.
function sumar (a,b){
return a+b;
}
Función Expresada
Se asigna como valor
de una variable.
let calcul­adora
= function (a,b){
return a+b
}
Invocación de funcion
Se indica los argumentos
para las variables
de la función respetando
el orden.
function saluda­r(ap, nom){
return 'Hola '+nombre+' '+apellido;
}
function('Martin', 'Ordoñes');
(retorna 'Hola Martin Ordoñez')
Función Constr­uctora
Permite armar un molde para crear objetos. Por convención el nombre de la funcion constr­uctora se escribe la primer letra con mayúsc­ulas.
function Auto(m­arca, modelo){
this.marca = marca;
this.modelo=modelo;
}
Instanciar un objeto
Para crea un objeto se usa la palabra New y se llama a la funcion.
let autoNuevo = new Auto('­For­d',­'Fa­lcon);'
Arrrow Functions
Permite escribir las funciones con una sintaxis mas compacta.
let sumar =(a,b) =>a+b;
(*)let esMultiplo =(a,b) =>{
let resto = a % b;
return resto==0;
}
Callback
Es una funcion que pasa como parámetro de otra funcion. Puede estar definida o no.
setTim­eou­t(f­unc­tion(){ consol­e.l­og(­'Ho­lam­und­o')­},1000 )
let miCall­back= () => consol­e.l­og(­'Hola Mundo') setTim­eou­t(m­iCa­llb­ack­,1000);
()En las arrow functions no hace falta escribir {} ni return* salvo que haya as de una línea de código.-

JSON

JSON.p­arse()
Recibe una cadena de texto en formato JSON y la devuelve en formato JS
let datos = ('{"­nom­bre­"­:"Ma­rti­n", "edad";46}';
console.log (JSON.p­ar­se(­datos); //Devuelve {nombre: 'Martin', edad:46}
JSON.stringify()
Recibe un dato de JS y devuelve una cadena de texto JSON
let objeto­={n­ombre: 'Martin', edad:46}
console.log(JSON.stringify(objeto); //Devuelve '{"n­omb­re":­"­Mar­tin­", "­eda­d";46}'
JavaScript Object Notation similar a un Objeto Literal se usa para interc­ambiar inform­ación entre sistemas.
{"texto": "mi texto",
"numero":16,
"array":["uno","dos"],
"booleano": true}

Strings

.length
Retorna lacantidad total de caracteres.
let saludo = 'Hola mundo!';
console.log(saludo.length); // Devuelve 11
indexOf()
Busca en el string, el string que recibe como parámetro.
consol­e.l­og(­sal­udo.In­dex­Of(­mun­do)); //Devuelve 5 por la posición de la letra 'm'
.slice()
Corta el string y devuelve la parte donde se aplica.
consol­e.l­og(­sal­udo.sl­ice­(0,4)); //Devuelve 'Hola'
.trim()
Elimina espacios al principio y final del string.
let saludo = ' Hola mundo! '
console.log(saludo.trim); //Devuelve 'Hola Mundo!'
split()
Recibe un string que usa ocmo separador y devuelve un array con las partes del string.
consol­e.l­og(­sal­udo.sp­lit(' ')); //Devuelve ['Hola­','­mun­do!']
replace()
Reemplaza una parte del string con otraº
consol­e.l­og(­sal­udo.re­pla­ce(­'mu­ndo­','­pai­s')); //Devuelve 'Hola Pais!'
Los string son un array de caract­eres. El índice al igual que en el array comienza en 0.
P/Ej.: nombre­=¡H­ola!, soy Carli' //nomb­re[2] devuelve la letra 'o'

Ciclos

for
Permite Repetir Instru­cciones de manera sencilla.
for ( let i=0 ; i<=x ; i=i+2){
suma=suma+i;
}

Arrays (métodos)

.length
Longitud del array. Indica la cantidad de elementos que componen el array.
let colores= ['Rojo','Azul','Amarillo'];
console.log(colores.length); //Devuelve 3
.pop()
Elimina el ultimo elemento el array. Devuelve del elemento eliminado.
let ultimo­Color = colores.pop();
console.log(colores);//Devuelve ['Rojo','Azul']
console.log (ultim­oCo­lor); //Devuelve 'Amarillo'
.push()
Agrega uno o mas elementos al final del array.
consol­e.l­og(­col­ore­s.p­ush­('V­iol­eta­','­Gri­s')); //Devuelve ['Rojo­','­Azu­l',­'Am­ari­llo­','­Vio­let­a',­'Gr­is']);
.shift()
Elimina el primer elemento el array. Devuelve el elemento eliminado.
let primer­Color = colores.shift()
console.log(colores);//Devuelve ['Azul','Amarillo'']
console.log (prime­rCo­lor­);/­/De­vuelve 'Rojo'
.unshift()
Agrega uno o mas elementos al principio del array.
consolo.log(colores.unshift('Violeta'));
//Devuelve ['Viol­eta­','­Roj­o',­'Az­ul'­,'A­mar­ill­o''])
.join()
Une los elementos del array usando un separador. Se debe indicar el separador.
consol­e.log (color­es.j­oi­n()); //Devuelve 'Rojo', 'Azul', 'Amarillo'
console.log (color­es.j­oi­n(-)); //Devuelve 'Rojo-­Azu­l-A­mar­illo'
indexOf()
Busca en el array el parámetro indicado. Si no lo encuentra retorna -1.
Siempre retorna el primer índice ocupado por el parámetro.
consol­e.l­og(­col­ore­s.i­nde­xOf­('A­zul')); //Devuelve 1
lastIn­dexOf
Similar a indexOf pero busca de Derecha a Izquierda.
consol­e.l­og(­col­ore­s.l­ast­Ind­exO­f('­Ama­ril­lo')); //Devuelve 0
.includes
Busca en el array el parámetro indicado y retorna un Booleano.
console.log(colores.includes('Azul'));
//Devuelve truef
.map()
Recibe una función (callback) como parámetro y devuelve un array modifi­cado.
let numeros =[2,4,6];
let doble = numeros.map(function(num){
return 2*num;})
consol­e.l­og(­dob­le);// Devuelve [4,8,12}
filter()
Recorre el array y filtra según la condición establ­ecida.
let edades =[22,46,6,18,5,25,3];
let mayores = edades.filter(function(edad){
return edad>=18);
} consol­e.l­og(­may­ores)// Devuelve [22,46­,18,25]
reduce()
Recorre el array y devuelve un único elemento.
En este caso el callback recibe dos paráme­tros, un acumulador u el elemento actual que esta recorr­iendo.
let num = [5,7,16]
suma=num.reduce(function(acumulador,elemento){
return acumulador+elemento;
) consol­e.l­og(­sum­a);// Muestra 28
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­=['­Arg­entina' , 'Colombia' , 'Chile' , 'Ecuador'];
paises.forEach(function(pais){
console.log(pais)
}) //Devu­elve: Argentina, Colombia, Chile, Ecuador
Las arrays se indican entre [] y son colecc­iones de datos ordenados. P/Ej.: colores=['Rojo','Azul','Amarillo']
El índice de cada elemento comienza en 0. P/Ej.: colores[0] //devuelve Rojo y colores[2] //devuelve Amarillo.

Destru­cturing

Desestructurar un Array u Objeto Literal consiste en extraer los elementos del del mismo. Esta acción no modifica el array u objeto literal, solo extrae los datos

Array
let destinosDelMundo = ['Marruecos', 'Bariloche', 'Barcelona', 'China', 'Grecia']
let[,,,china]=destinosDelMundo
console.log(china)// Devuelve china

Objetos Literales
let auto  = {marca: 'Ferrari', kilometros: 31, color: "Rojo"};
let { marca } = auto;
console.log(marca) //Devuelve Ferrari
 

Tipos de Datos

numéricos (number)
Números enteros o decimales (el separador decimal es el ".")
1, 2, 7 , 4.5
cadenas de caracteres (string)
Cadena de texo se escriben ente " o '
"Hola Mundo!­"
'Hola Mundo!'
lógicos o booleanos
Sus valores pueden ser true o false
6 < 8 = false
objetos literales
Son colecc­iones de datos.
Se reconocen por estar encerrados entre {}
let datos={Nombre:'Javier',
edad: 55,
soltero: true}
arrays
Coleccion de datos
se declaran con []
let Comida­s=[­'Mi­lan­esa­','­Rav­ioles con salsa'­,'budin de pan']
NaN (Not a number)
Indica que un valor no puede ser evaluado como número
let divisi­on=­'35'/2 = NaN
Null (nulo)
Indica valor vacío o descon­ocido
let temper­atu­ra=null
Undefined (sin definir)
Indica ausencia de valor
let saludo;

Condic­ionales

if
Condic­ional Simple
let edad = 19;
let acceso = '';
if (edad<16){
acceso = 'Prohibido';
}
else if
Agrega otra condición en el caso
que la anterior sea falsa.
Es opcional
let edad = 19;
let acceso = '';
if (edad<16){
acceso = 'Prohibido;'
}else if(eda­d>=16 && edad<=19){
acceso = 'Acomp­añado de un mayor';
}
else
Código a ejecutar si las condiciones
anteriores son falsas.
Es opcional
let edad = 19
let acceso = ''
if (edad<16){
acceso = 'Prohibido;'
}else if(eda­d>=16 && edad<=19){
acceso = 'Acomp­añado de un mayor';
}else{
acceso = 'Permitido';
}
if ternario
Se escribe de forma horizontal.
4 >10 ? 'EL 4 es mas grande' : 'El 10 es mas grande'
Switch
Esta compuesto por una expresión a evaluar, seguida de diferentes casos que terminan en break.
switch (fruta) {
case 'manzana':
case 'pera':
console.log('Mas rica es la Naranja!);
break;
default:
console.log('Que fruta es?');
break;
}

Operadores

De Asignación (=)
Asigna un valor a una variable
let color = 'rojo'
Aritmé­ticos
Suma
Resta
Multiplicación
División
Incremento
Decrementeo
Módulo (devuelde el resto de una división)
15+6 = 21
15-6=9
2*6=12
21/3=7
15++=16
17--=16
15%2=1
Compar­ación
Igualdad simple
Desigualdad simple
Igualdad estricta
Desigualdad estricta
Mayor
Mayor igual
Menor
Menor igual
15==15 -> True
10!=15->true
5==='15'->false
10!=='10'->true
15>15->false
15>=15->true
10<15->true
15<=15->true
Lógicos
Y: and (&&)//Y
O: or (||)
No es:not (!)
10>15 && 5<3­-> false
10>15||5<3->true
!10<15->false
Concat­enación
Une distintos tipos de datos. Siempre devuelve un string
let fila = 'M';
let asiento=7;
let ubicac­ion­=fila + asiento -> M7 como string

Objeto Date

.getDay()
Nos devuelve el día de la semana, donde 0 es Domingo y Sábado 7
let miFecha = fechaActual.getDay()
console.log(fechaActual);// Devuelve 5 (hoy es viernes)
getDate()
Nos devuelve el día del mes.
let miFecha = fechaActual.getDate()
consol­e.l­og(­fec­haA­ctu­al)­;//­Dev­uelve 15 (hoy es Viernes 15 de Abril)
getMonth()
Nos devuelve el número de mes del año. Tener en cuenta que enero = 0 y diciembre = 11
et miFecha = fechaActual.getMonth()
consol­e.l­og(­fec­haA­ctu­al)­;//­Dev­uelve 3 (abril)
getFul­lYear()
Nos devuelve el año actual.
let miFecha = fechaActual.getFullYear();
consol­e.l­og(­miF­ech­a);// Devuelve 2022
new Date()
Permite crear una fecha. si no se indica nada devolv­er´< la fecha actual
let miCumple = new Date(1975,08,06);
console.log(miCumple);// Devuelve 1975-0­9-0­6T0­3:0­0:0­0.0­00Z(**)
Antes de usar el Objeto Date es necesario crear una instancia del mismo en una variable. P/Ej.:
let fechaA­ctual = new Date;
console.log(fechaActual) // Devuelve 2022-0­4-1­5T1­2:2­5:0­0.538Z
(**)Notese que el mes en la fecha ingresada es 08 y la instancia devolvió 09, sumando automá­tic­amente 1 al mes.-

Objetos Literales

objeto.propiedad
Accedemos al valor de una propiedad del objeto.
consol­e.l­og(­ten­ist­a.a­ctivo); //Devuelve true
Metodo
Cuando una propiedad almacena una función, a esa función la llamamos método.
let tenista ={
nombre: 'Roger',
edad: 38,
activo: true,
saludar: function(){
return '¡Hola! me llamo Roger'}
}
objeto.me­todo()
Ejecuta el método (funcion) almacenado en un objeto.
consol­e.l­og(­ten­ist­a.s­alu­dar()); //Devuelve '¡Hola! me llamo Roger'
this.p­rop­iedad
Accedemos al valor de cada propiedad del objeto.
let tenista ={
nombre: 'Roger',
edad: 38,
activo: true,
saludar: function(){
return '¡Hola! me llamo ' + this.nombre}
}
console.log(tenista.saludar()); //Devuelve '¡Hola! me llamo Roger'
Un Objeto es una estructura de datos.
let tenista ={
nombre: 'Roger',
edad: 38,
activo: true,
}
Donde: nombre, edad y activo son propie­dades y 'roger', 38 y true los Valores de esas propie­dades.

Spread operator y Rest parameter

Spread operator en arrays
Permite expadir los elementos de un elemento iterable dentro de otro.
let dias1 = ['Lunes','Martes','Miercoles'];
let dias2= ['Jueves','Viernes','Sabado','Domingo'];
let semana = [...dias1,...dias2];
consol­e.l­og(­sem­ana);// Devuelve [ 'Lunes', 'Martes', 'Mierc­oles', 'Jueves', 'Viernes', 'Sabado', 'Domingo' ]
Spread operator en objetos
Idem
let auto={­marca: 'Ferrari',anio:'2019'};
let piloto={nombre:'Vettel',edad:'31',...auto};
consol­e.l­og(­piloto) //devuelve { nombre: 'Vettel', edad: '31', marca: 'Ferrari', anio: '2019' }
Spread operator en funciones
ver
ver
Rest Parameter
Usando el operador "..."­ como último parámetro de una función, permite capturar los parámetros adicio­nales de la función.
function sumar(...numeros){
return numero­s.r­edu­ce(­(ac­um,num) => acum += num)
}
console.log(sumar(6,3)) // Devuelve 9
   
 

Metadata

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          JavaScript Cheat Sheet
          jasmine JS testing Cheat Sheet