¡LES DAMOS LA

BIENVENIDA!
¿Arrancamos?
RECUERDA PONER A GRABAR
LA CLASE
PRESENTACIÓN DE
ESTUDIANTES
Por encuestas de Zoom:
1. País
2. Conocimientos previos de
Backend
3. ¿Por qué elegiste el curso?
 DESAFÍOS Y ENTREGABLES
Son actividades o ejercicios que se realizan durante la cursada, para enfocarse en
la práctica.
 DESAFÍOS Y ENTREGABLES
Son actividades o ejercicios que se realizan durante la cursada, para enfocarse en
la práctica.

Desafíos genéricos Desafíos entregables

Ayudan a poner en práctica los conceptos y la Relacionados completamente con el Proyecto
teoría vista en clase No deben ser subidos a la Final. Deben ser subidos obligatoriamente a la
plataforma. plataforma hasta 7 días luego de la clase para
que sean corregidos.
 DESAFÍOS Y ENTREGABLES
Son actividades o ejercicios que se realizan durante la cursada, para enfocarse en
la práctica.

Desafíos complementarios Entregas del Proyecto Final

Desafíos que complementan a los entregables. Entregas con el estado de avance de tu proyecto
Son optativos y, de ser subidos a la plataforma a final que deberás subir a la plataforma a lo
tiempo y aprobados, suman puntos para el top largo del curso y hasta 7 días luego de la clase,
10. para ser corregidas por tu docente o tutor/a.
 PROYECTO FINAL
El Proyecto Final se construye a partir de los desafíos que se realizan clase a clase.
Se va creando a medida que el estudiante sube los desafíos entregables a nuestra
plataforma.

El objetivo es que cada estudiante pueda utilizar su Proyecto Final como parte de
su portfolio personal.

El proyecto final se debe subir a la plataforma la ante-última o última clase del

curso. En caso de no hacerlo tendrás 20 días a partir de la finalización del curso
para cargarlo en la plataforma. Pasados esos días el botón de entrega se
inhabilitará.
¿CUÁL ES NUESTRO
PROYECTO FINAL?
 E-commerce backend
Desarrollarás el backend de una aplicación de e-commerce para poder
vender productos de un rubro a elección.
El servidor se basará en un diseño en capas, orientado a MVC y su código
contendrá modernas estructuras de programación del poderoso lenguaje
ECMAScript.
El formato del servidor será un proyecto consistente en una estructura de
archivos, carpetas, configuraciones y base de datos, listas para ejecutarse bajo
el entorno Node.js.
 EJEMPLO

● Market Place by @arunabharjun (

Repositorio en GitHub)
 ¡IMPORTANTE!
Los desafíos y entregas de proyecto se deben cargar hasta siete días
después de finalizada la clase. Te sugerimos llevarlos al día.
Algunas recomendaciones
Este curso tiene un nivel avanzado, lo cual implica un gran desafío.
Queremos que tengas éxito y sobre todo, disfrutes del camino. Por
eso traemos algunas recomendaciones a continuación.
La práctica hace al maestro

A lo largo del curso encontrarás nuevos

conceptos cuya dificultad irá incrementando
gradualmente. Te sugerimos ser constante
con la práctica. Organiza en tu semana
momentos para repasar y practicar los temas
vistos, a fin de corroborar que los hayas
comprendido o anotar aquello que necesites
consultar.
¡Anímate a investigar!

En clase abordaremos los temas necesarios

para que puedas crear un proyecto que
cumpla con los requerimientos planteados en
la consigna. No obstante, sabemos que el
mundo de la programación es inmenso. Te
sugerimos amigarte con la investigación
para encontrar aquello que tu proyecto
necesita. Es una buena práctica para tu
futuro profesional.
Amígate con los after classes

Además de las clases de asistencia obligatoria,

organizaremos after classes para repasar y
profundizar los temas vistos, así como abrir
espacios de consulta. Si bien la asistencia es
optativa, te sugerimos que los tengas presentes
como recurso para mejorar tu experiencia. En
caso de no poder asistir, recuerda que quedarán
grabados.
Más vale pájaro en mano que cien volando

Queremos que logres realizar el mejor

