Cierre del Curso

Clase 48 de 51 • Fundamentos de JavaScript 2017

Resumen

¡Aprendimos mucho!

Declarar variables, var, let y cons
Definir funciones
Arrow Functions
Niveles de acceso a variables (entornos de variables)
Pila de ejecuciones y sincronización del código
Prototipo de funciones, objetos

Nestor Beltran

student•

Excelente curso y profesor, siempre creí saber JavaScript, pero cuando regresas a las bases descubres que siempre hay algo nuevo que aprender. Felicidades profe. Sacha y gracias.

Miguel Herreros Cejas

student•

Me ha pasado lo mismo. Muchos años programando en JavaScript y este curso me ha reenseñado todo desde 0.

RAMIRO JHONATAN TORREJON CASTRO

student•

Lo mismo.

Juan Pablo Rios Trujillo

student•

Estuvo muy bueno pero los temas como publicar con NPM no es muy claro

Platzi Team

student•

Muy bueno el curso, algunos temas complejos, como lo de procesos asincronos,funcciones recursivas, iteradores, generadores, lo del this, pero bien son temas que se pueden ir estudiando y practicando a la medida, también al comienzo estaba algo perdido con lo de prototipos pero bien al final explicaste lo de clases y me pareció mejor.

Lo de NPM y lo del juego genial…

Edwin Balseca García

student•

Les dejo mi aportación con las notas que tome durante todo este curso, espero que les sirva:

