Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Clase 10 de 51 • Fundamentos de JavaScript 2017

Resumen

Los métodos son funciones dentro de un objeto, en este caso podemos agregar una función al objeto Punto, para poder cambiar las coordenadas del punto.

Podemos definir el método como

const p1 = {
  x: 0,
  y: 1,
  moverEnX: function(x) { this.x = this.x + x }
}

Jesús Rosas Ramírez

student•

//Los objetos en JavaScript se componen de la siguiente forma: 
//{ } => Los objetos se identifican por ser encapsulados entre dos llaves, ¡OJO! no se deben confundir con el bloque de una función.
//Ejemplo: 

{
	// Contenido del objeto
}

//Los objetos pueden ser almacenados en variables que pasa a ser el nombre del objeto. Ejemplo

let miObjeto = {
    // Contenido del objeto
}

// Los objetos se conforman de una estructura propiedad/valor, donde la clave puede ser un string o un numero
// Y los valores pueden ser: Un string, un entero, un flotante, una función, un arreglo, una variable.
// la forma en que se declara un objeto es la siguiente: { propiedad : "valor" }.
// El signo ":" asigna el valor a la propiedad definida en el objeto
// Cada propiedad es separada por un signo de ",".
// EJemplo:

let profesores =  {
    nombre: "Freddy Vega",
    clase: "Fundamentos de Ingenieria de Software",
    duración: 12,
    estado: true,

}

/*
Para acceder a la propiedad de un objeto se siguen los siguientes pasos:
    - Escribir el nombre del objeto
    - enseguida se coloca un "." que es la forma para acceder a las propiedades
    - por último se coloca el nombre de la propiedad
    Quedando de la siguiente forma : "objeto.propiedad"

    Ejemplo:
*/
profesores.nombre;

/*
Se puede reasignar el valor de la propiedad de un objeto de la siguiente forma:
*/
profesores.nombre = "Leonidas Esteban"
// Note que se llama al objeto y a la propiedad correspondiente seguido de un signo igual y en seguida el nuevo valor para la propiedad

Balam Omaña

student•

Es de mucha ayuda

Almudena Guerras

student•

Hola, muchas gracias por tus comentarios. Son de gran utilidad.
Me surge una duda a raíz de **utilizar un número como clave **para crear un atributo, ya que no sé muy bien de qué manera se accedería, puesto que en algunas pruebas que he realizado me devuelve un error.
¿Sabrías cuál sería la forma de proceder?
Muchas gracias 😉

David Santiago González Ramos

student•

Métodos en los objetos:
Los métodos de los objetos, de una forma sencilla, son una función que vive dentro de un objeto. Es decir, un método es una función que es atributo de un objeto.

Declaración:

let myObject = {
	atributoA: "nombre",
	atributoB: 17,
	metodoA(newArtibutoA) {	        // creación del método que recibe el parametro newAtributoA
		this.atributoA = newAtributoA   // Bloque de código que ejecuto el método
	}
}

Usar métodos:

myObject.metodoA("New Name");
//primero va el nombre del objeto, un punto y el método, si recibe parámetros, se envían los argumentos dentro de los paréntesis.
//Parametro: Lo que Recibe la función-método
//Argumento: Lo que le enviamos a la función-método al invocarla

Álvaro José Saavedra Díaz

student•

Vengo de programar con C# en Unity y me toca ahora aprender JavaScript por cambiar de empresa… Me estoy volviendo loco con el “freestyle” de este lenguaje de programación. Algunos declaran las variables, otros no; algunos “tipan” las variables, otros no; algunos ponen el punto y coma, otros no. ¿Cómo se sabe cuál es la buena práctica? ¿Cómo se sabe qué es más optimo para el navegador? ¿Soy el único que se está volviendo loco con eso xD?.

¡Saludos!

Mario Josue Grieco Villamizar

student•