Proyecto Final posible. Por eso es importante
que primero te centres en los requisitos o
piezas mínimas solicitados en la consigna, para
luego apuntar hacia ideas más ambiciosas. Esto
te permitirá alcanzar las metas paso a paso y
superar tus propios límites.
¡Arrancamos!
 Clase 1. Programación Backend

Principios de
programación Backend
y Javascript
 ● Entender la diferencia entre programación
Front end y Back end
● Comprender las nociones básicas para
programar utilizando Javascript y el
MERN Stack
● Comprender las estructuras y conceptos
OBJETIVOS DE LA fundamentales al programar utilizando
Javascript
CLASE
● Conocer las ventajas y el uso de los nuevos
elementos de lenguaje aportados por ES6
Programación Web
¿Qué es Front end y
Back end?
 Concepto

El Back end y el Front end son dos partes fundamentales de la

programación de una aplicación web. Al Front end se lo conoce
como el lado del cliente y al Back end como el lado del servidor
Lado Front End y Back End
 Front End
● Es la parte de una aplicación que interactúa con los usuarios
● Conocida como “el lado del cliente”.
● Todo lo que vemos en la pantalla cuando accedemos a un sitio
web o aplicación: tipos de letra, colores, efectos del mouse,
teclado, movimientos, desplazamientos, efectos visuales y otros
elementos que permiten navegar dentro de una página web.
 Back End
● Aplicaciones que viven en el servidor
● A menudo se le denomina “el lado del servidor”.
● Consiste en un servidor, una aplicación y una base de datos.
● Se toman los datos, se procesa la información y se envía al
usuario
Visto de otra manera...
MERN Stack
 Componentes

MongoDB ExpressJS ReactJS NodeJS

 Concepto
El stack MERN utiliza JavaScript como único lenguaje, por ello no
tendremos dificultades al familiarizarnos con cualquiera de estas
tecnologías, las cuales son mongoDB, Express, React y Node.js.
La ventaja que encontramos al utilizar este stack en específico es que
nos permite profundizar en un solo lenguaje de programación,
logrando así enfocar y reforzar nuestros conocimientos y con ello ser
más productivos.
 MERN Stack

● MongoDB base de datos no relacional

● ExpressJS framework para crear servidores en NodeJS
● ReactJS librería para desarrollar interfaces de usuario
● NodeJS entorno de ejecución de Javascript
 MongoDB
MongoDB (del inglés humongous, "enorme") es un sistema de base de
datos NoSQL orientado a documentos y de código abierto. Permite
almacenar Big Data gestionando altos volúmenes de información sin
degradar su performance en las búsquedas.
Su diseño brinda alta escalabilidad y disponibilidad.
 ExpressJS
Express.js es un framework para Node.js que sirve para ayudarnos a
crear aplicaciones web en menos tiempo, ya que nos proporciona
funcionalidades como el enrutamiento, opciones para gestionar
sesiones y cookies, entre otras funciones
 ReactJS
Es una librería Javascript de código abierto diseñada para crear
interfaces de usuario con el objetivo de facilitar el desarrollo de
aplicaciones web en una sola página (SPA). Es mantenido por
Facebook y la comunidad de software libre.
 NodeJS
Es un entorno en tiempo de ejecución multiplataforma para la capa
del servidor (pero no limitándose a ello) basado en JavaScript. Es de
código abierto, asíncrono, con E/S de datos en una arquitectura
orientada a eventos y basado en el motor V8 de Google.
Distintas maneras de
probar Javascript
Javascript en el frontend
La Consola Web

Al trabajar en el Front End de una aplicación web, una de las

herramientas que más utilizamos es la Consola Web
La Consola Web
1. Muestra información asociada con los logs de la página web:
solicitudes de red, JavaScript, CSS, errores de seguridad y
advertencias.
2. También muestra advertencias y mensajes informativos
explícitamente generados por Javascript en tiempo de ejecución
dentro del contexto de la página.
3. Permite interactuar con la página ejecutando expresiones
Javascript en el contexto de la misma.
 La información que se muestra en la consola puede ser extremadamente
útil cuando intentamos descubrir cómo resolver un problema.

Chrome Console
 Javascript Console Object
En JavaScript, console es un objeto que proporciona acceso a la
consola de depuración del navegador.
Este objeto nos proporciona varios métodos. Veamos los principales:

console.log()
console.error()
console.warn()
console.clear()
 console.log()