Existen muchas maneras de concatenar texto con funciones en JavaScript, una de ellas es usando " ", otra es ’ ', ambas seguidas de un +, y la otra nueva es utilizando una nomeclatura especial con y dentro si queremos colocar operaciones las ingresamos dentro de ${ }.
La manera de crear una funcion anonima en JavaScript es colocando function () { }, sin nombre, pero nunca podremos llamarla.
Maneras de asignar una funcion a una variable:
- let triangleArea = function (base, altura) { return base * altura / 2; }.
- let triangleArea = (base, altura) => {return base * altura / 2; }: Esto lo usamos si vamos a escribir muchas lineas de codigo dentro del parentesis.
- let triangleArea = (base, altura) => base * altura / 2; : Si solo es una linea, es mas convencional usar esta forma.
con let y var declaramos variables.
con const declaramos constantes.
Con arrow function podemos asignar una función a una variable que nos hace la lectura del código más legible.
Cuando ejecutamos funciones o metodos sobre los strings esa variable no se modifica a menos que se lo asignemos a otra variable.
toLowerCase() = Es una funcion de la clase string que nos convierte un string en minusculas.
toUpperCase() = Convierte un string en mayusculas.
endsWith(‘ar’) = Nos permite saber si un string termina con los caracteres que indiquemos entre parentecis.
startsWith(‘z’) = Con esto sabemos con que caracteres comienza un string;
slice(0, -2) = Esta funcion nos permite cortar caracteres desde un indice hasta otro, en este ejemplo indicamos que corte desde el inicio hasta 2 caracteres antes del final.
split() = Divide un objeto de tipo String en un array (vector) de cadenas mediante la separación de la cadena en subcadenas.
reverse() = coloca al revés (inversamente) una matriz.
join() une todos los elementos de una matriz.
Math.floor() = rendondea hacia abajo 3.9 = 3.
Math.ceil() = redondea para arriba 3.1 = 4.
Math.round() = redondea dependiendo 3.1 = 3, 3.5 = 4.
No se debe alterar la cantidad de elementos de elementos de un array mientras se esta iterando.
toFixed() = El número de digitos que aparecen después del punto decimal.
En JavaScript podemos ejecutar new Date() y puede recibir una fecha con año, mes (restandole 1), dia.
Para crear el objeto con la fecha actual utilizamos el new Date() solo, sin argumentos.
Los parametros son los datos que recibe una funcion y los argumentos son los que enviamos a una funcion.
Podemos restar estas dos fechas y resultado nos lo proporciona en milisegundos.
Forma de definir un objeto: const obj = { }.
Math.sqrt() = Para obtener la raiz cuadrada de un numero.
La POO de JavaScript se encuentra basada en prototipos y no en clases.
El método Object.create() crea un nuevo objeto con el objeto y propiedades del prototipo especificado.
El scope determina la accesibilidad (visibilidad) de las variables.
El método reduce() con el cual cuentan los arrays, nos permite ir iterando por todo el array y acumulando el valor en una variable.
El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.
El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.
Los closure son funciones que recuerdan el entorno en el cual fuerón creadas.
Las IIFE (Immediately-Invoked Function Expressions) son funciones que se ejecutan tan pronto como se definen.
Existen tres maneras de incorporar this al scope de una funcion, una es asignando this a una constante, otra es utilizando el metodo bind al final de la funcion ‘.bind(this)’ y la tercera es cambiando toda la funcion por un arrow function.
Métodos call() y apply(): A diferencia de bind(), ejecutan la función “padre” instantaneamente. De igual forma nos permiten establecer el scope y los parametros con la pequeña diferencia de que apply, recibe los parametros en un array.
ECMAScript es el estándar en el que se basa JavaScript.
Se llamó ECMAScript porque fue desarrollado por ECMA, una empresa dedicada a telecomunicaciones.
Si escribimos código con ECMAScript tiene que ser compatible con el navegador en el que queremos que corra.
Babel es una herramienta que te permite hacer compatible el código que usa funcionalidades de ECMAScript con los diferentes navegadores.
Para poder utilizar Babel debes tener instalado Node.
Un modulo es un pedazo de código encapsulado que se encarga de resolver alguna cosa en particular.
El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).
Sintaxis del Spread Operator; f(…iterableObj);
Las razones por las cuales nosotros vamos a querer escribir un modulo son dos, la primera es encapsulamiento y la segunda razon por la cual nosotros queremos escribir un modulo son las dependencias.
El método setTimeout() establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido, durante ese tiempo JavaScript manda la funcion a la cola de tareas “Task Queue” y espera a que la pila de ejecucion “Call Stack” este vacia.
Como funciona el EventLoop:
- Lo primero que se ejecuta es la declaración de las funciones.
- Cuando JavaScript ejecuta una línea la carga en una pila de ejecución.
- JavaScript solo ejecuta una cosa a la vez, por esto, debemos tenerla lo más limpia posible.
Un callback es una función que se pasa como parámetro a otra función, y la callback sólo se ejecuta cuando la función primordial/padre se ejecuta.
El método JSON.parse() analiza una cadena de texto como JSON, transformandolo en un objeto JSON.
Las Promesas son objetos y están asociadas con alguna tarea asincrónica.
Existen tres estados internos de las Promesas:
-Pending: Pendiente.
-Fullfiled: Se completó exitosamente.
-Rejected: Se produjo un error y no se puedo completar.
El método then() retorna una Promesa. Recibe dos argumentos: funciones callback para los casos de éxito y fallo de Promise.
El callback hell es un escadenamiento de muchos callbacks que produce un cuello de botella.
Fetch es un nuevo API para el acceso a recursos del servidor de manera asíncrona, basado en promesas.
Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca.
Con setInterval puedes ejecutar código cada cierto tiempo.
Los metodos clearTimeout() y clearInterval() sirven para cancelar los metodos setTimeout() y setInteval() respectivamente.
Memorizacion es guardar temporalmente valores que ya hemos calculado anteriormente.
Los iteradores nos permitirán hacer listas infinitas de elementos haciéndolos distintos a los arreglos (arrays) los cuales tienen un numero finito de elementos definidos.
Para decirle a JavaScript que nuestra función es un generador debemos indicarlo con un asterisco de la siguiente forma: function(asterisco).
Si creamos un generador debemos colocar la palabra clave yield la cual indica que cuando llamemos la función después de la primera vez, esta iniciará en la línea después de yield.
El operador === nos ayuda a comparar objetos, ejecutando la comparación no directamente a los datos del objeto sino, a la referencia del objeto.
Cuando asignamos un objeto a otro estamos haciendo que ambos apunten a la misma referencia, por eso al modificar un objeto el otro también se verá afectado, porque ambos tienen la misma referencia de memoria.
La inmutabilidad tiene por objetivo hacer que los parámetros de un objeto sean no modificables o inmutables.
Tenemos que decirle a NPM quienes somos, para ello, necesitamos pasar unos datos desde la terminal:
- npm set init.author.name “Tu nombre”
- npm set init.author.email “Tu correo”
- npm set init.author.url “Una url de tu sitio, inclusive puede ser una red social”
npm login = Para logearse con nuestra cuenta de npm.
Para que NPM entienda que es nuestro proyecto, necesitamos configurar una serie de parámetros, para ello, en la carpeta donde vamos a iniciar nuestro proyecto, utilizamos el comando: npm init.
La forma de exportar una funcion en javascript es con export default antes de la palabra funcion, si son varias funciones solo export.
Para importar una funcion usamos la exprecion import {funcion} from ‘archivoJS’, si queremos importar la funcion que esta por default omitimos {}.
Mocha es un framework de pruebas de JavaScript que se ejecuta en Node.js. Nos da la posibilidad de crear tanto tests síncronos como asíncronos de una forma muy sencilla. Nos proporciona muchas utilidades para la ejecución y el reporte de los tests.
Chai es un librería de aserciones, la cual se puede emparejar con cualquier marco de pruebas de Javascript, para verificar si la respuesta del test es la esperada.
Comando para instalar las dependencias mocha y chai: npm install --save-dev mocha chai.

