Objetos

Mientras que los valores de un array son encerrados entre corchetes [], los valores de un objeto son encerrados entre llaves.

Dos formas de declarar un objeto y darle valoreslet me={
    name:"Juan",
    age:43
};
----------------------------------
let me = new Object();
me["name"]="Pepe";
me.age=27;

Métodos

let warrior = {
	name : "Joan",
	age : 37,
	gritar: function(insulto){
		alert("te voy a comer los higados, " + insulto);
	}
}

warrior.gritar('pendejo');
Ver ejemplo de métodos

Almacenar método en variable

let funcion_en_variable = function(){
	alert("muere bellaco");
}
let warrior = {
	name : "Joan",
	age : 37,
	gritar: function(insulto){
		alert("te voy a comer los higados, " + insulto);
	}
}
warrior.gritar = funcion_en_variable;
warrior.gritar('pendejo');
Ver ejemplo de almacenamiento de método en variable

Recorrer objetos

let friends = {
	bill:{
		firstName:"Bill",
		lastName:"Smith"
	},
	steve:{
		firstName:"Steve",
		lastName:"Marcus"
	}
}

function list(friends){
    for(prop in friends){
		console.log(prop) //bill, steve
		console.log(friends[prop].name)
    }
}
list(friends);

Ejercicio

Añadir al código anterior la función buscar, que reciba el contacto e imprima su segundo nombre;
buscar("Steve"); → Marcus

Ver solución

Definición de métodos de objetos

let cuadrado = new Object();
cuadrado.sideLength = 6;
cuadrado.calcPerimeter = function() {
	return this.sideLength * 4;
};

Definición de métodos en clases I

function Cat(name, breed) {
    this.name = name;
    this.breed = breed;
	this.meow = function(){
		console.log("Meow!");
	};
}

Definición de métodos en clases II

function Cat(name, breed) {
    this.name = name;
    this.breed = breed;
}
Cat.prototype.meow = function(){
	console.log("Meow!");
}

Ejercicio

Añadir al objeto rectángulo la definición del método calcPerimeter, llamado en la última línea.

function Rectangle(length, width) {
	this.length = length;
	this.width = width;
	this.calcArea = function() {
      		return this.length * this.width;
	};
	//Añadir el código aquí
}
let rex = new Rectangle(7,3);
let area = rex.calcArea();
let perimeter = rex.calcPerimeter();

Ejercicio

Añadir el código necesario a la función speak para que al ejecutar el siguiente código la salida sea:
Hello, I am feeling great
Hello, I am feeling just okay

let james = {
	job: "programmer",
	married: false,
	speak: function(    ) {
    
	}
};

james.speak("great");
james.speak("just okay");
Ver solución

Constructores

function Person(name,age) {
	this.name = name;
	this.age = age;
}

let bob = new Person("Bob Smith", 30);

Ejercicio

function Person (name, age) {
    this.name = name;
    this.age = age;
}

let ageDifference = function(person1, person2) {
    return person1.age - person2.age;
};

//Hacer una función llamada edadMayor, que evalúe las edades de las dos personas que le pasamos como parámetro y devuelva la edad del más viejo.

let alice = new Person("Alice", 30);
let billy = new Person("Billy", 25);

alert("The older person is "+edadMayor(alice, billy));
Ver solución

prototype

Permite definir un método que tendrán todas las clases.

Ver ejemplo prototype.
let Monster = function(){
	console.log("constructor ejecutado");
	this.energy = 3;
}
Monster.prototype.rugir = function(){
	console.log("grooooaaarrrr");
	this.energy+=1;
	console.log(this.energy);
}

let monster = new Monster();
monster.rugir();

Herencia

Emperor hereda de Penguin:

function Penguin(name) {
    this.name = name;
    this.numLegs = 2;
}

let Emperor =  function(){
    
}
Emperor.prototype = new Penguin();

let emperor = new Emperor();
alert(emperor.numLegs)

Deconstrucción

Nos permite almacenar los valores de una entidad compleja (un array o un objeto) en variables independientes.