Se utiliza para imprimir la salida en la consola. Podemos poner
cualquier tipo de dato dentro del log ().

// console.log() método
console.log('abc');
console.log(1);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3, 4]); // array
console.log({a:1, b:2, c:3}); // objeto
 console.error()
Se utiliza para imprimir mensajes de error en la consola. Resulta útil para
probar código. Por default, el mensaje se resaltará en rojo.

// console.error() método
console.error('Este es un simple
error');
 console.warn()
Se utiliza para imprimir mensajes de advertencia en la consola. Por
default, el mensaje se resaltará en amarillo.

// console.error() método
console.warn('Esta es una
advertencia');
 console.clear()
Se utiliza para limpiar la consola. En el caso de Chrome, aparecerá un
mensaje dando aviso. En el caso de Firefox, no aparecerá nada.

// console.clear() método
console.clear();
Probemos la Consola Web!
Javascript en el backend
La Consola CLI

Al trabajar en el Back End de una aplicación web, una de las herramientas

que más utilizaremos será la Consola CLI
La Consola CLI:
1. Es una interfaz de línea de comandos (Command Line Interface)
2. Permite ejecutar nuestro programa de servidor
3. Muestra información asociada con los logs de los procesos de
backend: son mensajes de debug que enviamos desde nuestro
programa con el objeto console.
4. También muestra advertencias y mensajes informativos
explícitamente generados por Javascript en tiempo de ejecución
dentro del contexto del programa del servidor.
Ejemplo de consola CLI : https://cmder.net/
Ejemplo de consolas CLI : Terminal en Visual Studio
Code
 console.log() en Backend
Al igual que en Front End, se utiliza para imprimir un resultado,
contenido de una variable ó mensaje desde nuestro programa de
servidor en la consola CLI.
// console.log() método
console.log('abc');
console.log(1);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3, 4]); // array
console.log({a:1, b:2, c:3}); // objeto
Probemos la Consola CLI!
 ☕
BREAK
¡5/10 MINUTOS Y
VOLVEMOS!
Tipos de datos en
Javascript
 Variables y tipos de datos
Variable: es un espacio
reservado para almacenar un
dato que puede ser usado o
modificado tantas veces como se
desee.

Tipo de dato: es el atributo que

especifica la clase de dato que
almacena la variable.
 Tipos de datos
● Tipo Primitivos: Incluyen a las cadenas de texto (String), variables
booleanas cuyo valor puede ser true o false (Boolean) y números
(Number). Además hay dos tipos primitivos especiales que son Null
y Undefined. La copia es por valor.

● Tipo Objeto: Incluyen a los objetos (Object), a los arrays (Array) y

funciones. La copia es por referencia.
Javascript y ES6
 EcmaScript 6

ES6 o EcmaScript 2015, fue una enorme revisión que surgió en el año
2015 y trajo -dentro de varias polémicas- enormes avances en el
mundo de la programación JavaScript.
Entre sus mayores innovaciones se encuentra la declaración de
variables con let y const, la introducción de clases al lenguaje, y los
template strings.
Variables en Javascript
Recordemos...
● Una variable es un contenedor dinámico que nos permite
almacenar valores.
● Los valores pueden ser diversos tipos de datos, según la variable.
● Tal como lo indica su nombre, el valor de la variable puede
cambiar, permitiéndonos crear programas que funcionen
independientemente del valor de la variable.
Distintas maneras de crear
variables en Javascript
 Let y const
let y const son dos formas de declarar variables en JavaScript
introducidas en ES6 que limitan el ámbito de la variable al bloque
en que fue declarada (antes de ES6 esto no era así).

Es posible que se encuentren con ejemplos y

código en internet utilizando la palabra
reservada “var” para crear variables. Esta
es la manera en que se hacía antes de ES6, y
no se recomienda su uso!
 Let
Un bloque en JavaScript se puede entender como “lo que queda
entre dos llaves”, ya sean definiciones de funciones o bloques if,
while, for y loops similares. Si una variable es declarada con let en el
ámbito global o en el de una función, la variable pertenece al ámbito
global o al ámbito de la función respectivamente.
Ejemplo Let
Aquí la variable i es global y la
variable j es local.

Pero si declaramos una variable