Javier Vargas

student•

Muy buen curso, muy directo sin rodeos y muy bien explicado… mil gracias!

José Molina

student•

var profe = "Sasha"
console.log(`Gracias ${profe}`)

Noe Mikhael Huaccharaque Ruiz

student•

fix:
*const profe

const profe = "Sasha"
console.log(`Gracias ${profe}`)

Juan Sáez García

student•

Supongo que soy tonto y me cuesta , pero si se explicase todo desde un principio, sin dar cosas por hecho en mi caso me ayudaría , Pero Bastante chulo

Cristian Camilo Cucunubá

student•

No seas tan negativo nadie nace aprendido y a cada uno le cuesta diferente aprender algo nuevo , pero con horas de practica todo se puede.

Daniel Santiago Cárdenas Muñoz

student•

Que buen curso, gran contenido y mejor cuando recibes buenos consejos que te ayudan a mejorar las practicas de programación !!!
Gracias.

Jesus Sandrea

student•

Siento que aprendí un montón, gracias sacha!! te la comiste con este curso! te mando un abrazo virtual jejeje

Edwin Balseca García

student•

Les comparto mis apuntes del curso, espero les sirva.

Existen muchas maneras de concatenar texto con funciones en JavaScript, una de ellas es usando " ", otra es ’ ', ambas seguidas de un +, y la otra nueva es utilizando una nomeclatura especial con y dentro si queremos colocar operaciones las ingresamos dentro de ${ }.
La manera de crear una funcion anonima en JavaScript es colocando function () { }, sin nombre, pero nunca podremos llamarla.
Maneras de asignar una funcion a una variable:
- let triangleArea = function (base, altura) { return base * altura / 2; }.
- let triangleArea = (base, altura) => {return base * altura / 2; }: Esto lo usamos si vamos a escribir muchas lineas de codigo dentro del parentesis.
- let triangleArea = (base, altura) => base * altura / 2; : Si solo es una linea, es mas convencional usar esta forma.
con let y var declaramos variables.
con const declaramos constantes.
Con arrow function podemos asignar una función a una variable que nos hace la lectura del código más legible.
Cuando ejecutamos funciones o metodos sobre los strings esa variable no se modifica a menos que se lo asignemos a otra variable.
toLowerCase() = Es una funcion de la clase string que nos convierte un string en minusculas.
toUpperCase() = Convierte un string en mayusculas.
endsWith(‘ar’) = Nos permite saber si un string termina con los caracteres que indiquemos entre parentecis.
startsWith(‘z’) = Con esto sabemos con que caracteres comienza un string;
slice(0, -2) = Esta funcion nos permite cortar caracteres desde un indice hasta otro, en este ejemplo indicamos que corte desde el inicio hasta 2 caracteres antes del final.
split() = Divide un objeto de tipo String en un array (vector) de cadenas mediante la separación de la cadena en subcadenas.
reverse() = coloca al revés (inversamente) una matriz.
join() une todos los elementos de una matriz.
Math.floor() = rendondea hacia abajo 3.9 = 3.
Math.ceil() = redondea para arriba 3.1 = 4.
Math.round() = redondea dependiendo 3.1 = 3, 3.5 = 4.
No se debe alterar la cantidad de elementos de elementos de un array mientras se esta iterando.
toFixed() = El número de digitos que aparecen después del punto decimal.
En JavaScript podemos ejecutar new Date() y puede recibir una fecha con año, mes (restandole 1), dia.
Para crear el objeto con la fecha actual utilizamos el new Date() solo, sin argumentos.
Los parametros son los datos que recibe una funcion y los argumentos son los que enviamos a una funcion.
Podemos restar estas dos fechas y resultado nos lo proporciona en milisegundos.
Forma de definir un objeto: const obj = { }.
Math.sqrt() = Para obtener la raiz cuadrada de un numero.
La POO de JavaScript se encuentra basada en prototipos y no en clases.
El método Object.create() crea un nuevo objeto con el objeto y propiedades del prototipo especificado.
El scope determina la accesibilidad (visibilidad) de las variables.
El método reduce() con el cual cuentan los arrays, nos permite ir iterando por todo el array y acumulando el valor en una variable.
El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.
El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.
Los closure son funciones que recuerdan el entorno en el cual fuerón creadas.
Las IIFE (Immediately-Invoked Function Expressions) son funciones que se ejecutan tan pronto como se definen.
Existen tres maneras de incorporar this al scope de una funcion, una es asignando this a una constante, otra es utilizando el metodo bind al final de la funcion ‘.bind(this)’ y la tercera es cambiando toda la funcion por un arrow function.
Métodos call() y apply(): A diferencia de bind(), ejecutan la función “padre” instantaneamente. De igual forma nos permiten establecer el scope y los parametros con la pequeña diferencia de que apply, recibe los parametros en un array.
ECMAScript es el estándar en el que se basa JavaScript.
Se llamó ECMAScript porque fue desarrollado por ECMA, una empresa dedicada a telecomunicaciones.
Si escribimos código con ECMAScript tiene que ser compatible con el navegador en el que queremos que corra.
Babel es una herramienta que te permite hacer compatible el código que usa funcionalidades de ECMAScript con los diferentes navegadores.
Para poder utilizar Babel debes tener instalado Node.
Un modulo es un pedazo de código encapsulado que se encarga de resolver alguna cosa en particular.
El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).
Sintaxis del Spread Operator; f(…iterableObj);
Las razones por las cuales nosotros vamos a querer escribir un modulo son dos, la primera es encapsulamiento y la segunda razon por la cual nosotros queremos escribir un modulo son las dependencias.
El método setTimeout() establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido, durante ese tiempo JavaScript manda la funcion a la cola de tareas “Task Queue” y espera a que la pila de ejecucion “Call Stack” este vacia.
Como funciona el EventLoop:
- Lo primero que se ejecuta es la declaración de las funciones.
- Cuando JavaScript ejecuta una línea la carga en una pila de ejecución.
- JavaScript solo ejecuta una cosa a la vez, por esto, debemos tenerla lo más limpia posible.
Un callback es una función que se pasa como parámetro a otra función, y la callback sólo se ejecuta cuando la función primordial/padre se ejecuta.
El método JSON.parse() analiza una cadena de texto como JSON, transformandolo en un objeto JSON.
Las Promesas son objetos y están asociadas con alguna tarea asincrónica.
Existen tres estados internos de las Promesas:
-Pending: Pendiente.
-Fullfiled: Se completó exitosamente.
-Rejected: Se produjo un error y no se puedo completar.
El método then() retorna una Promesa. Recibe dos argumentos: funciones callback para los casos de éxito y fallo de Promise.
El callback hell es un escadenamiento de muchos callbacks que produce un cuello de botella.
Fetch es un nuevo API para el acceso a recursos del servidor de manera asíncrona, basado en promesas.
Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca.
Con setInterval puedes ejecutar código cada cierto tiempo.
Los metodos clearTimeout() y clearInterval() sirven para cancelar los metodos setTimeout() y setInteval() respectivamente.
Memorizacion es guardar temporalmente valores que ya hemos calculado anteriormente.
Los iteradores nos permitirán hacer listas infinitas de elementos haciéndolos distintos a los arreglos (arrays) los cuales tienen un numero finito de elementos definidos.
Para decirle a JavaScript que nuestra función es un generador debemos indicarlo con un asterisco de la siguiente forma: function(asterisco).
Si creamos un generador debemos colocar la palabra clave yield la cual indica que cuando llamemos la función después de la primera vez, esta iniciará en la línea después de yield.
El operador === nos ayuda a comparar objetos, ejecutando la comparación no directamente a los datos del objeto sino, a la referencia del objeto.
Cuando asignamos un objeto a otro estamos haciendo que ambos apunten a la misma referencia, por eso al modificar un objeto el otro también se verá afectado, porque ambos tienen la misma referencia de memoria.
La inmutabilidad tiene por objetivo hacer que los parámetros de un objeto sean no modificables o inmutables.
Tenemos que decirle a NPM quienes somos, para ello, necesitamos pasar unos datos desde la terminal:
- npm set init.author.name “Tu nombre”
- npm set init.author.email “Tu correo”
- npm set init.author.url “Una url de tu sitio, inclusive puede ser una red social”
npm login = Para logearse con nuestra cuenta de npm.
Para que NPM entienda que es nuestro proyecto, necesitamos configurar una serie de parámetros, para ello, en la carpeta donde vamos a iniciar nuestro proyecto, utilizamos el comando: npm init.
La forma de exportar una funcion en javascript es con export default antes de la palabra funcion, si son varias funciones solo export.
Para importar una funcion usamos la exprecion import {funcion} from ‘archivoJS’, si queremos importar la funcion que esta por default omitimos {}.
Mocha es un framework de pruebas de JavaScript que se ejecuta en Node.js. Nos da la posibilidad de crear tanto tests síncronos como asíncronos de una forma muy sencilla. Nos proporciona muchas utilidades para la ejecución y el reporte de los tests.
Chai es un librería de aserciones, la cual se puede emparejar con cualquier marco de pruebas de Javascript, para verificar si la respuesta del test es la esperada.
Comando para instalar las dependencias mocha y chai: npm install --save-dev mocha chai.