Deconstrucción de array

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Deconstrucción de un objeto

let {a: a, b: b, c: c} = obj;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Rest operator/ spread operator (...)

Rest operator

function doMath(operator, ...numbers) {
	console.log(operator);
	console.log(numbers);
}
 
doMath('add', 1, 2, 3);

Spread operator

const a = [1,2,3];

const b = [...a, 4,5,6]; // [1, 2, 3, 4, 5, 6]

fetch

Las peticiones fetch permiten hacer peticiones a un servidor cuyos resultados serán gestionados mediante promesas.

Ejemplos de uso de fetch

Petición GET sin parámetrosnodfetch('url.php').then(callback);
Petición POST con parámetrosfetch('http://localhost:13289/escenas/recuperar_escenas_obra', {
    method:"POST",
    headers:{
      'Content-Type': 'application/json'
    },
    body:JSON.stringify({id:1})},
  )
    .then(res => res.json())
    .then(escenas => {
      console.log(escenas);
      return escenas;
    });

Codigo para simplificar las peticiones

const API_URL = 'http://localhost:13289';

const fetchData = (url, options = {}) => {
  return fetch(API_URL + url, {
    headers: {
      'Content-Type': 'application/json'
    },
    ...options,
  }).then(res => res.json())
};

export const getJson = (url, params) => {
  const urlParams = params && Object.entries(params)
    .reduce((acc, [name, value]) => `${acc}${name}=${value}&` , '?')
    .slice(0, -1);
 return fetchData(url + urlParams);
};

export const postJson = (url, params) => {
  return fetchData(url, {
    method: 'POST',
    body:JSON.stringify(params)
  });
};
Para usarlo:import {getJson, postJson} from "../http";
  const escenas2 = getJson('/escenas/recuperar_escenas_obra', {id: 1, amor: 'mucho'})
};

Promise

Las promesas nos permiten gestionar código asincrónico. Las promesas de Javascript nativo, son similares a las promesas de jquery.

$.get('url.php', callback);

Antes de tener disponibles las promesas nativas para gestionar estas peticiones asíncronas, teníamos que usar este código:

function get(url, callback) {
	var req = new XMLHttpRequest();
	req.open('GET', url);

	req.onload = function() {
		if (req.status === 200) {
			callback(req.response);
		}
	};

	req.send();
}

get('url.php', callback)

El equivalente con promesas nativas de Javascript, sería esto:

fetch('url.php').then(callback);

Crear una promesa (ejecutar una función de forma asincrónica)

En Javascript todo el código es sincrónico. Las funciones asincrónicas se ejecutas después de las asincrónicas (no entre medias).

Definimos una función sincrónica

const add = (num1, num2) => num1 + num2;
const makeSumPromise = () => new Promise((resolve) => {
	resolve(add(3,2))
});

num contendrá el valor que devuelve el resolve

makeSumPromise.then(num => )

La función fetch devuelve una promesa

let promesa = fetch('url.php');
promesa.then(...)

Promise.race

Este método nos permite evaluar varios códigos (request, timeoutPromise, ...) creados a partir de la API de de Promise. El que termine de ejecutarse antes es el que se guardará como valor de retorno de la promise.

En el siguiente ejemplo, hago una carrera entre dos promises. Si la promise request tarda más que la promise timeoutPromise, el valor devuelto será el que devuelva un timeout.

Promise.race([
	request, // 1s
	timeoutPromise, // 0.5s

]).then((res) => {
	clearTimeout(timeoutId);
	return res;
});


const request = fetch(path); //El método fetch devuelve una promesa

const timeoutPromise = createRequestTimeout(setTimeoutReference);

let timeoutId;

const setTimeoutReference = (timeout) => { timeoutId = timeout; };

const createRequestTimeout = setTimeoutReference => new Promise((resolve, reject) => {
	setTimeoutReference(setTimeout(() => {
		reject(createHttpError({
			statusCode: 504,
			statusMessage: 'Request timeout error',
		}));
	}, 10000));
});
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?