jaja , si pasa, por defecto javascript sin let ( o var ) , mete en el scope global
para optimizacion casi no es necesario , el motor de js de los navegadores son bastante buenos, es cuention de practica, saber como llegar a optimizar tu codigo al maximo, mas que freestyle es tener en cuenta que tanta flexibilidad ( o poder ) pueden ser usados de mala manera , te recomiendo ver patrones de diseño , ES6 y js the good parts de douglas. encontraras util esos recursos, a medida que te veas lo temas mas profundos de platzi entenderas mejor .

segun escuche del mismo douglas en una conferencia ( esta en youtube ) , los ; hacen mas lento tu ejecucion , tanto que el revisa el codigo de arriba hasta abajo , la cantidad de veces que necesita poner los ; que no estan donde deberian.

es mas encontraras interesante que en js no existia block scope hasta que llego el let.

{
let a = 0;
}

console.log(a) -> error

{
var a = 0;
}
console.log(a) -> todo ok

function(){
var a = 0;
}
console.log(a) -> nada error
literal tal como esta.

Mario Josue Grieco Villamizar

student•

function ver(){
   return {
     a:1
   }
}

en el segundo va a poner un return ; , no retorna el objeto…

function ver(){
   return 
   {
     a:1
   }
}```

Gustavo Isidoro

student•

Para retornar con 2 decimales sería:

return Math.sqrt((x*x + y*y)).toFixed(2)

Henry Alejandro Palacios Lemus

student•

¿Por que se debe meter el Math.sqrt((x * x + y * y)) en otro paréntesis?

Juan Antonio Avalos Orozco

student•

Los parentesís dentro de los propios de la Función Math.sqrt() son inecesarios en este caso, lo mismo da si pones Math.sqrt(x * x + y * y); en otros casos se ponen los parentesís para ordenar tus operaciones.

Diego Andrés Rojas González

student•

Es importante saber que:
un MÉTODO hace referencia a una FUNCIÓN
un ATRIBUTO hace referencia a una VARIABLE

METODO <=>FUNCION
ATRIBUTO<=>VARIABLE

const p2 = { //objeto
x: 8, //atributo
y: 10, //atributo
moverEnX2(movX) {this.x += movX} //metodo
}

Karina Gabriela Cerda Melchor

student•

Para mostrar el valor final con 2 decimales

function distancia(p1,p2){
	const x = p1.x - p2.x
	const y = p1.y - p2.y

	return Math.sqrt(Math.pow(x,2)+Math.pow(y,2)).toFixed(2)
}

Victor Alfonso Caballero Cabrera

student•

Tb se puede redondear con toFixed(2);

let p1 = {
			x:5,
			y:0,
			/*moverX: function(x){
				return this.x +=x;
			},*/
			moverX(x){
				return this.x +=x;
			},
			moverY: function(y){
				return this.y +=y;
			}

			},
	 p2 = {
	 		x:0,
	 		y:10,
	 		moverX: function (x) {
	 		 	return this.x +=x;
	 		},
	 		moverY: function (y) {
	 		 	return this.y +=y;
	 		}
	 		};
function distancia(p1, p2) {
  const x = p1.x - p2.x
  const y = p1.y - p2.y
  return 	Math.round(Math.sqrt(x * x + y * y)*100)/100;
}```

Guillermo Ferru

student•

Hola! me parece que con toFixed() no redondeas, sino que usas tomas x decimales, en tu caso 2.
Saludos

Gibson Rosales

student•

si se invoca la función distancia(p1,p2) con el método .toFixed(2) se puede lograr que solo dé dos decimales pero el valor que devuelve no es un number

Cesar Andres Vilchez Cardenas

student•

Reducir a 2 valores después del punto decimal:

Use parseFloat() para convertir el resultado a numero ya que si no lo hacia el resultado se mostraba como texto.

Diego Aguila Cassina

student•

Hola Andriu, gracias por tu comentario a mi tambien me salio como texto, pero para que salga para todos y no lo estas agregandao por cada distancia es mejor que lo pongas en el return asi :

<return parseFloat(Math.sqrt(x * x + y * y).toFixed(2));>

Ahora lo que no entiendo es porque lo bota como texto si todo es numero. Tal vez tu sepas porque.

Issa Almendares