Kevin Morales

student•

Muy bueno el curso, sin duda se aprende los fundamentos de Javascript de la manera correcta y dan ganas de continuar con más cursos sobre el lenguaje. Muy interesante todo y muy buen profesor Sacha!

Eduardo Rasgado Ruiz

student•

Excelente curso papu! Gracias como siempre Platzi.

Manuel Alberto Goicochea Medina

student•

yo si puedo ver el codigo del link

Yamid Vélez Muñoz

student•

Muy motivado con lo aprendido sobre los fundamentos de JS… con muchos retos para optimizar estos conocimientos obtenidos.

Cristian Franco Bedoya

student•

Excelente curso, el profesor explica muy bien todos los temas.

Darinel Valencia Hernández

student•

De verdad muy buen curso, aprendí mucho, eliminé lagunas que tenía en el lenguaje, muchas gracias, de verdad!!

Pedro Alvarado Garcia

student•

simplemente perfecto

Luis Alfredo Locon Peña

student•

CRACK!!!

Nestor de Valais

student•

Muy bueno el curso, me sirvió para afianzar conceptos. Muchas Gracias.

Rodolfo Miquilarena

student•

Muy bueno este curso de verdad excelente el instructor y todo el temario super claro, yo personalmente a pesar de tener ya experiencia en programacion el ambito web me ha parecido siempre algo misterioso, pero ahora gracias a este curso veo que es inclusive mucho mas sencillo a lo que estaba acostumbrado con un monton de conceptos que te hacen un mejor programador usando el KISS (Keep It Simple Stupid) , en fin excelente curso muchas gracias a platzi por la beca y muchisimas gracias a ti Sacha de verdad que abriste mi mente a un nuevo mundo , y mi objetivo es saber un poco de front-end y back-end con JS (react y node) estare proximo a hacer dichos cursos. En fin muchas gracias!

Platzi Mota

student•

Excelente curso!

Cierre del Curso

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

¡Aprendimos mucho!