con let dentro un bloque, que a
su vez está dentro de una
función, la variable pertenece
solo a ese bloque.
Ejemplo Let

Fuera del bloque donde se declara

con let, la variable no está
definida.
 Const
Al igual que con let, el ámbito (scope) para una variable declarada
con const es el bloque.
Sin embargo, const además prohíbe la reasignación de valores
(const viene de constant).
Ejemplo Const

Si se intenta reasignar una

constante se obtendrá un error.
 Mutabilidad y const
● Mientras que con let una variable puede ser reasignada, con
const no es posible.
● Si se intenta reasignar una constante se obtendrá un error tipo
TypeError.
● Pero que no se puedan reasignar no significa que sean
inmutables.
● Si el valor de una constante es algo "mutable", como un array o
un objeto, se pueden cambiar los valores internos de sus
elementos.
NO REASIGNABLE ≠ INMUTABLE
Ejemplo Mutabilidad
Por ejemplo, una constante se puede asignar a un objeto con determinadas
propiedades. Aunque la constante no se pueda asignar a un nuevo valor, sí
se puede cambiar el valor de sus propiedades.

Esto sería posible

Esto NO sería posible

Datos y Variables
Tiempo aproximado: 5 minutos
 Datos y variables
1) Definir variables variables que almacenen los siguiente datos:
● Un nombre: “pepe”
● Una edad: 25
● Un precio: $99.90
● Los nombres de mis series favoritas: “Dark”, “Mr Robot”, “Castlevania”
● Mis películas favoritas, en donde cada película detalla su nombre, el año de estreno, y
una lista con los nombres de sus protagonistas.
1) Mostrar todos esos valores por consola
2) Incrementar la edad en 1 y volver a mostrarla
3) Agregar una serie a la lista y volver a mostrarla
Funciones en Javascript
Declaración
 Declaración de una función
function nombre([param[,param[, ...param]]]) {
instrucciones
}

● nombre: Es el nombre de la función. Se puede omitir, en ese caso

la función se conoce como función anónima.
● param: Es el nombre de un argumento que se pasará a la función.
Una función puede tener hasta 255 argumentos.
● instrucciones: Son las instrucciones que forman el cuerpo de
la función
 Funciones Anónimas
function([param[,param[, ...param]]]) {
instrucciones
}

● Cuando una función se define sin un nombre, se conoce como una

función anónima
● La función se almacena en la memoria, pero el tiempo de ejecución
no crea automáticamente una referencia a la misma
● Hay varios escenarios donde las funciones anónimas son muy
convenientes.
 Usos de una función anónima
● Asignando una función anónima a una variable

var foo = function( ){ /*...*/ };

● Devolviendo una función anónima desde otra función

function foo( ) { return function( ){

/*...*/ } };
● Invocando inmediatamente una función anónima

(function( ){ var foo = ''; })( )

 Funciones IIFE
Las expresiones de función ejecutadas inmediatamente (“IIFE”: Immediately
Invoked Function Expressions), son funciones que se ejecutan tan pronto
como se definen.

Se componen por dos partes

● función anónima con alcance léxico encerrado
por el Operador de Agrupación ()
● expresión de función cuya ejecución es
inmediata ()
Scope
 Scope
● Indica el ámbito o alcance actual de ejecución.
● En él los valores y las expresiones son "visibles" o pueden ser
referenciados.
● Una función sirve como un cierre en JavaScript y, por lo tanto, crea un
ámbito
● Los Scope también se pueden superponer en una jerarquía, de modo que
los Scope secundarios tengan acceso a los ámbitos primarios, pero no al
revés.
Ejemplo Scope no válido
function exampleFunction() {
// x solo se puede utilizar en exampleFunction
const x = 'declarada en el scope local'
console.log(x)
}

console.log(x) // ReferenceError: x is not defined

Si la variable está definida exclusivamente dentro de la

función, no será accesible desde fuera de la misma o desde
otras funciones.
Ejemplo Scope válido
const x = 'declarada en el scope global'

function exampleFunction() {
console.log(x) // x existe acá adentro
}

exampleFunction() // esto no lanza error

console.log(x) // x existe acá afuera también

El siguiente código es válido debido a que la variable se

declara fuera de la función, lo que la hace global.
Closure
 Closure