student•

const p1 = 
{x:0, 
 y:4,
 moverEnX : function(x){this.x += x},
 moverEnY : function(y){this.y += y}
}

const p2 =
{x:3,
 y:0,
 moverEnX : function(x){this.x += x},
 moverEnY : function(y){this.y += y}
}

function distancia(p1, p2)
{
    const x = p1.x -p2.x
    const y = p1.y -p2.y
    return Math.round(Math.sqrt(x * x + y * y))
}

console.log(distancia(p1, p2)```

Gustavo Ghioldi

student•

Jhon Alexander Leon Ortecho

student•

Se puede crear “Arrow function” dentro del objeto.

Carlos Raez

student•

el metodo se podria escribir en una arrow function??
Gracias

Diego Forero

Team Platzi•

Si es posible quedaría algo como

const distancia = (p1, p2) => {
    const x = p1.x - p2.x
    const y = p1.y - p2.y

    return Math.sqrt(x * x + y * y)
}

Jhon Alexander Leon Ortecho

student•

let distancia = (p1,p2) => Math.sqrt(Math.pow(p1.x - p2.x,2) + Math.pow(p1.y - p2.y,2))

Santiago Ricci

student•

dejo mi aporte al reto de pasar a dos decimales, el toFixed devuelve un string y con el parseFloat se pasa a decimal nuevamente. Saludos

return parseFloat(Math.sqrt(x*x + y*y).toFixed(2));

Jose Manuel Montaño Saenz

student•

¿Por que el console.log me muestra un numero entero y llamando a la funcion el return muestra un string?

leonardo moreno

student•

mi redondeo

function distancia(p1,p2) {
const x = p1.x - p2.x
const y = p1.y - p2.y

 return Math.sqrt(x*x+y*y).toFixed(2)

}

Jordi

student•

Por que esto no va?

Da 5 (mal)

Y esto si?

Da 8.0 (Bien)

Jordi

student•

Hola, veo que es diferente pero no entiendo porque el this es undefined en el arrow cuando hago:

const p1 = {
	x: 0,
	y: 4,
	moverEnX: (x) => {
		this.x += x
	},
	moverEnY: (y) => {
		this.y += y
	}
}

console.log(p1.x) // 0
console.log(p1.moverEnX(5)) // undefined
console.log(p1.x) // 0

Juan Jose Rojas Rojas

student•

Según Mozilla: Un método es una función asociada a un objeto, o, simplemente, un método es una propiedad de un objeto que es una función. Los métodos se definen normalmente como una función, con excepción de que tienen que ser asignados como la propiedad de un objeto. Ejemplos son:

nombreDelObjeto.nombreDelMetodo = nombre_de_la_funcion;

var miObjeto = {
  miMetodo: function(parametros) {
    // ...hacer algo
  }
};

donde nombreDelObjeto es un objeto existente, nombreDelMetodo es el nombre que se le va a asignar al método, y nombre_de_la_funcion es el nombre de la función.

Entonces puede llamar al método en el contexto del objeto de la siguiente manera:

object.nombreDelMetodo(parametros);

Andrés Madrigal

student•

const p1 = {
	x:0,
	y:4,
	moverEnX: function (x){this.x += x},
	moverEnY: function (y){this.y += y}
}

const p2 = {
	x:3,
	y:0,
	moverEnX: function (x){this.x += x},
	moverEnY: function (y){this.y += y}
}

function distancia(p1,p2){
	const x = p1.x - p2.x
	const y = p1.y - p2.y

	return Math.sqrt(x * x + y * y).toFixed(2)
}

console.log(distancia(p1, p2)) //5.00
p1.moverEnX(10)
console.log(distancia(p1, p2)) //8.06
p2.moverEnY(-4)
console.log(distancia(p1, p2)) //10.63

Freddy Córdova Arana

student•

Para mostrar un número decimal con “x” cantidad de decimales, podemos usar:

numero.toFixed(x)

Ejemplo:

let num = 5.56789
let n = num.toFixed(3)

// Resultado: "5.568"

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial