Skip to content

Latest commit

 

History

History
481 lines (378 loc) · 11 KB

clase10.md

File metadata and controls

481 lines (378 loc) · 11 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 10

Objetos

Objetos Literales

  • Propiedades:

    var miObjeto = {
    cadena: 'esto es una cadena',
    numero: 2,
    booleano: false
};

  • Métodos:

    var miObjeto = {
    saludar: function(){
		console.log("hola!");
	}
};

  • Trabajando con espacios y caracteres especiales:

    var miObjeto = {
	nombre: "objeto",
    "año": 2015,
    "estado del sistema": "correcto"
};

console.log(miObjeto["año"]);
miObjeto["estado del sistema"] = "fuera de servicio";
console.log(miObjeto["estado del sistema"]);

  • Acortar objetos:

    var objetoAbreviado = objeto.muy.muy.largo.que.tiene.muchos["metodos y propiedades"];

objetoAbreviado.propiedad1;
objetoAbreviado.metodo1();

Métodos (Nivel Avanzado ♦️)

  • .defineProperties() Define nuevas o modifica propiedades existentes directamente en el objeto, returnando el objeto.:

    	var miObjeto = {propiedad: "Propiedad original..."}
Object.defineProperties(miObjeto, {
  "propiedad1": {
    value: true,
    writable: true
  },
  "propiedad2": {
    value: "Cadena de texto",
    writable: false
  }
});
console.info(miObjeto);
miObjeto.propiedad = "Propiedad original Modificada";
console.info(miObjeto.propiedad);
miObjeto.propiedad2 = "Cadena de texto... ¿modificada?";
console.info(miObjeto.propiedad2);

  • .getOwnPropertyDescriptor() Devuelve las detalles de los objetos y métodos del objeto. Undefined en caso de no existir:

    var miObjeto = {
  metodo: function() {
  	console.log(miObjeto.propiedad1)
  },
  propiedad1: "Datos"
};

console.info(Object.getOwnPropertyDescriptor(miObjeto, 'propiedad1'));
// Object {value: "Datos", writable: true, enumerable: true, configurable: true}

console.info(Object.getOwnPropertyDescriptor(miObjeto, 'inventado'));
// undefined

  • .getOwnPropertyNames() Devuelve un array con todos los nombres de las propiedades y métodos del objeto:

    var miObjeto = {
  metodo: function() {
  	console.log(miObjeto.propiedad1)
  },
  propiedad1: "Datos"
};

console.log(Object.getOwnPropertyNames(miObjeto));
// ["metodo", "propiedad1"]

  • .isExtensible() Determina si un objeto es extensible:

    var miObjeto = {
  metodo: function() {
  	console.log(miObjeto.propiedad1)
  },
  propiedad1: "Datos"
};

console.log("¿Se puede extender?", Object.isExtensible(miObjeto));

var sellado = Object.seal(miObjeto);
console.log("¿Se puede extender?", Object.isExtensible(sellado));

var congelado = Object.freeze(miObjeto);
console.log("¿Se puede extender?", Object.isExtensible(congelado));

Object.preventExtensions(miObjeto);
console.log("¿Se puede extender?", Object.isExtensible(miObjeto));

  • .hasOwnProperty() Devuelve true o false si l apropiedad existe o no:

    var miObjeto = {
  metodo: function() {
  	console.log(miObjeto.propiedad1)
  },
  propiedad1: "Datos"
};

console.log("¿Tiene la propiedad \"propiedad1\"?", miObjeto.hasOwnProperty('propiedad1'));
console.log("¿Tiene la propiedad \"propiedad2\"?", miObjeto.hasOwnProperty('propiedad2'));

  • .propertyIsEnumerable() Devuelve true o false si la propiedad es especificada es enumerable.:

    var miObjeto = {
  metodo: function() {
  	console.log(miObjeto.propiedad1)
  },
  propiedad1: "Datos"
};

console.log("¿Es enumerable \"propiedad1\"?", miObjeto.propertyIsEnumerable('propiedad1'));
console.log("¿Es enumerable \"metodo\"?", miObjeto.propertyIsEnumerable('propiedad2'));

  • .toLocaleString() Retorna como string (configuración regional) todas las propiedades:

    var fecha = new Date();

var miObjeto = {
  metodo: function() {
  	console.log(miObjeto.propiedad1)
  },
  propiedad1: "Datos",
  fecha: fecha
};

miObjeto.toLocaleString()
console.log("La fecha es ", miObjeto.fecha);

For... in

Itera sobre todas las propiedades de un objeto, en un orden arbitriario.

	var objeto1 = {
		propiedad1: "hola",
		propiedad2: 2,
		propiedad3: false,
		propiedad4: [true,2,5, "..."],
		propiedad5: {
			dato: "más datos..."
		},
		metodo: function(){
			console.log("hola");
		}
	}
	function mostrar_propiedades(objeto, nombreObjeto) {
	   var resultado = "";
	   for (var i in objeto) {
	      resultado += nombreObjeto + "." + i + " = " + objeto[i] + "\n";
	   }
	   return resultado;
	}
	
	mostrar_propiedades(objeto1, "objeto1");

Funciones

  • Propiedad name:
	function miFuncion (){
		// vacia
	};

	console.log(miFuncion.name);
  • Declaración y ejecución:
	function dameTrue (){
		return true
	};

	function dameFalse () {
		return false
	};

	dameTrue();
	dameFalse();

  • Argumentos:

    • El exceso de argumentos no es un problema
    • La falta de argumento crea un valor indefinido
    • El Objeto Arguments no es un Array, solo es similar.
    function pruebaArguemntos () {
console.log(arguments);
console.info(arguments[0]);
console.info(arguments[1]);
}