● Una clausura o closure es una función que guarda referencias del estado
adyacente (ámbito léxico).
● En otras palabras, una clausura permite acceder al ámbito de una función
exterior desde una función interior.
● En JavaScript, las clausuras se crean cada vez que una función es
creada.
 Ejemplo Closure
Un closure es un tipo especial de objeto que combina dos cosas: una función, y
el entorno en que se creó la misma.

function crearGritarNombre(nombre) { El entorno está formado por las

const signosDeExclamacion = '!!!'
return function () {
variables locales que estaban dentro
console.log(`${nombre}${signosDeExclamacion}`) del alcance en el momento que se creó
}
el closure. En este caso, gritarCH
}
es un closure que incorpora la función
const gritarCH = crearGritarNombre('coderhouse') anónima, junto con el parámetro
gritarCH() // muestra por pantalla: coderhouse!!!
nombre y el string "!!!", que
existían cuando se creó.
Template String
 Template String

Las plantillas de texto (o Template Strings) son cadenas

literales de texto incrustadas en el código fuente que
permiten su interpolación mediante expresiones.
 Características
● Los template string utilizan las comillas invertidas ` (grave accent
o backtick) para delimitar las cadenas, en lugar de las comillas
sencillas o dobles.

● Si se utiliza ${ } dentro de su expresión se habilita la interpolación,

sustituyendo el fragmento por el valor al que apunta. Pueden
ejecutar código en su interior.

● Soportan texto multilínea, manteniendo el formato introducido,

incluyéndose los saltos de línea y las tabulaciones.
Funciones y Closures
Tiempo aproximado: 10 minutos
 Funciones y Closures

1) Definir la función mostrarLista que reciba una lista de datos y muestre su contenido,
si no está vacía, o de lo contrario muestre el mensaje: “lista vacía”. Luego, invocarla
con datos de prueba para verificar que funciona bien en ambos casos.
2) Definir una función anónima que haga lo mismo que la del punto 1, e invocarla
inmediatamente, pasando una lista con 3 números como argumento.
3) Definir la función crearMultiplicador que reciba un número y devuelva una
función anónima que reciba segundo número y dé como resultado el producto de
ambos. Luego, a partir de la función definida, crear dos funciones duplicar y triplicar, y
probarlas con diferentes valores.
 ☕
BREAK
¡5/10 MINUTOS Y
VOLVEMOS!
Clases
 Declaración de clases
class Cliente {
constructor (nombre, fecha, direccion) {
this.nombre = nombre;
this.fechaNacimiento = fecha;
this.direccion = direccion;
}
}
 Características
● El contenido de una clase es la parte que se encuentra entre las
llaves { }. En ella se declaran los atributos y los métodos, tanto de
instancia como de clase.
● Poseen un método constructor donde se declaran los atributos
usando la palabra reservada this.
● Un constructor puede usar la palabra reservada super para llamar al
constructor de una superclase.
● Las clases son sólo azucar sintáctica, es decir, no son una nueva
funcionalidad, solo una nueva manera de escribir lo que antes ya se
podía pero de otra manera menos convencional.
Ejemplo: Clase Persona
class Persona {
constructor(nombre, edad) {
this.nombre = nombre
this.edad = apellido
}

static saludoCorto = 'hola'

saludoCompleto() {
console.log(`buenaaass, soy `${this.nombre}`)
}

saludoEstatico() {
console.log(Persona.saludoCorto)
}
}
Operador new
 Funcionamiento

El operador new permite crear una instancia de un tipo de objeto

definido por el usuario. Se utiliza sobre una clase.

Realiza básicamente 3 tareas en la construcción

1. Crea un objeto vacío
2. Ejecuta el constructor de la clase en el contexto del objeto creado
3. Retorna el objeto
Ejemplo Operador new con class

const p = new Persona('pepe', 5)

console.log(p)

// muestra por pantalla:

// Persona { nombre: 'pepe', edad: 5 }
 Clases
Tiempo aproximado: 15 minutos
 Clases

En este ejercicio construiremos una herramienta que permita que diferentes personas puedan
llevar cuentas individuales sobre algo que deseen contabilizar, al mismo tiempo que nos
brinde una contabilidad general del total contado. Para ello:
1) Definir la clase Contador.
2) Cada instancia de contador debe ser identificada con el nombre de la persona
responsable de ese conteo.
3) Cada instancia inicia su cuenta individual en cero.
4) La clase en sí misma posee un valor estático con el que lleva la cuenta de todo lo
contado por sus instancias, el cual también inicia en cero.
 Clases

4) Definir un método obtenerResponsable que devuelva el nombre del responsable de

la instancia.
5) Definir un método obtenerCuentaIndividual que devuelva la cantidad contada por
la instancia.
6) Definir un método obtenerCuentaGlobal que devuelva la cantidad contada por todos
los contadores creados hasta el momento.
7) Definir el método contar que incremente en uno tanto la cuenta individual como la
cuenta general
 1

Clases
CLASES
Formato: Un documento de texto con nombre de archivo “ApellidoNombre” 1
con que cumpla la siguiente consigna.

>> Consigna:
1) Declarar una clase Usuario

2) Hacer que Usuario cuente con los siguientes atributos:

● nombre: String
● apellido: String
● libros: Object[]
● mascotas: String[]

Los valores de los atributos se deberán cargar a través del constructor, al momento de crear las
instancias.
CLASES
Formato: Un documento de texto con nombre de archivo “ApellidoNombre” 1
con que cumpla la siguiente consigna.

3) Hacer que Usuario cuente con los siguientes métodos:

● getFullName(): String. Retorna el completo del usuario. Utilizar template strings.
● addMascota(String): void. Recibe un nombre de mascota y lo agrega al array de
mascotas.
● countMascotas(): Number. Retorna la cantidad de mascotas que tiene el usuario.
● addBook(String, String): void. Recibe un string 'nombre' y un string 'autor' y debe
agregar un objeto: { nombre: String, autor: String } al array de libros.
● getBookNames(): String[]. Retorna un array con sólo los nombres del array de libros
del usuario.
4) Crear un objeto llamado usuario con valores arbitrarios e invocar todos sus métodos.
CLASES

>> Ejemplos:

● countMascotas: Suponiendo que el usuario tiene estas mascotas: ['perro', 'gato']

usuario.countMascotas() debería devolver 2.

● getBooks: Suponiendo que el usuario tiene estos libros: [{nombre: 'El señor de las moscas',autor:
'William Golding'}, {nombre: 'Fundacion', autor: 'Isaac Asimov'}] usuario.getBooks() debería
devolver ['El señor de las moscas', 'Fundacion'].

● getFullName: Suponiendo que el usuario tiene: nombre: 'Elon' y apellido: 'Musk'

usuario.getFullName() deberia devolver 'Elon Musk'
 ¿YA CONOCES LOS BENEFICIOS
QUE TIENES POR SER
ESTUDIANTE DE CODERHOUSE?
 BENEFICIOS
Haz clic aquí y conoce todos nuestros beneficios exclusivos
para estudiantes de Coderhouse.
Te puede interesar:
GitHub Student Developer Pack
● GitHub Pro GRATIS mientras eres estudiante.
● Ofertas valiosas para socios de GitHub Student
Developer Pack.
● Capacitación de expertos en campus de GitHub para
solicitantes calificados.
 TE INVITAMOS A QUE
COMPLEMENTES LA CLASE
CON LOS SIGUIENTES
CODERTIPS
VIDEOS Y
PODCASTS
● Aprende Programación Web y construye el futuro de nuestra humanid
ad
| Coderhouse

● Desarrollo freelance | Coderhouse

● Desarrollo profesional | Coderhouse

VIDEOS Y
PODCASTS
● CoderNews | Coderhouse

● Serie de Branding | Coderhouse

● Serie para Emprendedores | Coderhouse

● Serie Aprende a Usar TikTok | Coderhouse

● Serie Finanzas Personales | Coderhouse

● CoderConf | Coderhouse
¿PREGUNT
AS?
PARA LA PRÓXIMA
CLASE
Descargar VSCode
(o editor de código de tu preferencia)

Instalar la última versión de NodeJS

(en este momento es la versión 16.x.x)
 ¡MUCHAS
GRACIAS!
Resumen de lo visto en clase hoy:
- Conceptos de programación en
Javascript
- Novedades de ES6
OPINA Y VALORA ESTA
CLASE
#DEMOCRATIZANDOLAEDUC
ACIÓN