pruebaArguemntos (1, "vale", true);

  • Sumar cuadrados.

	function sumaCuadrados (a, b) {
		return (a*a) + (b*b);
	};

Scope (Nivel Medio ♠️)

  • Declaración y ejecución:
	var numero = 450;
	var otroNumero = 23;

	function sumaCuadrados (a, b) {
		var numero = a;
		var otroNumero = b;
		var calculo = (numero*numero) + (otroNumero*otroNumero);
		console.log("\"numero\" es \""+numero+"\", local");
		console.log("\"otroNumero\" es \""+otroNumero+"\", local");
	};

	function verificarGlobales() {
		console.log("\"numero\" es \""+numero+"\", global");
		console.log("\"otroNumero\" es \""+otroNumero+"\", global");
	};

Funciones Avanzadas (Nivel Medio ♠️)

  • Anónimas (expresiones):
	var sumaCuadrados = function (a, b) {
		return (a*a) + (b*b);
	};
    
    console.log("El .name de sumaCuadrados es "+sumaCuadrados.name)
  • Funciones como dato:
	function saludo () {
		console.log("hola!");
	};

	function lanzar (funcion){
		funcion();
	};
  • Funciones anónimas autoejecutables:
	(function() {
		console.log("hola Amigo/a")

	})(); //ex:Jquery
  • Funciones anónimas con parámetros:
	( function(quien){
	   console.log("hola " + quien);
	})("Amigo/a");

  • Función que devuelve una función anónima:

    • Asignando una variable:
    function saludo(quien){
        return function(){
                console.log("hola " + quien);
        }
}
var saluda = saludo("Amigo/a");
saluda();
    • Sin asignar una variable:
    function saludo(quien){
        return function(){
                console.log("hola " + quien);
        }
}
saludo("Amigo/a")();

Anidación de funciones (Nivel Avanzado ♦️)

  • Anidación:
	function saludar(quien){
	        function alertasaludo(){
	                console.log("hola " +  quien);
	        }
	        return alertasaludo;
	}
	var saluda = saludar("Amigo/a");
	saluda();
  • Anidación:
	function saludar(quien){
	        function alertasaludo(){
	                console.log("hola " +  quien);
	        }
	        return alertasaludo;
	}
	saludar("Amigo/a")();

Recursión (Nivel Avanzado ♦️)

		function factorial(n){
			if(n <= 1){
		    	return 1
		  	} else {
		    	return n * factorial(n-1)
			}
		}
		
		factorial(0); // n! = 1
		factorial(1); // n! = 1
		factorial(2); // n! = 2
		factorial(3); // n! = 6 (3*2*1)
		factorial(4); // n! = 24 (4*3*2*1)
		factorial(5); // n! = 120 (5*4*3*2*1)
		factorial(6); // n! = 720 (...)
		// ...

Callbacks (Nivel Medio ♠️)

En programación de computadoras, una devolución de llamada o retrollamada (en inglés: callback) es una función "A" que se usa como argumento de otra función "B". Cuando se llama a "B", ésta ejecuta "A". Para conseguirlo, usualmente lo que se pasa a "B" es el puntero a "A". Callbacks en Wikiwand

  • Ejemplo condensado:
	var quieroCallback = function(parametro, callback){
	    if ((callback) && (typeof callback === 'function')){
	        callback(parametro);
	    }
	    else
	        console.log(parametro, callback);
	}
	 
	quieroCallback('a', 'b');
	 
	quieroCallback('a', function(val){
	    console.log(val);
	});
  • Ejemplo con Jquery:
    $('#elemento').fadeIn('slow', function() {
    	// código del callback
	});
  • Otro ejemplo:
    function comerSandwich(elemento1, elemento2, callback) {
	    console.info('ñam ñam... empiezo con el sándwich.\n\nMe gusta porque tiene tiene ' + elemento1 + ', ' + elemento2);
	    callback();
	}

	comerSandwich('jamón', 'queso', function() {
	    console.info('Ya terminé...');
	});
  • Ejemplo con Callback opcional:
    function comerSandwich(elemento1, elemento2, callback) {
	    console.info('ñam ñam... empiezo con el sándwich.\n\nMe gusta porque tiene tiene ' + elemento1 + ', ' + elemento2);
	    
	    if (callback) {
	        callback();
	    }

	}

	comerSandwich('jamón', 'queso');
  • Sanitizar el Callback:
    function comerSandwich(elemento1, elemento2, callback) {
	    console.info('ñam ñam... empiezo con el sándwich.\n\nMe gusta porque tiene tiene ' + elemento1 + ', ' + elemento2);
	    
	    if (callback && typeof(callback) === "function") {
	        callback();
	    }

	}

	comerSandwich('jamón', 'queso');

Asincronía (Nivel Avanzado ♦️)

    function comerSandwich(elemento1, elemento2, callback) {
	    console.info('ñam ñam... empiezo con el sándwich.\n\nMe gusta porque tiene tiene ' + elemento1 + ', ' + elemento2);
	  
		setTimeout(alarma, 5000);
		function alarma(){
			console.log("ring! ring!.. pasaron los 5 segundos!");
		};

	  
	    if (callback && typeof(callback) === "function") {
	        callback();
	    }
	}

	comerSandwich('jamón', 'queso', function() { 
	    console.log('Ya terminé...');
	});

Tiempo para proyecto personal

img_promo