Programacion en Javascript

Módulo 1: Introducción a JavaScript
En este módulo, se le presentará JavaScript. Aprenderá por qué JavaScript es tan

integral para el desarrollo de software. Y obtendrá una visión general de cómo escribir
código JavaScript dentro del navegador. Además, conocerá los operadores más
comunes, así como las sentencias condicionales y los bucles.
Tras completar este módulo, será capaz de:
 Explicar la importancia de JavaScript en el desarrollo de software

 Demostrar cómo escribir código JavaScript dentro del navegador
 Demostrar cómo escribir código JavaScript básico
 Enumerar operadores comunes, sentencias condicionales y bucles
 Demostrar cómo utilizar variables y mostrar su valor en la consola
Módulo 2: Los bloques de construcción de un programa
Aquí aprenderá a utilizar objetos, matrices y funciones. Además, conocerá los métodos
incorporados más comunes y la diferencia entre cadenas indefinidas, nulas y vacías. Y
explorará tanto el manejo de errores como la programación defensiva.
Tras completar este módulo, será capaz de:
 Construir y utilizar objetos, matrices y funciones

 Enumerar algunos métodos incorporados comunes en objetos incorporados
 Describir el manejo de fallos y errores mediante try, catch, throw y
programación defensiva
 Explicar la diferencia entre cadenas indefinidas, nulas y vacías
 Demostrar cómo escribir código básico utilizando matrices, objetos y funciones
Módulo 3: Paradigmas de programación
Este módulo trata sobre la programación funcional y el paradigma de programación

orientada a objetos. Aprenderá qué es el ámbito en JavaScript. Explorará las diferencias
entre var, let y const. Y aprenderá a utilizar las clases y la herencia en la programación
orientada a objetos. Además, explorará cómo utilizar la escritura en JavaScript
utilizando características modernas como spread y rest. Construirá código que pueda
manipular el DOM y manejar eventos. Y utilizará JSON en JavaScript.
Después de completar este módulo, usted será capaz de:
 Esbozar los principios del paradigma de la programación funcional y de la

programación orientada a objetos
 Describir cómo funciona el ámbito en JavaScript
 Enumerar las diferencias entre var, let y const
 Utilizar clases y herencia en la programación orientada a objetos en JavaScript
 Escribir código JavaScript utilizando características más modernas como spread,
rest, cadenas de plantillas y módulos
 Construya código que manipule el DOM y maneje eventos
 Utilice JSON en JavaScript
Módulo 4: Pruebas y compatibilidad
Aquí aprenderá sobre Node.js y npm. Y explorará cómo instalar paquetes npm y cómo
trabajar con package.json. Además, aprenderá sobre las pruebas en JavaScript y
codificará una prueba unitaria sencilla en Jest.
Después de completar este módulo, usted será capaz de:
 Describir Node.js y npm

 Explicar cómo instalar paquetes npm
 Describir cómo trabajar con package.json
 Explicar el proceso de pruebas en JavaScript
 Enumerar los tres tipos de pruebas más frecuentes
 Demostrar cómo codificar una prueba unitaria sencilla en Jest
Módulo 5: Evaluación graduada
En el módulo final, aprenderá sobre la evaluación graduada. Después de completar las

unidades individuales de este módulo, sintetizará las habilidades adquiridas en el curso
para crear código para el "Pequeño fabricante de recibos de limón".
También tendrá la oportunidad de reflexionar sobre el contenido del curso y el camino

de aprendizaje que tiene por delante.
Cómo tener éxito en este curso

Estado: Traducido automáticamente del
Inglés
Traducido automáticamente del Inglés
Hacer un curso en línea puede resultar abrumador. ¿Cómo puede aprender a su propio
ritmo y alcanzar con éxito sus objetivos?
He aquí algunos consejos generales que pueden ayudarle a mantenerse centrado y en el

buen camino.
Establezca objetivos diarios de estudio

Pregúntese qué espera conseguir en su curso cada día. Establecer un objetivo claro
puede ayudarle a mantenerse motivado y a vencer la procrastinación. El objetivo debe
ser específico y fácil de medir, como por ejemplo "Veré todos los vídeos del módulo 2 y
completaré la primera tarea de programación". Y no olvide recompensarse cuando
avance hacia su objetivo.
Cree un espacio dedicado al estudio

Es más fácil recordar la información si se encuentra en el mismo lugar donde la
aprendió por primera vez, por lo que disponer de un espacio dedicado en casa para
realizar cursos en línea puede hacer que su aprendizaje sea más eficaz. Elimine
cualquier distracción del espacio y, si es posible, sepárelo de su cama o sofá. Una clara
distinción entre el lugar donde estudia y el lugar donde se toma los descansos puede
ayudarle a concentrarse.
Programe tiempo para estudiar en su calendario

Abra su calendario y elija un horario predecible y fiable que pueda dedicar a ver las
clases y completar las tareas. Esto le ayudará a asegurarse de que sus cursos no se
conviertan en la última cosa de su lista de tareas.
Consejo: Puede añadir las fechas límite de un curso de Coursera a su calendario de

Google, al de Apple o a otra aplicación de calendario.
Hágase responsable
Cuénteles a sus amigos los cursos que está realizando, publique sus logros en sus
cuentas de las redes sociales o publique en un blog sus tareas. Contar con una
comunidad y una red de apoyo de amigos y familiares que le animen marca la diferencia
Tome apuntes activamente

Tomar apuntes puede fomentar el pensamiento activo, impulsar la comprensión y
ampliar su capacidad de atención. Es una buena estrategia para interiorizar los
conocimientos tanto si está aprendiendo en línea como en el aula. Así pues, coja un
cuaderno o encuentre la aplicación digital que mejor se adapte a usted y empiece a
sintetizar los puntos clave.
Consejo: Mientras ve una clase en Coursera, puede hacer clic en el botón "Guardar
nota" situado debajo del vídeo para guardar una captura de pantalla en sus notas del
curso y añadir sus propios comentarios.
Únase a la discusión
Los foros de discusión del curso son un lugar estupendo para hacer preguntas sobre las
tareas, discutir temas, compartir recursos y hacer amigos. Nuestras investigaciones
demuestran que los alumnos que participan en los foros de debate tienen un 37% más de
probabilidades de completar un curso. Así que ¡haga un post hoy mismo!
Haga una cosa cada vez

La multitarea es menos productiva que centrarse en una sola tarea a la vez.
Investigadores de la Universidad de Stanford descubrieron que "las personas que son
bombardeadas regularmente con varios flujos de información electrónica no pueden
prestar atención, recordar información o cambiar de un trabajo a otro tan bien como los
que completan una tarea a la vez" Concéntrese en una cosa cada vez. Absorberá más
información y completará las tareas con mayor productividad y facilidad que si intentara
hacer muchas cosas a la vez.
Tómese descansos
Descansar el cerebro después de aprender es fundamental para un alto rendimiento. Si
se encuentra trabajando en un problema difícil sin avanzar mucho durante una hora,
tómese un descanso. Caminar al aire libre, darse una ducha o hablar con un amigo
puede ayudarle a recuperar energías e incluso darle nuevas ideas sobre cómo abordar el
proyecto.
¡Su viaje de aprendizaje comienza ahora!

Mientras se prepara para el examen del módulo o trabaja en la consecución de sus
objetivos de aprendizaje, le animamos a que
 Trabaje a lo largo de cada lección del itinerario de aprendizaje. Intente no

saltarse ninguna actividad o lección a menos que esté seguro de que ya conoce
esa información lo suficientemente bien como para seguir adelante.
 Aproveche la oportunidad de volver atrás y ver un vídeo o leer toda la
información proporcionada antes de pasar a la siguiente lección o módulo.
 Complete todos los cuestionarios y ejercicios de conocimientos y del módulo.
 Lea atentamente los comentarios cuando responda a los cuestionarios, ya que le
ayudarán a reforzar lo que está aprendiendo.
 Aproveche el entorno de aprendizaje práctico que le proporcionan los ejercicios.
Podrá obtener un refuerzo sustancial de su aprendizaje mediante la aplicación
paso a paso de sus conocimientos.
Escribir su primer código

Javascript
Estado: Traducido
automáticamente del Inglés
Traducido automáticamente del
Inglés
En esta lectura, aprenderá sobre los comentarios en JavaScript. Además,
aprenderá sobre el punto y coma en JavaScript: qué hace y por qué se
utiliza. A continuación, descargará un navegador si no lo tiene instalado
y ejecutará su primer fragmento de JavaScript utilizando la consola.
Comentarios en JavaScript
He elegido los comentarios como punto de partida por dos razones:
1. Su sintaxis: la forma en que se escriben los comentarios es fácil de

entender.
2. Escribir comentarios puede potenciarle como desarrollador.
En primer lugar, explicaré la sintaxis, y después, discutiré por qué poder
escribir comentarios es tan potenciador.
Comentarios en JavaScript: la sintaxis
Existen dos variedades de comentarios en JavaScript:
1. Comentarios de una sola línea

2. Comentarios multilínea
Un comentario de una sola línea se crea cuando se añaden dos
caracteres de barra diagonal uno detrás de otro, sin espacios.
1
// this is a comment!
Todo lo que sigue a un comentario de una sola línea en JavaScript es

ignorado por el navegador.
Esto significa que, esencialmente, puede escribir cualquier tipo de texto,

código, caracteres, emojis, lo que sea, y el navegador lo ignorará.
Un comentario de varias líneas, como su nombre indica, abarca varias

líneas de código y se crea con una barra diagonal y una estrella. Por
ejemplo:
1
2
3
4
5
6
7
/*
this
is
a
multi-line
comment
*/
También puede utilizar la sintaxis de comentario multilínea en una sola

línea de código, de la siguiente manera:
1
/* this is a multi-line comment on a single line */
Por qué es útil escribir comentarios
En este curso, se asume que usted nunca ha escrito una sola línea de
código JavaScript.
Con esta suposición en mente, considere los efectos de lo que acaba de

aprender, es decir, los efectos de aprender a escribir comentarios en
JavaScript:
1. Ahora puede expresar libremente sus ideas sobre cualquier código

que escriba.
2. Puede añadir comentarios a cualquier código que ya exista.
3. Esos comentarios pueden estar destinados a su futuro yo, o a los
colegas de su equipo de desarrollo.
Así pues, los comentarios son potenciadores porque facilitan la
comunicación con su yo futuro o con los miembros de su equipo,
permitiéndole hacer preguntas sobre el código, marcar el código como
"por hacer", o como "por mejorar", o simplemente explicar lo que hace un
determinado fragmento de código.
Además, puede incluso comentar parte del código de trabajo en un

archivo JavaScript, para evitar que se ejecute.
Efectivamente, los comentarios le permiten "desconectar" trozos de

código JavaScript.
Puede haber muchas razones para ello:
1. Intentar comprender cómo funciona una determinada pieza de

código.
2. Probar diferentes soluciones a un problema de codificación - sin
tener que borrar el código existente.
3. Depuración - tratando de precisar por qué su código está roto o se
comporta de forma poco fiable.
El punto y coma en JavaScript

En la lengua inglesa, el punto y aparte -el carácter.- se utiliza para
separar pensamientos en frases.
Al separar claramente los pensamientos con el punto final, evita que se

le malinterprete.
En JavaScript, el punto y coma -el carácter;- tiene un propósito similar:

se utiliza para delimitar claramente unas partes del código de otras.
Inserción automática de punto y coma (ASI)

Curiosamente, el navegador dispone de una función conocida como
"Inserción automática de punto y coma", es decir, hace un trabajo
bastante bueno "rellenando los espacios en blanco" en caso de que falte
un punto y coma donde debería haberlo.
Efectivamente, lo que eso significa para los desarrolladores es que la

mayor parte del tiempo, no hay diferencia si se añade un punto y coma o
no, ya que es probable que el navegador se dé cuenta de todos modos.
Por eso algunos desarrolladores dicen que no hay que molestarse en

añadir punto y coma en absoluto.
Sin embargo, otros desarrolladores sostienen que es mejor utilizarlo

siempre que sea necesario, en aras de la claridad.
La verdad es que la mayoría de las veces, puede pensar que añadir punto
y coma en JavaScript es opcional - y algo así como una preferencia
estilística.
Una nota sobre el uso de la consola en las

herramientas para desarrolladores de su
navegador
Como ya se ha mencionado anteriormente en este curso, una de las
razones por las que JavaScript es tan popular es porque es muy
accesible.
Para empezar con JavaScript, todo lo que necesita es un navegador. En

este curso utilizaré Google Chrome.
Una vez que haya instalado el navegador y lo ejecute, haga clic con el
botón derecho del ratón en la página web activa en ese momento y haga
clic en el comandoInspect del menú contextual del botón derecho.
Esto abrirá las Herramientas para desarrolladores y, a continuación,

puede hacer clic en la pestaña Consola para abrir la consola o,
alternativamente, pulsando la teclaESC activará y desactivará la consola
independientemente del panel de Herramientas para desarrolladores
activo en ese momento.
Puede escribir cualquier comando JavaScript que desee en la consola de

DevTools.
Si necesita escribir varias líneas de código antes de

ejecutarlas, asegúrese de pulsar la tecla de acceso
directo MAYÚS + INTRO para pasar a la siguiente
línea.
Fíjese en la distinción entre pulsar la teclaENTER para ejecutar el código
JavaScript que ha escrito, frente a pulsar el atajo de teclado SHIFT + ENTER
para pasar a la siguiente línea de código (en lugar de ejecutar el código
que ya ha escrito).
¡Esto es todo lo que necesita para empezar a escribir código JavaScript!
En las próximas lecciones, siéntase libre de seguir a lo largo de

cualquiera de dos maneras:
1. Utilizando el editor VS Code y la extensión Code Runner como se

ha descrito anteriormente
2. Utilizando el propio navegador Chrome, y ejecutando el código
dentro de la consola DevTools como se describe en esta lectura
Emitir un saludo en la consola

Ahora que ya sabe cómo acceder a la pestaña Consola de las
Herramientas para desarrolladores, vamos a utilizarla para ejecutar su
primer fragmento de código JavaScript real.
En Chrome, con las Herramientas para desarrolladores abiertas, haga

clic en el espacio vacío de la pestaña de la consola, justo a la derecha
del carácter azul>. Debería ver una línea vertical parpadeante (también
denominada "el cursor"). El cursor indica que puede escribir en la
consola.
Si escribe un código JavaScript válido, se ejecutará, es decir: se

procesará y podría dar lugar a algún tipo de salida.
Ahora utilizará la funciónconsole.log para dar salida a las palabras "Hola,

Mundo".
Para ello, escriba el siguiente comando en la consola:
1
console.log("Hello, World");
Si ha hecho todo según las instrucciones, las palabras "Hola, Mundo"
deberían salir en la consola.
He aquí otro comando más complejo, para mostrarle que el

comandoconsole.log viene con una serie de trucos.
Por ejemplo, ¿sabía que puede dar estilo a la salida en la consola?
En este fragmento de código, hay algunos añadidos: el tamaño de la

fuente es diferente y el color es azul:
1
console.log("%cHello, World", "color: blue; font-size: 40px");
console log with percentage c authors

Si copia y pega este fragmento de código, o quizás, simplemente lo
escribe en la consola, una vez que pulse la tecla ENTER para ejecutarlo,
obtendrá como salida en la consola las palabras "Hola, mundo". Esta vez,
sin embargo, el color de las letras será azul, y el tamaño de la fuente
será de 40px. Acaba de aprender un buen truco con la consola.
Si añade el%c justo después del carácter", podrá dar estilo a la salida de
la consola añadiendo el carácter, después del segundo"y luego, dentro de
otro par de caracteres" y", utilizar código CSS válido para dar estilo a las
palabras que desea que salgan en la consola.
El motivo de mostrarle este pequeño truco era, con un poco de suerte,

motivarle para que practique escribiendo varias palabras en el
comandoconsole.log, y utilice sus conocimientos de CSS para cambiar el
estilo de estas palabras en la salida de la consola. De esta forma, puede
que le resulte divertido practicar esta habilidad recién adquirida - y el
aprendizaje y la diversión siempre van bien juntos.
Salida de múltiples palabras en la consola

Para dar salida a múltiples palabras en la consola, puede unirlas
utilizando el carácter +, conocido formalmente como el "operador de
concatenación" cuando estamos uniendo trozos de texto, o el "operador
de suma", para realizar la operación matemática de sumar dos números.
He aquí un ejemplo de unión de tres trozos de texto separados:

console.log("Hello " + "there, " + "World"). La salida de este comando será Hola
Mundo.
He aquí un ejemplo de salida de tres trozos de texto separados utilizando

el carácter , en su lugar:
console.log("Hello ", "there, ", "World")
La salida de este comando seguirá siendo: Hola , mundo.
Operadores en profundidad
Estado: Traducido automáticamente
del Inglés
Inglés
En esta lectura, aprenderá sobre operadores adicionales, precedencia de operadores y
asociatividad de operadores. También le proporcionaré algunos ejemplos de operadores
lógicos.
1. Operadores adicionales
 Operador lógico AND:&&
 Operador lógico OR:||
 Operador lógico NOT:!
 El operador módulo:%
 El operador de igualdad ==
 El operador de igualdad estricta: ===
 El operador de desigualdad: !=
 El operador de desigualdad estricta: !==
 El operador de asignación de suma:+=
 El operador de asignación de concatenación:+=(es el mismo que el anterior - más
sobre esto más adelante)
El operador lógico AND en JavaScript:&&
El operador lógicoAND se utiliza, por ejemplo, para confirmar si varias comparaciones
devolverán verdadero.
En JavaScript, este operador consiste en dos símbolos ampersand juntos:&&.
Supongamos que tiene la tarea de idear un código que compruebe si la

variablecurrentTime se encuentra entre9 a.m. y5 p.m. El código necesita console.logtrue
sicurrentTime > 9y sicurrentTime < 17.
Aquí tiene una solución:
1
2
var currentTime = 10;
console.log(currentTime > 9 && currentTime < 17);
¿Cómo funciona este código?
Primero, en la línea uno, establezco la variablecurrentTime y le asigno el valor de10.
A continuación, en la línea dos registro en consola dos comparaciones:
currentTime > 9
currentTime < 17
También utilizo el operador lógico&& para unir las dos comparaciones.
Efectivamente, mi código se interpreta como sigue:
1
console.log(10 > 9 && 10 < 17);
La comparación de10 > 9 devolverátrue.
Asimismo, la comparación de10 < 17 devolverátrue.
Esto significa que puedo reescribir aún más la línea dos de mi solución de la siguiente
manera:
1
console.log(true && true);
En esencia, así es como funciona mi código.
Ahora, la pregunta es, ¿cuál será el resultado deconsole.log(true && true)?
Para entender la respuesta, necesita conocer el comportamiento del operador lógico &&.
El operador lógico&& devuelve un único valor: el booleanotrue ofalse, basándose en las

siguientes reglas:
 Devuelvetrue si tanto los valores a su derecha como a su izquierda se evalúan

atrue.
 Devuelvefalse en todos los demás casos
En otras palabras
console.log(true && true)devolverá:true
console.log(true && false)devolverá:false
console.log(false && true)dará como resultado:false
console.log(false && false)dará como resultado:false
El operador lógico OR en JavaScript:||

El operador lógico OR en JavaScript consiste en dos símbolos de tubería juntos: ||.
Se utiliza cuando se quiere comprobar si al menos una de las comparaciones dadas

evalúa atrue.
Considere la siguiente tarea: Necesita escribir un programa en JavaScript que

devuelvatrue si el valor de la variablecurrentTime no está entre9 y17. Dicho de otro modo,
su código necesita console.logtrue si el valor de la variablecurrentTime es menor que9 o
mayor que17.
He aquí una solución:
1
2
console.log(currentTime < 9 || currentTime > 17);
En la línea uno del código asigno el número7 a la variablecurrentTime.
En la línea dos, registro en la consola el resultado de comprobar sicurrentTime < 9

ocurrentTime > 17 se evaluarán comotrue.
Es lo mismo que esto:
1
2
console.log(true || false);
Estas son las reglas de cómo el operador|| evalúa los valores dados:
console.log(true || true)dará como resultado:true
console.log(true || false)dará como resultado:true
console.log(false || true)salida:true
console.log(false || false)dará como resultado:false
El operador lógico OR siempre devolverátrue, excepto cuando ambos lados se evalúen

comofalse. En otras palabras, para que el operador lógico OR devuelvafalse, los resultados
de ambas comparacionesdeben devolver falso.
Volviendo al ejemplo de comprobar sicurrentTime < 9 ocurrentTime > 17, esto tiene sentido:
la única vez que obtendráfalse es cuando el valor almacenado en la variablecurrentTime
sea mayor que9 y menor que17.
El operador lógico NOT:!

En JavaScript, el símbolo del operador lógico NOT es el signo de exclamación:!.
Puede pensar en el operador! como un interruptor, que invierte el valor booleano evaluado
detrue afalse y defalse atrue.
Por ejemplo, si asigno el valor booleano de true a la variable petHungry:
var petHungry = true;
...entonces puedo registrar por consola el hecho de que la mascota ya no tiene hambre
utilizando el operador ! para voltear el valor booleano almacenado dentro de la variable
petHungry, de esta forma:
console.log('Feeding the pet'); console.log("Pet is hungry: ", !petHungry); console.log(petHungry);
Esta es la salida del código anterior:
1
2
3
4
Pet is hungry: true
Feeding the pet
Pet is hungry: false
true
La razón del cambio de salida en la consola es porque ha volteado el valor almacenado
dentro de la variablepetHungry, detrue afalse.
Observe, sin embargo, que el código de la línea cinco del ejemplo anterior sigue dando
como salidatrue- eso se debe a que no he reasignado el valor de la variablepetHungry.
He aquí cómo podría cambiar permanentemente el valor almacenado en la
variablepetHungry detrue afalse:
1
2
var petHungry = true;
petHungry = !petHungry;
En este ejemplo, primero asigno el valor detrue a la nueva variable depetHungry. Después,
en la línea dos, asigno el valor opuesto, el!true- léase: no verdadero - a la variable
existentepetHungry.
El operador módulo:%
El operador módulo es otro operador matemático en JavaScript. Devuelve el resto de una
división.
Para demostrar cómo funciona, imagine que un pequeño restaurante que tiene 4 sillas por
mesa, y un total de 5 mesas, recibe de repente 22 comensales.
¿Cuántos comensales no podrán sentarse en el restaurante?
Puede utilizar el operador módulo para resolver esto.
1
console.log(22 % 5); // 2
El resultado es2, es decir, cuando divido22 y5, obtengo un4, y el resto es2, es decir, hay2
personas que no han podido conseguir un sitio en este restaurante.
El operador de igualdad,==
El operador de igualdad comprueba si dos valores son iguales.
Por ejemplo, esta comparación devuelve true: 5 == 5. Efectivamente, es cierto que 5 es

igual a 5.
He aquí un ejemplo en el que el operador de igualdad devuelve false: 5 == 6.

Efectivamente, es cierto que 5 no es igual a 6.
Además, aunque uno de los valores comparados sea de tipo número y el otro de tipo
cadena, el valor devuelto sigue siendo true: 5 == "5".
Esto significa que el operador de igualdad sólo compara los valores, pero no los tipos.
El operador de igualdad estricta,===

El operador de igualdad estricta compara tanto los valores como los tipos de datos.
Con el operador de igualdad estricta, la comparación 5 === 5 sigue devolviendo true. Los
valores a cada lado del operador de igualdad estricta tienen el mismo valor y el mismo tipo.
Sin embargo, comparar 5 == "5" devuelve ahora false, porque los valores son iguales, pero
el tipo de datos es diferente.
El operador de desigualdad,!=
El operador de desigualdad comprueba si dos valores no son iguales, pero no comprueba
la diferencia de tipos.
Por ejemplo, 5 != "5" devuelve falso, porque es falso afirmar que el número 5 no es igual al
número 5, aunque este otro número sea del tipo de datos cadena.
El operador estricto de desigualdad!==

Para que el operador de desigualdad estricta devuelva false, los valores comparados
tienen que tener el mismo valor y el mismo tipo de datos.
Por ejemplo, 5 !== 5 devuelve false porque es falso que el número 5 no tenga el mismo
valor y tipo de datos que otro número 5.
Sin embargo, al comparar el número 5 y la cadena 5, utilizando el operador de desigualdad

estricta, se obtiene true.
1
console.log(5 !== "5")
2. Utilización de los operadores+ en cadenas y

números
Combinación de dos cadenas utilizando el operador +
El operador+, cuando se utiliza con tipos de datos numéricos, suma dichos valores.
Sin embargo, el operador+ también se utiliza para unir tipos de datos de cadenas.
Por ejemplo:
1
2
"inter" + "net" // "internet"
"note" + "book" // "notebook"
Si el operador+ se utiliza para unir cadenas, entonces se denomina operador
deconcatenación, y se dirá que se utiliza paraconcatenar cadenas.
Cuando se utiliza con números, el operador+ es el operador desuma, y cuando se utiliza

con cadenas, el operador+ es eloperador de concatenación.
Combinación de cadenas y números mediante el operador +

Pero, ¿qué ocurre cuando se combinan una cadena y un número utilizando el operador +?
He aquí un ejemplo:
1
2
3
365 + " days" // "365 days"
12 + " months" // "12 months"
Aquí, JavaScript intenta ayudar convirtiendo los números en cadenas, y luegoconcatenando

el número y la cadena juntos, terminando conun valor de cadena.
El proceso de esta conversión "bajo cuerda" de valores en JavaScript se denomina

"coerción". JavaScriptcoacciona un valor numérico para convertirlo en un valor de cadena,
de modo que puede ejecutar el operador+ en tipos de datos dispares.
El proceso de coerción puede ser a veces un poco inesperado.
Considere el siguiente ejemplo:
1
1 + "2"
¿Cuál será el resultado de1 + "2"?
Observe que el valor de1 es del tipo de datos número, y el valor de"2" es del tipo de datos
cadena, por lo que JavaScript coaccionará el número1 a una cadena de"1", y luego lo
concatenará con la cadena de"2", por lo que el resultado será una cadena de"12".
El operador de asignación de suma,+=

El operador de asignación de suma se utiliza cuando se desea acumular los valores
almacenados en una variable.
He aquí un ejemplo: Usted está contando el número de horas extraordinarias trabajadas

en una semana.
No tiene que especificar el tipo de trabajo, sólo quiere contar el total de horas.
Podría codificar un programa para hacer el seguimiento, como éste:
1
2
3
4
5
6
var mon = 1;
var tue = 2;
var wed = 1;
var thu = 2;
var fri = 3;
console.log(mon + tue + wed + thu + fri); // 9
Puede simplificar el código anterior utilizando el operador de asignación de suma, como se
indica a continuación:
1
2
3
4
5
6
var overtime = 1;
overtime += 2;
overtime += 1;
overtime += 2;
overtime += 3;
console.log(overtime); // 9
El uso del operador de asignación de suma reduce las líneas de su código.
El operador de asignación de concatenación,+=

La sintaxis de este operador es exactamente la misma que la del operador de asignación
de suma. La diferencia está en el tipo de datos utilizado:
1
2
3
4
5
6
7
var longString = "";
longString += "Once";
longString += " upon";
longString += " a";
longString += " time";
longString += "...";
console.log(longString); // "Once upon a time..."
Precedencia de operadores y asociatividad

La precedencia de operadores es un conjunto de reglas que determina qué operador debe
evaluarse primero.
1
1 * 2 + 3
El resultado del código anterior es 5, porque el operador de multiplicación tiene
precedencia sobre el operador de suma.
La asociatividad de operadores determina cómo funciona la precedencia cuando el código

utiliza operadores con la misma precedencia.
Existen dos tipos
 asociatividad de izquierda a derecha

 asociatividad de derecha a izquierda
Por ejemplo, el operador de asignación es asociativo de derecha a izquierda, mientras que
el operador mayor que es asociativo de izquierda a derecha
Ejercicio: Uso avanzado de

operadores
del Inglés
Inglés
Tarea 1: Utilización del operador lógico &&
Usted está codificando un juego RPG, en el que cada personaje tiene ciertos niveles de
habilidad basados en el valor guardado en su puntuación.
1. Cree una variable llamada score y ajústela a 8

2. Utilice console.log() que incluye la cadena "Mid-level skills:" y compara la variable
score por encima de 0 y por debajo de 10 utilizando el operador &&
La salida esperada en la consola debería ser: "Mid-level skills: true".
EjecutarRestablecer
Tarea 2: Utilizar el operador lógico ||

Imagine que está codificando un videojuego. Actualmente, está a punto de codificar
algunos fragmentos relacionados con la condición de finalización del juego.
Debe codificar una nueva variable llamada timeRemaining y establecerla en 0. También

debe codificar una nueva variable llamada energy y establecerla en 10.
A continuación, debe escribir un fragmento de código que pueda utilizarse para determinar
si el juego ha terminado, en función de si el valor de la variable timeRemaining es 0 o el
valor de la variable energy es 0.
Complete la tarea siguiendo los siguientes pasos:
1. Declare la variable timeRemaining, y asígnele el valor de 0.

2. Declare la variable energy, y asígnele el valor de 10.
3. Registre en la consola los siguientes parámetros: "Game over: ", y timeRemaining
== 0 || energy == 0
Observe que la salida esperada en la consola debe ser: "Game over: true".
1
EjecutarRestablecer
Pruebe a cambiar la variable timeRemaining por cualquier valor superior a 0 y vea cómo
afecta al resultado.
Tarea 3: Utilizar el operador de módulo, %, para comprobar si un

número dado es impar
Necesita codificar un pequeño programa que tome un número y determine si es un número
par (como 2, 4, 6, 8, 10).
Para realizar esta tarea, necesita declarar seis variables, como se indica a continuación:
1. A la primera variable, llamada num1, se le debe asignar un valor numérico de 2.

2. A la segunda variable, llamada num2, se le debe asignar un valor numérico de 5.
3. A la tercera variable, llamada test1, se le debe asignar el cálculo de num1 % 2.
Nota: la ejecución de este código devolverá un número.
4. A la cuarta variable, llamada test2, se le debe asignar el cálculo de num2 % 2. Nota:
la ejecución de este código también devolverá un número.
5. A la quinta variable, llamada result1, se le debe asignar el resultado de comparar si
el número almacenado en la variable test1 no es igual a 0, es decir, esto: test1 == 0.
6. A la sexta variable, llamada result2, se le debe asignar el resultado de comparar si
el número almacenado en la variable test2 no es igual a 0, en otras palabras, test2
== 0.
Ejecute el registro de la consola dos veces después de haber configurado las variables:
1. El primer registro de consola debería tener el siguiente código entre paréntesis:

"Is", num1, "an even number?", result1
2. El segundo registro de la consola debe tener el siguiente código entre paréntesis:
"Is", num2, "an even number?", result2
Nota: La salida a la consola debería ser la siguiente:
Is 2 an even number? true
Is 5 an even number? false
EjecutarRestablecer
Inténtelo usted mismo con diferentes valores para explorar el operador módulo.
Tarea 4: Sumar números utilizando el operador +

Registre en la consola el resultado de sumar dos números, 5 y 10, utilizando el operador +.
Nota: Esta tarea debe completarse en una sola línea de código. La salida en la consola
debe ser 15.
1
EjecutarRestablecer
Tarea 5: Concatene números y cadenas utilizando el operador +

Codifique tres variables:
1. La primera variable debe ser una cadena con el siguiente valor: "Now in ". Nombre
la variable now.
2. La segunda variable debe ser un número con el valor: 3. Nombre la variable three.
3. La tercera variable debe ser una cadena con el siguiente valor: "D!". Nombre la
variable d.
4. Registre en la consola el siguiente código: now + three + d.
Nota: La salida esperada debería ser: "Now in 3D!".
EjecutarRestablecer
Tarea 6: Utilizar el operador += para acumular valores en una

variable
Codifique una nueva variable y nómbrela counter, asignándole el valor de 0.
En la línea siguiente, utilice el operador += para incrementar el valor de contador en 5.
En la línea siguiente, utilice el operador += para aumentar el valor de contador en 3.
En la cuarta línea, registre en la consola el valor de la variable counter.
Nota: El valor de salida debe ser 8.
Mejoras en JavaScript
del Inglés
Inglés
En esta lectura, conocerá la historia de JavaScript y la importancia de ECMA (Asociación
Europea de Fabricantes de Ordenadores) y ECMAScript.
JavaScript es un lenguaje de programación que tuvo unos comienzos humildes.
Fue creado en tan sólo 10 días en 1995 por una sola persona, Brendan Eich, a quien se le
encargó construir un lenguaje de scripting sencillo para utilizarlo en la versión 2 del
navegador Netscape. Inicialmente se llamó LiveScript, pero como el lenguaje Java era tan
popular en aquella época, se cambió el nombre a JavaScript, aunque Java y JavaScript no
están relacionados en modo alguno.
Durante los primeros años, tras su creación, JavaScript fue un simple lenguaje de scripting
para añadir efectos mouseover y otra interactividad. Esos efectos se añadían a las páginas
web mediante el elemento HTML<script>.
Dentro de cada uno de los elementos script, podía haber algo de código JavaScript.
Debido a la regla de que HTML, CSS y JavaScript deben ser retrocompatibles, incluso el
código más avanzado escrito en JavaScript hoy en día acaba escribiéndose entre esas
etiquetas script.
Con el paso de los años, JavaScript se hizo cada vez más potente y, en los últimos
tiempos, no ha dejado de figurar entre los tres lenguajes más utilizados.
En 1996, Netscape llegó a un acuerdo con la organización conocida como ECMA

(Asociación Europea de Fabricantes de Ordenadores) para redactar la especificación del
lenguaje JavaScript, y en 1997 se publicó la primera edición de la especificación
ECMAScript.
La ECMA publica esta especificación como el estándar ECMA-262.
Se puede pensar en un estándar como una forma acordada de cómo deben funcionar las
cosas. Así, ECMA-262 es un estándar que especifica cómo debe funcionar el lenguaje
JavaScript.
Ha habido 12 actualizaciones de ECMA-262 - la primera fue en 1997.
JavaScript como lenguaje no es una entidad completamente separada e independiente.

Sólo existe como implementación. Esta implementación se conoce como motor JavaScript.
Tradicionalmente, el único entorno en el que era posible ejecutar un motor JavaScript, era
el navegador. Más concretamente, un motor JavaScript no era más que otro bloque de
construcción del navegador. Estaba ahí para ayudar a un navegador a cumplir el objetivo
de sus usuarios de utilizar Internet para trabajar, investigar y jugar.
Así pues, cuando los desarrolladores escriben código JavaScript, lo hacen para interactuar
con un motor JavaScript. Dicho de otro modo, los desarrolladores escriben código
JavaScript para poder "hablar con" un motor JavaScript.
Además, el propio motor JavaScript viene con diferentes formas de interactuar con otras
partes del navegador. Éstas se conocen como API del navegador.
Así, el código que se escribe en el lenguaje de programación JavaScript permite: 1.

Interactuar con el motor JavaScript dentro del navegador 2. Interactuar con otras
funcionalidades del navegador que existen fuera del motor JavaScript, pero que siguen
estando dentro del navegador.
Aunque tradicionalmente sólo era posible interactuar con el motor JavaScript dentro del
navegador, todo esto cambió en 2009, cuando Ryan Dahl creó Node.js.
A él se le ocurrió una forma de utilizar un motor JavaScript como una entidad

independiente. De repente, era posible utilizar JavaScript fuera del navegador, como un
programa independiente en la línea de comandos o como un entorno del lado del servidor.
Hoy en día, JavaScript es omnipresente y se ejecuta en navegadores, en servidores, en

realidad, en cualquier dispositivo que pueda ejecutar un motor JavaScript.
Ejemplos condicionales
Inglés
En esta lectura, aprenderá cuándo utilizar la sentencia if else y cuándo utilizar la
sentencia switch.
Tanto if else como switch se utilizan para determinar el flujo de ejecución del programa
en función de si se han cumplido o no algunas condiciones.
Por eso a veces se las denomina sentencias de control de flujo. En otras palabras,
controlan el flujo de ejecución de su código, de forma que parte del código puede
omitirse, mientras que otra parte puede ejecutarse.
En el corazón de ambas estructuras de control de flujo se encuentra la evaluación de una

o más condiciones.
Por lo general, if else es más adecuada si existe una opción binaria en la condición.
Por ejemplo, en lenguaje llano:si hace sol, póngase gafas de sol. Si no, no las lleve.
En este caso, utilizar una sentencia if es una elección obvia.
Cuando el número de resultados posibles de las comprobaciones de veracidad es menor,

aún es posible utilizar una sentencia if else, como:
1
2
3
4
5
6
7
8
9
10
if(light == "green") {
console.log("Drive")
} else if (light == "orange") {
console.log("Get ready")
} else if (light == "red") {
console.log("Dont' drive")
} else {
//this block will run if no condition matches
console.log("The light is not green, orange, or red");
}
Sin embargo, si hay muchos resultados posibles, la mejor práctica es utilizar una
sentencia switch porque es más fácil menos verbosa. Al ser más fácil de leer, es más
sencillo seguir la lógica y, por tanto, se reduce la carga cognitiva de leer múltiples
condiciones.
No obstante, no se trata de una regla grabada en piedra. Se trata simplemente de una

elección estilística.
Para reforzar este punto, he aquí un ejemplo de la anterior sentencia condicional if else,
utilizando la sintaxis switch:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//converting the previous if-else example with switch-case
switch(light) {
case 'green':
console.log("Drive");
break;
case 'orange':
console.log("Get ready");
break;
case 'red':
console.log("Don't drive");
break;
default:
//this block will run if no condition matches
console.log('The light is not green, orange, or red');
break;
}
Usos de los bucles

del Inglés
Inglés
En esta lectura, discutiremos, a un nivel muy alto, las razones para utilizar bucles en
JavaScript.
Tenga en cuenta que mantendremos esta discusión a alto nivel porque hay múltiples
"piezas del rompecabezas" que aún faltan para su comprensión en este punto.
Por eso no nos enfrascaremos en los detalles de la sintaxis y la implementación, sino que
simplemente discutiremos cómo y por qué se utilizan los bucles en el trabajo diario de los
desarrolladores de JavaScript.
Considere el siguiente ejemplo: Usted trabaja como desarrollador para una tienda en línea.
La tienda vende cubos de letras para niños pequeños, y toda la sección "Compre ahora"
del sitio está organizada en un diseño en el que cada cubo a la venta se muestra en un
simple componente de tarjeta, con una imagen del cubo, la letra que enseña, una breve
descripción y el precio.
Las tarjetas están organizadas en filas, de modo que cada fila contiene tres tarjetas, tres
letras diferentes.
Cada tarjeta es una vista previa de ese cubo de letras específico a la venta, y también es
un enlace a una página entera, dedicada a proporcionar más información sobre los cubos,
su valor didáctico, y a proporcionar al visitante una forma de completar su proceso de
compra.
Ahora, he aquí una pregunta rápida: ¿dónde encajarían los bucles para mostrar esta
cuadrícula de tarjetas con los cubos de letras en oferta?
Para entender cómo funciona esto, permítame codificar un prototipo básico de cómo
podría funcionar.
Como todavía no tiene los conocimientos suficientes para mostrar diseños de sitios web en
el navegador con la ayuda de JavaScript, por ahora tendré que conformarme con utilizar
una simple cadena y la consola.
Aún así, será un ejercicio divertido.
1
2
3
4
5
6
var cubes = 'ABCDEFG';
//styling console output using CSS with a %c format specifier
for (var i = 0; i < cubes.length; i++) {
var styles = "font-size: 40px; border-radius: 10px; border: 1px solid
blue; background: pink; color: purple";
console.log("%c" + cubes[i], styles)
}
EjecutarRestablecer
Nota: Para que se apliquen los estilos, intente ejecutar este fragmento de código en la consola de
su navegador.
Eso es, con este simple código, la salida en la consola muestra cada letra en una línea
separada, con el estilo de un cubo de letras para niños pequeños.
El código en sí debería resultarle familiar en su mayor parte, salvo por elcubes.length y la

sintaxiscubes[i].
Sin entrar en demasiados detalles, he aquí ambos fragmentos de código explicados de la

forma más sencilla posible.
Elcubes.length devuelve un número. Comocubes es una cadena de caracteres, elcubes.length

me da la longitud de la cadena guardada en la variable.
Así que esto me da el número 7, haciendo que mi bucle for tenga este aspecto:
1
2
3
4
5
6
var cubes = 'ABCDEFG';
//styling console output using CSS with a %c format specifier
for (var i = 0; i < 7; i++) {
var styles = "font-size: 40px; border-radius: 10px; border: 1px solid
blue; background: pink; color: purple";
console.log("%c" + cubes[i], styles)
}
La segunda pieza de código que es nueva aquí es el fragmentocubes[i].
Esto simplemente se dirige a cada letra individual en el bucle, basado en el valor actual de
la variablei.
En otras palabras,cubes[i], cuandoi es igual a0, es:A.
Entonces,cubes[i], cuandoi es igual a1, es:B.
Esto continúa durante tantos bucles como ejecute mi bucle for - y esto viene determinado
por el valorcubes.length.
También es muy versátil, ya que, si yo, por ejemplo, decidiera cambiar la longitud de la
cadenacubes, no tendría que actualizar la condición dei < cubes.length, porque se actualiza
automáticamente cuando cambio la longitud de la cadenacubes.
Existen otras formas de almacenar datos en aplicaciones JavaScript de las que no ha oído
hablar.
Pero podemos utilizar el mismo enfoque con esos otros tipos de datos, para conseguir
resultados que esencialmente funcionan según el mismo principio que el que acabamos de
describir.
El uso de bucles es la esencia del enfoque adoptado en el desarrollo de muchas piezas

diferentes de funcionalidad en el software actual.
Algunos ejemplos adicionales

Si estoy codificando un cliente de correo electrónico, obtendré algunos datos estructurados
sobre los correos electrónicos que se mostrarán en la bandeja de entrada, y luego utilizaré
un bucle para mostrarlos realmente de una manera bien formateada.
Si estoy codificando un sitio de comercio electrónico de venta de coches, obtendré una

fuente de datos bien estructurados sobre cada uno de los coches, y luego utilizaré un
bucle sobre esos datos para mostrarlos en la pantalla.
Si estoy codificando un calendario en línea, haré un bucle sobre los datos contenidos en
cada uno de los días para mostrar un calendario con un formato agradable.
Hay muchos, muchos otros ejemplos de uso de bucles en el código.
Utilizar bucles con datos formateados adecuadamente para una tarea determinada es un
componente crucial de la construcción de software.
En las lecciones que siguen, aprenderemos distintas formas de agrupar datos relacionados
y de mostrarlos en pantalla utilizando JavaScript.
Cuando se combina con lo que ya ha aprendido sobre bucles, esto le proporciona las
habilidades necesarias para construir varios tipos de interfaces de usuario en las que haya
información repetitiva.
Algunos ejemplos más específicos incluyen
 hacer un bucle sobre los títulos de las entradas de un blog en algunos datos
estructurados, y mostrar cada título de entrada de blog en la página de inicio de un
blog
 recorrer en bucle las publicaciones de las redes sociales en algunos datos
estructurados y mostrar cada una de ellas en función de determinadas condiciones
 realizar un bucle sobre algunos datos estructurados sobre la ropa disponible para
la venta en una tienda de ropa en línea, y mostrar los datos pertinentes para cada
artículo de ropa
Ahora comprende la importancia de saber trabajar con bucles en JavaScript. En las
próximas lecciones, aprenderemos otra información relevante que le permitirá ser capaz
de hacer esto.
Construir y llamar funciones

Inglés
En esta lectura, aprenderá a construir e invocar una función. El propósito de esta lectura
es proporcionarle un ejemplo de declaración de función (construir) y de invocación de
función (llamar). En la próxima lección escribirá el código.
Al final de esta lectura deberá ser capaz de:
 Codificar funciones sencillas que puedan aceptar un array e iterar a través de él

Empecemos por dar un nombre a nuestra declaración de función:
1
2
3
function listArrayItems(arr) {
// ... code to be added ...
}
Así pues, he declarado una funciónlistArrayItems, y la he configurado para que acepte
un único parámetro,arr- que significa matriz.
Ahora, necesitaré codificar un bucle for para hacer un bucle sobre un array.
Como ya hemos visto en lecciones anteriores de este curso, un bucle for necesita la
siguiente información:
1. el valor inicial del contador del bucle como variable temporali
2. la condición de salida (el valor máximo de la variable contador del bucle i, por encima
del cual el bucle deja de ejecutarse)
3. cómo actualizar el valor dei después de cada bucle
Esta es la información que utilizaré en la declaración de esta función: 1. El contador

inicial del bucle será0. La razón de ponerlo a cero se debe a que las matrices también se
cuentan a partir de cero.
Esto significa que tendré un mapeo uno a uno del valor actual de la variablei en
cualquier momento dado, correspondiente a la misma posición de índice de cualquier
elemento de la matrizarr 2.
La condición de salida del bucle for es cuando el valor dei es igual o mayor
quearr.length.
Dado quearr.length cuenta el número de elementos de la matriz a partir de uno, y que

los elementos de la matriz se indexan a partir de cero, esto significa efectivamente que
en cuantoi sea igual aarr.length, el bucle terminará y se ejecutará cualquier otro código
posterior.
Esto significa prácticamente que la condición de salida de este bucle for serái <
arr.length devolviendofalse.
En otras palabras, mientrasi < arr.length sea verdadero, este bucle for continuará
ejecutándose. 3. Para asegurarme de que no se salta ninguno de los elementos de la
matrizarr, tengo que incrementar el valor dei en1 después de cada bucle.
Ahora que sé exactamente cómo debe comportarse mi bucle for, puedo añadirlo a mi
funciónlistArrayItems():
1
2
3
4
5
for (var i = 0; i < arr.length; i++) {
// ... code pending here ...
}
}
Ahora sólo me queda decidir cómo quiero dar salida a cada elemento de la matrizarr
recibida.
Puede ser tan sencillo como registrar en la consola el índice de elemento del array del
valor actual dei:
1
2
3
4
5
console.log(arr[i]) //display the array item where the index is e
uqal to i
}
}
Si ahora invoco la funciónlistArrayItems, puedo, por ejemplo, darle la siguiente matriz

de colores:
1
2
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink
'];
listArrayItems(colors); //display all items in the array at once
La salida será:
1
2
3
4
5
6
7
red
orange
yellow
green
blue
purple
pink
Puedo actualizar la salida como quiera. Por ejemplo, aquí están mis elementosarr con
un número delante de cada elemento:
1
2
3
4
5
6
7
8
//function that takes an array as input and display all items of this arr
ay
console.log(i, arr[i])
}
}
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink
'];
listArrayItems(colors);
Ahora la salida del código anterior será la siguiente:
1
2
3
4
5
6
7
0 'red'
1 'orange'
2 'yellow'
3 'green'
4 'blue'
5 'purple'
6 'pink'
Para iniciar el recuento desde uno en lugar de cero, puedo actualizar mi declaración de
función de la siguiente manera:
1
2
3
4
5
console.log(i+1, arr[i])
}
}
Invocando la declaración de función anterior, actualizada, en mi matrizcolors, obtendré

ahora la siguiente salida:
1
2
3
4
5
6
7
1 'red'
2 'orange'
3 'yellow'
4 'green'
5 'blue'
6 'purple'
7 'pink'
Incluso puedo añadir una o más condiciones, como por ejemplo:
1
2
3
4
5
6
7
8
9
if (arr[i] == 'red') {
console.log(i*100, "tomato!")
} else {
console.log(i*100, arr[i])
}
}
}
Ahora estoy añadiendo flujo de control justo dentro de mi función, basado en si un

miembro específico del array coincide con un valor específico - en este caso la
cadena"red".
Invocando mi nueva versión actualizada de la funciónlistArrayItems sobre el

arraycolors obtendré ahora la siguiente salida:
1
2
3
4
5
6
7
0 'tomato!'
100 'orange'
200 'yellow'
300 'green'
400 'blue'
500 'purple'
600 'pink'
Literales de objeto y la notación de punto

Inglés
Al final de esta lectura, será capaz de:
 Explicar una de las tres formas habituales de construir objetos ( utilizando la

notación literal de objeto)
 Esbozar la forma habitual de añadir nuevas propiedades a los objetos (o
actualizar las existentes) utilizando la notación de puntos
Literales de objeto y la notación de puntos
Una de las formas más comunes de construir un objeto en JavaScript es utilizando la
sintaxis de literal de objeto:{}.
Para poder acceder a este literal de objeto, es muy común asignarlo a una variable,
como:
1
var user = {}; //create an object
Ahora se asigna un literal de objeto a la variableuser, lo que significa que el objeto al

que está ligado puede ampliarse y manipularse de infinidad de formas.
A veces, se puede construir inmediatamente un objeto completo, utilizando la sintaxis

del literal de objeto, especificando las propiedades del objeto, delimitadas como pares
clave-valor, utilizando la sintaxis que ya se trató en un punto anterior de esta lección.
He aquí uno de esos objetos construidos previamente:
1
2
3
4
5
6
7
8
9
//creating an object with properties and their values
var assistantManager = {
rangeTilesPerTurn: 3,
socialSkills: 30,
streetSmarts: 30,
health: 40,
specialAbility: "young and ambitious",
greeting: "Let's make some money"
}
La belleza de esta sintaxis es que es muy fácil de leer.
Consta esencialmente de dos pasos:
1. Declarar una nueva variable y asignarle un literal de objeto - en otras palabras,

esto:var assistantManager = {}
2. Asignar los valores a cada una de las claves del objeto, utilizando el operador de
asignación,=
Observe que es muy fácil construir cualquier tipo de objeto en JavaScript utilizando esta
sintaxis de ejemplo.
Por ejemplo, aquí tiene un objetotable:
1
2
3
4
5
var table = {
legs: 3,
color: "brown",
priceUSD: 100,
}
Para acceder al objetotable, puedo simplemente registrar por consola el objeto

completo:
1
console.log(table);//display the object in the developer console
El valor devuelto es el objetotable completo:
1
{legs: 3, color: 'brown', priceUSD: 100}
Además, puedo registrar por consola cualquier propiedad individual, así:
1
console.log(table.color); // 'brown'
Ahora que tengo esta "receta sintáctica", puedo construir cualquier otro objeto de forma
similar:
1
2
3
4
5
var house = {
rooms: 3,
color: "brown",
priceUSD: 10000,
}
Un enfoque alternativo de la construcción de objetos es guardar primero un literal de

objeto vacío en una variable, luego utilizar la notación de puntos para declarar nuevas
propiedades sobre la marcha, y utilizar el operador de asignación para añadir valores a
esas propiedades; por ejemplo:
1
2
3
4
var house2 = {};
house2.rooms = 4;
house2.color = "pink";
house2.priceUSD = 12345;
Además, nada me impide combinar ambos enfoques. Por ejemplo:
1
2
3
console.log(house); // {rooms: 3, color: "brown", priceUSD: 10000}
house.windows = 10;
console.log(house); // {rooms: 3, color: "brown", priceUSD: 10000, window
s: 10}
Esta flexibilidad significa además que puedo actualizar propiedades ya existentes, no

sólo añadir nuevas:
1
2
house.windows = 11;
console.log(house); // {rooms: 3, color: "brown", priceUSD: 10000, window
s: 11}
Literales de objeto y la notación de
corchetes
del Inglés
Inglés
 Explicar cómo construir objetos utilizando la notación de corchetes

 Explicar que con la notación de corchetes puede utilizar el carácter de espacio
dentro de las claves, ya que las claves de las propiedades son cadenas de
caracteres
 Explicar que las claves dentro de la notación de corchetes se evalúan
Literales de objeto y la notación de corchetes
Existe una sintaxis alternativa a la notación de puntos que he utilizado hasta ahora.
Esta sintaxis alternativa se conoce comola notación de corchetes.
Para entender cómo funciona, lo mejor es utilizar un ejemplo, así que volveré a pasar por
el proceso de codificación del objetohouse2, de la misma forma que lo hice con la notación
de puntos, sólo que esta vez, utilizaré la notación de corchetes.
1
2
3
4
5
var house2 = {};
house2["rooms"] = 4;
house2['color']= "pink";
house2["priceUSD"] = 12345;
console.log(house2); // {rooms: 4, color: 'pink', priceUSD: 12345}
Tenga en cuenta que utilizando la notación de corchetes, esencialmente sólo envuelvo la
clave de cada propiedadcomo una cadena, dentro de las comillas simples o dobles - al igual
que con las cadenas regulares.
A continuación, envuelvo toda la clave de la propiedad dentro de un corchete de apertura y

otro de cierre.
Eso es esencialmente todo lo que hay que hacer.
Puedo tanto acceder como actualizar propiedades en objetos utilizando la notación de

puntos, o la notación de corchetes, o una combinación de ambas, como en el siguiente
ejemplo:
1
2
3
4
5
6
var car = {};
car.color = "red";
car["color"] = "green";
car["speed"] = 200;
car.speed = 100;
console.log(car); // {color: "green", speed: 100}
Por el momento, esta es probablemente suficiente información sobre la creación de
objetos.
Antes de tratar el tema de las matrices y los objetos, permítame darle otra información
importante sobre la notación de corchetes.
Con la notación de corchetes, puedo añadir caracteres de espacio dentro de los nombres
de las propiedades, así:
1
2
car["number of doors"] = 4;
console.log(car); // {color: 'green', speed: 100, number of doors: 4}
Además, puedo añadir números (como el tipo de datos cadena) como claves de
propiedades:
1
2
car["2022"] = 1901;
console.log(car); // {2022: 1901, color: 'green', speed: 100, number of d
oors: 4}
Sin embargo, se desaconseja hacer esto, debido a las razones obvias de que tener una
clave de propiedad como una cadena de números no transmite realmente mucha
información útil.
Por último, hay una cosa realmente útil que tiene la notación de corchetes pero que no
está disponible en la notación de puntos: Puede evaluar expresiones.
Para entender lo que eso significa, considere el siguiente ejemplo:
1
2
3
4
5
6
7
8
9
var arrOfKeys = ['speed', 'altitude', 'color'];
var drone = {
speed: 100,
altitude: 200,
color: "red"
}
for (var i = 0; i < arrOfKeys.length; i++) {
console.log(drone[arrOfKeys[i]])
}
El código anterior dará como resultado la siguiente salida:
1
2
3
100
200
red
Utilizando el hecho de que la notación de corchetes puede evaluar expresiones, accedí a
la propiedadarrOfKeys[i] del objetodrone.
Este valor cambió en cada bucle mientras se ejecutaba el bucle for.
Concretamente, la primera vez que se ejecutó, se evaluó así:
El valor dei era0

El valor dearrOfKeys[i] eraarrOfKeys[0], que era"speed"
Así,drone[arrOfKeys[i]] se evaluó comodrone["speed"], que es igual a100
Esto me permitió realizar un bucle sobre cada uno de los valores almacenados dentro del
objetodrone, basándome en cada una de las claves de sus propiedades.
Las matrices son objetos

Inglés
 Explicar que las matrices son objetos, con sus propias propiedades y métodos
incorporados
 Esbozar la forma habitual de ampliar matrices utilizando el método push()
 y explicar cómo recortar el último miembro de una matriz utilizando el método
pop()
Las matrices son objetos
En JavaScript, las matrices son objetos. Eso significa que las matrices también tienen
algunas propiedades y métodos incorporados.
Uno de los métodos incorporados más utilizados en las matrices son los métodospush()
ypop().
Para añadir nuevos elementos a una matriz, puedo utilizar el métodopush():
1
2
3
var fruits = [];
fruits.push("apple"); // ['apple']
fruits.push('pear'); // ['apple', 'pear']
Para eliminar el último elemento de una matriz, puedo utilizar el método pop():
1
2
fruits.pop();
console.log(fruits); // ['apple']
Enlazando con algunas lecciones anteriores de este curso, ahora puedo construir una
función que tome todos sus argumentos y los introduzca en una matriz, así:
1
2
3
4
5
6
7
function arrayBuilder(one, two, three) {
var arr = [];
arr.push(one);
arr.push(two);
arr.push(three);
console.log(arr);
}
Ahora puedo llamar a la funciónarrayBuilder(), por ejemplo, así:
1
arrayBuilder('apple', 'pear', 'plum'); // ['apple', 'pear', 'plum']
Aún mejor, no tengo que registrar en la consola el array recién construido.
En su lugar, puedo devolverlo:
1
2
3
4
5
6
7
function arrayBuilder(one, two, three) {
var arr = [];
arr.push(one);
arr.push(two);
arr.push(three);
return arr;
}
Además, puedo guardar esta llamada a la función en una variable.
Puedo ponerle cualquier nombre, pero esta vez utilizaré el nombre:simpleArr.
1
var simpleArr = arrayBuilder('apple', 'pear', 'plum');
Y ahora puedo registrar en consola los valores almacenados ensimpleArr:
1
console.log(simpleArr); // ['apple','pear','plum']
Hoja de trucos sobre objetos

matemáticos
del Inglés
Inglés
JavaScript dispone de prácticos objetos incorporados. Uno de estos populares objetos
incorporados es el objeto Math.
Al final de esta lectura, usted será capaz de:
 Resumir las propiedades y métodos incorporados del objeto Math

Constantes numéricas
Estas son algunas de las constantes numéricas incorporadas que existen en el objeto
Math:
 El número PI:Math.PI que es aproximadamente 3,14159

 La constante de Euler:Math.E que es aproximadamente 2.718
 El logaritmo natural de 2:Math.LN2 que es aproximadamente 0.693
Métodos de redondeo
Estos incluyen:
 Math.ceil()- redondea hacia arriba al entero más próximo

 Math.floor()- redondea hacia abajo al entero más cercano
 Math.round()- redondea hacia arriba al entero más cercano si el decimal es.5 o
superior; en caso contrario, redondea hacia abajo al entero más cercano
 Math.trunc()- recorta el decimal, dejando sólo el entero
Métodos aritméticos y de cálculo

He aquí una lista no exhaustiva de algunos métodos aritméticos y de cálculo comunes que
existen en el objetoMath:
 Math.pow(2,3)- calcula el número2 a la potencia de3, el resultado es8

 Math.sqrt(16)- calcula la raíz cuadrada de16, el resultado es4
 Math.cbrt(8)- halla la raíz cúbica de8, el resultado es2
 Math.abs(-10)- devuelve el valor absoluto , el resultado es10
 Métodos logarítmicos:Math.log(),Math.log2(),Math.log10()
 Devuelven los valores mínimo y máximo de todas las entradas:Math.min(9,8,7)
devuelve7,Math.max(9,8,7) devuelve9.
 Métodos trigonométricos:Math.sin(),Math.cos(),Math.tan(), etc.
Hoja de trucos para cuerdas

del Inglés
Inglés
 Identificar ejemplos de funciones de cadenas y explicar cómo llamarlas

En esta hoja de trucos, enumeraré algunas de las propiedades y métodos más comunes y
útiles de las cadenas.
Para todos los ejemplos, utilizaré una o ambas de las siguientes variables:
1
2
var greet = "Hello, ";
var place = "World"
Tenga en cuenta que cualquiera de las propiedades y métodos sobre cadenas que
demuestre en los siguientes ejemplos, podría haberlos ejecutado sobre esas cadenas
directamente, sin guardarlas en una variable como las que he nombradogreet yplace.
En algunos de los ejemplos que siguen, en aras de la claridad, en lugar de utilizar un

nombre de variable, utilizaré la propia cadena.
Todas las cadenas tienen a su disposición varias propiedades incorporadas, pero hay una
única propiedad que es realmente útil: la propiedadlength, que se utiliza así:
1
greet.length; // 7
Para leer cada carácter individual en un índice específico de una cadena, empezando por
cero, puedo utilizar el métodocharAt():
1
greet.charAt(0); // 'H'
El métodoconcat() une dos cadenas:
1
"Wo".concat("rl").concat("d"); // 'World'
ElindexOf devuelve la ubicación de la primera posición que coincide con un carácter:
1
2
3
"ho-ho-ho".indexOf('h'); // 0
"ho-ho-ho".indexOf('o'); // 1
"ho-ho-ho".indexOf('-'); // 2
EllastIndexOf encuentra la última coincidencia, por lo demás funciona igual que elindexOf.
El métodosplit trocea la cadena en una matriz de subcadenas:
1
"ho-ho-ho".split("-"); // ['ho', 'ho', 'ho']
También existen algunos métodos para cambiar el casing de las cadenas. Por ejemplo:
1
2
greet.toUpperCase(); // "HELLO, "
greet.toLowerCase(); // "hello, "
Aquí tiene una lista de todos los métodos cubiertos en esta hoja de trucos:
 charAt()
 concat()
 indexOf()
 lastIndexOf()
 split()
 toUpperCase()
 toLowerCase()
 Métodos de objeto
 Estado: Traducido automáticamente
del Inglés
 Traducido automáticamente del
Inglés
 Es posible que ya esté familiarizado con los objetos en JavaScript.
 En este vídeo, aprenderá a diseñar objetos como combinaciones de datos y
funcionalidad.
 Como ya sabrá, un objeto consta de pares clave-valor, conocidos como
propiedades.
 Podemos añadir nuevos pares clave-valor a objetos existentes utilizando la
notación de punto y el operador de asignación.
 1
 2
 var car = {};
 car.color = "red"; //update the value of a property of the car objj
ect
 Éstas se conocen como propiedades, y pueden tomar muchos tipos de datos,
incluidas las funciones.
 1
 2
 3
 4
 5
 6
 7
 8
 var car = {};

 car.color = "red";

 //add a method to the car object so that it can be called as car.tu
rnkey()
 car.turnKey = function() {
 console.log('engine running');
 }
 Si la función es una propiedad de un objeto, entonces se denomina método.
 Se trata de una función a la que sólo se puede acceder a través del objeto
JavaScript del que es miembro. Por ejemplo, al método log, que pertenece al
objeto consola, sólo se puede acceder a través del objeto consola.
 console.log('Hello world');
 Exploremos esto más a fondo ahora. Crearé un objeto utilizando algo conocido
como función constructora.
 1
 2
 3
 4
 var car = {};
 car.mileage = 98765;
 console.log(car);
 EjecutarRestablecer
 Primero, construiré un nuevo objeto llamado literalmentecar. Escribovar,
espacio,car, espacio, signo igual, espacio, seguido de un conjunto de llaves
rizadas, y finalmente un punto y coma.
 Ahora, ampliaré el objetocar asignándole una propiedad llamadamileage.
 Cuando inspecciono el objeto, puedo confirmar que contiene una
propiedadmileage asignada a98765.
 Quiero añadir otra propiedad al objetocar. Esta vez, añadiré una propiedad
llamadacolor y le asignaré el valor"red".
 Puedo volver a inspeccionar el objeto escribiendo su nombre en la consola del
navegador. Así que ahora, cuando escriboconsole.log(car), obtengo un objeto
con dos propiedades: la propiedadmileage, que está establecida en98765, y la
propiedadcolor, establecida en"red".
 Genial, ahora he añadido dos propiedades a mi objeto.
 A continuación, quiero añadir un método a mi objetocar. Y este método, cuando
sea llamado, mostrará algún texto en la consola.
 Así que, una vez más, añado otra propiedad a mi objetocar. Al fin y al cabo, un
método no es más que otra propiedad del objetocar. No es más que otro par
clave-valor que contiene el objeto coche.
 Lo que es único es que el valor que le estoy asignando es una función.
 1
 2
 3
 4
 5
 6
 7
 8
 var car = {};
 car.turnTheKey = function() {
 console.log("The engine is running")
 }
 Así que empiezo escribiendocar puntoturnTheKey, igual, y luego escribo el
código de mi función. Así quefunction, paréntesis abierto-cerrado. Luego las dos
llaves donde colocaré mi código. Por último, dentro de las llaves, escribo el
punto de consola log seguido del mensaje"The engine is running".
 Ahora puedo inspeccionar de nuevo mi objetocar escribiendo su nombre en el
método log de la consola. Esta vez, muestra que el objetocar contiene tres
propiedades; la propiedadcolor, la propiedadmileage y la propiedadturnTheKey.
 Recuerde que todos los pares clave-valor de un objeto se denominan
simplemente propiedades. Sin embargo, si quiero diferenciar las propiedades
que se pueden ejecutar, entonces me refiero a dichas propiedades como métodos.
 Así pues, ahora quiero añadir otro método al objetocar. A éste lo
llamarélightsOn.
 Una vez más, escribocar.lightsOn, y luego añado un signo igual, y de nuevo
como es un método, lo estoy asignando a una función. Esta función también
tendrá un registro de consola en su cuerpo, y sólo estoy registrando la cadena
con el texto"The lights are on".
 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 //example of adding properties and methods to an object
 var car = {};
 car.turnTheKey = function() {
 console.log("The engine is running")
 }
 car.lightsOn = function() {
 console.log("The lights are on.")
 }
 car.turnTheKey();
 car.lightsOn()
 Ok, así que ahora he añadido cuatro propiedades a mi objeto. Y dos de ellas son
métodos.
 Ya me he asegurado de que estoy obteniendo losmileage ycolor correctos de mi
objetocar. Ahora, intentaré ejecutar los métodosturnTheKey ylightsOn.
 En primer lugar, invocaré el métodoturnTheKey.
 Recuerde que sólo se puede acceder a este método a través del objetocar, por lo
que primero necesito escribir el nombre del objeto que contiene el
métodoturnTheKey. En otras palabras, necesito escribir la palabracar, seguida
de un punto, y luego el nombre de mi método, que esturnTheKey.
 Recuerde que esta propiedad es un método. Así que, para ejecutarlo, necesito
añadir un paréntesis de apertura y otro de cierre para que el motor JavaScript
pueda procesar mi código JavaScript.
 Observe que el resultado es la cadena"The engine is running" registrada en la
consola.
 Ahora probaré el otro método. Una vez más, necesito acceder a él a través del
objetocar, así que escribocar.lightsOn, y de nuevo, necesito añadir esos
paréntesis para invocar el métodolightsOn. Pulso la tecla ENTER y observo que
el texto aparece en la consola.
 ¡Éxito! Es importante recordar que cuando el motor JavaScript ejecuta esta línea
de código, localiza el objetocar en su memoria. Luego, encuentra el
métodolightsOn en el objetocar. Lee la declaración de la función que está
guardada en esta propiedad y la ejecuta, línea por línea.
 Como sólo hay una línea de código, el motor JavaScript registra la cadena"The
lights are on" en la consola.
Errores de sintaxis, lógicos y de ejecución

Inglés
 Reconocer los tipos de errores más comunes en JavaScript

Estos son algunos de los errores más comunes en JavaScript:
 ReferenceError
 SyntaxError
 TypeError
 RangeError
Existen algunos otros errores en JavaScript. Estos otros errores incluyen
 AggregateError
 Error
 InternalError
 URIError
Sin embargo, en esta lectura me centraré en los errores de Referencia, Sintaxis, Tipo y
Rango.
ReferenceError
Un ReferenceError se lanza cuando, por ejemplo, se intenta utilizar variables que no han
sido declaradas en ninguna parte.
Un ejemplo puede ser, digamos, intentar registrar en la consola una variable que no
existe:
1
console.log(username);
Si la variable llamadausername no ha sido declarada, la línea de código anterior dará

como resultado la siguiente salida:
1
Uncaught ReferenceError: username is not defined
SyntaxError
Cualquier tipo de código JavaScript no válido provocará un SyntaxError.
Por ejemplo:
1
var a "there's no assignment operator here";
La línea de código anterior arrojará el siguiente error:
1
Uncaught SyntaxError: Unexpected string
Hay una advertencia interesante con respecto al SyntaxError en JavaScript: no se puede

atrapar utilizando el bloquetry-catch.
TypeError
Un TypeError se lanza cuando, por ejemplo, se intenta ejecutar un método en un tipo de
datos no soportado.
Un ejemplo sencillo es intentar ejecutar el métodopop() sobre una cadena:
1
"hello".pop() // Uncaught TypeError: "hello".pop is not a function
El comportamiento tipo array de las cadenas ya se trató en una lección anterior de este
curso.
Sin embargo, como se puede confirmar ejecutando la línea de código anterior, las
cadenas no tienen todos los métodos de array a su disposición, e intentar utilizar algunos
de esos métodos provocará que se lance un TypeError.
RangeError
Un RangeError se lanza cuando estamos dando un valor a una función, pero ese valor
está fuera del rango permitido de valores de entrada aceptables.
He aquí un ejemplo sencillo de conversión de unnúmero cotidiano deBase 10(un
número del sistema decimal común) a unnúmero de Base 2(es decir, un número
binario).
Por ejemplo
1
(10).toString(2); // '1010'
El valor de2 cuando se pasa al métodotoString(), es como decirle a JavaScript:

"convierta el valor de10 del sistema numérico de Base 10, a su homólogo en el sistema
numérico de Base 2".
JavaScript obliga y "traduce" el número "normal" 10 a su contraparte binaria.
Además de utilizar el sistema numérico de Base 2, también puedo utilizar el de Base 8,

de esta forma:
1
(10).toString(8); // 12
Obtengo de vuelta el valor12, que es el número normal 10, escrito en el sistema

numérico de Base 8.
Sin embargo, si intento utilizar un sistema numérico inexistente, como un imaginario

Base100, ya que este sistema numérico efectivamente no existe en JavaScript, obtendré
el RangeError, porque un sistema Base100 inexistente está fuera delrango de los
sistemas numéricos que están disponibles para el métodotoString():
1
(10).toString(100); // Uncaught RangeError: toString() radix argument mus
t be between 2 and 36
En esta lectura, ha cubierto algunos de los errores más comunes en JavaScript.
Valores de retorno de las funciones

del Inglés
Inglés
Muchas funciones, por defecto, devuelven el valor deundefined.
Un ejemplo es la funciónconsole.log().
Si ejecuto
1
console.log('Hello');
... aquí está la salida en la consola:
2
undefined
Dado que la funciónconsole.log() está construida de forma que no tiene el valor de retorno
establecido explícitamente, obtiene el valor de retorno por defecto deundefined.
Ahora codificaré mi propia implementación deconsole.log(), que no devuelve el valor

deundefined:
1
2
3
4
function consoleLog(val) {
console.log(val)
return val
}
Estoy utilizando la funciónconsole.log() dentro de mi declaración de función
personalizadaconsoleLog. Y estoy especificando que devuelva el valor de su argumento.
Ahora, cuando ejecuto mi función personalizadaconsoleLog():
1
consoleLog('Hello')
Obtengo la siguiente salida:
1
2
Hello
'Hello'
Por lo tanto, el valor se emite en la consola, pero también se devuelve.
¿Por qué es útil esto?
Es útil porque puedo utilizar valores de retorno de una función dentro de otra función.
He aquí un ejemplo.
Primero codificaré una función que devuelve un doble de un número que recibió:
1
2
3
function doubleIt(num) {
return num * 2
}
Ahora codificaré otra función que construya un objeto con un valor específico:
1
2
3
4
5
function objectMaker(val) {
return {
prop: val
}
}
Puedo llamar a la funciónobjectMaker() con el valor que quiera, por ejemplo:
1
objectMaker(20);
El valor devuelto será un objeto con una única claveprop establecida en20:
1
{prop:20}
Ahora considere este código:
1
doubleIt(10).toString()
El código anterior devuelve el número20 como una cadena, es decir:"20".
Incluso puedo combinar mis llamadas a funciones personalizadas de la siguiente manera:
1
objectMaker( doubleIt(100) );
Esto devolverá ahora el siguiente valor:
1
{prop: 200}
¿Qué significa todo esto?
Significa que al permitirme JavaScript utilizar la palabra clavereturn como se ha descrito

anteriormente, puedo tener múltiples llamadas a funciones, devolviendo datos y
manipulando valores, basándome en cualquier reto de codificación que tenga ante mí.
Poder devolver valores personalizados es uno de los fundamentos que hacen posible la
programación funcional.
Principios de programación orientada a
objetos
Inglés
En esta lectura, conocerá las ventajas de la programación orientada a objetos (POO) y
los principios de la POO.
Los beneficios de la POO

Utilizar el paradigma de la programación orientada a objetos (POO) tiene muchas
ventajas.
La POO ayuda a los desarrolladores a imitar la relación entre los objetos en el mundo
real. En cierto modo, le ayuda a razonar sobre las relaciones entre las cosas en su
software, igual que lo haría en el mundo real. Así, la POO es un enfoque eficaz para
idear soluciones en el código que escribe. La POO también:
 Le permite escribir código modular,

 Hace que su código sea más flexible y
 Hace que su código sea reutilizable.
Los principios de la POO

Los cuatro principios fundamentales de la programación orientada a objetos son la
herencia, la encapsulación, la abstracción y el polimorfismo. Aprenderá sobre cada uno
de estos principios sucesivamente. Lo que hay que recordar sobre los Objetos es que
existen en una estructura jerárquica. Esto significa que la base original o superclase para
todo es la clase Objeto, todos los objetos derivan de esta clase. Esto nos permite utilizar
el método Object.create(). para crear o instanciar objetos de nuestras clases.
1
2
3
4
5
class Animal { /* ...class code here... */ }
var myDog = Object.create(Animal)
console.log (Animal)
EjecutarRestablecer
Un método más común de crear objetos a partir de clases es utilizar la palabra clave
new. Cuando se utiliza un método constructor predeterminado o vacío, JavaScript llama
implícitamente a la superclase Object para crear la instancia.
1
2
3
4
5
var myDog = new Animal()
console.log (Animal)
EjecutarRestablecer
Este concepto se explora en la siguiente sección sobre herencia
Principios de la programación orientada a objetos: Herencia
La herencia es uno de los fundamentos de la programación orientada a objetos.
En esencia, es un concepto muy simple. Funciona de la siguiente manera:
1. Existe una clase base de una "cosa".

2. Hay una o varias subclases de "cosas" que heredan las propiedades de la clase
base (a veces también denominada "superclase")
3. Puede haber otras sub-subclases de "cosas" que hereden de las clases del punto
2.
Tenga en cuenta que cada subclase hereda de su superclase. A su vez, una subclase
también podría ser una superclase, si hay clases que heredan de esa subclase.
Todo esto puede sonar un poco "informático", así que aquí tiene un ejemplo más
práctico:
1. Existe una clase base "Animal".

2. Existe otra clase, una subclase que hereda de "Animal", y el nombre de esta
clase es "Pájaro".
3. A continuación, hay otra clase, que hereda de "Pájaro", y esta clase es "Águila".
Así, en el ejemplo anterior, estoy modelando objetos del mundo real construyendo
relaciones entre Animal, Pájaro y Águila. Cada una de ellas son clases separadas, es
decir, cada una de ellas son planos separados para instancias de objetos específicos que
pueden construirse según sea necesario.
Para establecer la relación de herencia entre clases en JavaScript, puedo utilizar la

palabra claveextends, como enclass B extends A.
He aquí un ejemplo de jerarquía de herencia en JavaScript:
1
2
3
class Bird extends Animal { /* ...class code here... */ }
class Eagle extends Bird { /* ...class code here... */ }
Principios de programación orientada a objetos: Encapsulación
En los términos más sencillos, la encapsulación tiene que ver con hacer que la
implementación de un código esté "oculta" para otros usuarios, en el sentido de que no
tengan que saber cómo funciona mi código para "consumir" el código.
Por ejemplo, cuando ejecuto el siguiente código:
1
"abc".toUpperCase();
Realmente no necesito preocuparme ni perder el tiempo pensando en cómo funciona el

métodotoUpperCase(). Lo único que quiero es utilizarlo, ya que sé que está a mi
disposición. Incluso si la sintaxis subyacente, es decir, la implementación del
métodotoUpperCase() cambia, mientras no rompa mi código, no tengo que
preocuparme por lo que hace en segundo plano, ni siquiera por cómo lo hace.
Principios de la programación orientada a objetos: Abstracción
La abstracción consiste en escribir código de forma que sea más generalizado.
Los conceptos de encapsulación y abstracción a menudo se malinterpretan porque sus

diferencias pueden parecer borrosas.
Ayuda pensar en ello en los siguientes términos:
 Una abstracción consiste en extraer elconcepto de lo que está intentando hacer,

en lugar de tratar con una manifestación específica de ese concepto.
 La encapsulación consiste en que usted no tenga acceso a, o no se preocupe por,
cómo funciona internamente alguna implementación.
Aunque tanto la encapsulación como la abstracción son conceptos importantes en la
programación orientada a objetos, se requiere más experiencia con la programación en
general para profundizar realmente en este tema.
Por ahora, basta con ser consciente de su existencia en la POO.
Principios de la programación orientada a objetos: Polimorfismo
Polimorfismo es una palabra derivada del griego que significa "formas múltiples". Una
traducción alternativa podría ser: "algo que puede adoptar muchas formas".
Así pues, para entender de qué trata el polimorfismo, consideremos algunos objetos de
la vida real.
 Una puerta tiene un timbre. Podría decirse que el timbre es una propiedad del
objeto puerta. Este timbre se puede tocar. ¿Cuándo tocaría alguien el timbre de
la puerta? Obviamente, para que alguien se presente en la puerta.
 Consideremos ahora el timbre de una bicicleta. Una bicicleta tiene un timbre.
Podría decirse que el timbre es una propiedad del objeto bicicleta. Este timbre
también podría sonar. Sin embargo, el motivo, la intención y el resultado de que
alguien haga sonar el timbre de una bicicleta no es el mismo que hacer sonar el
timbre de una puerta.
Los conceptos anteriores pueden codificarse en JavaScript de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
const bicycle = {
bell: function() {
return "Ring, ring! Watch out, please!"
}
}
const door = {
bell: function() {
return "Ring, ring! Come here, please!"
}
}
Así, puedo acceder al métodobell() en el objetobicycle, utilizando la siguiente sintaxis:
1
bicycle.bell(); // "Get away, please"
También puedo acceder al métodobell() en el objetodoor, utilizando esta sintaxis:
1
door.bell(); // "Come here, please"
Llegados a este punto, se puede concluir que el mismo nombre exacto del método puede
tener la intención exactamente opuesta, en función del objeto para el que se utilice.
Ahora, para hacer que este código sea realmente polimórfico, añadiré otra declaración
de función:
1
2
3
function ringTheBell(thing) {
console.log(thing.bell())
}
Ahora he declarado una funciónringTheBell(). Acepta un parámetrothing, que espero

que sea un objeto, a saber, el objetobicycle o el objetodoor.
Así que ahora, si llamo a la funciónringTheBell() y le paso elbicycle como único

argumento, ésta es la salida:
1
ringTheBell(bicycle); // Ring, ring! Watch out, please!
Sin embargo, si invoco la funciónringTheBell() y le paso el objetodoor, obtendré la

siguiente salida:
1
ringTheBell(door); // "Ring, ring! Come here, please!"
Ahora ha visto un ejemplo en el que exactamente la misma función produce resultados

diferentes, segúnel contexto en el que se utilice.
He aquí otro ejemplo, el operador de concatenación, utilizado llamando al método

incorporadoconcat().
Si utilizo el métodoconcat() sobre dos cadenas, se comporta exactamente igual que si

utilizara el operador+.
1
"abc".concat("def"); // 'abcdef'
También puedo utilizar el métodoconcat() sobre dos matrices. He aquí el resultado:
1
["abc"].concat(["def"]); // ['abc', 'def']
Considere la posibilidad de utilizar el operador+ sobre dos matrices con un miembro

cada una:
1
2
["abc"] + ["def"]; // ["abcdef"]
Esto significa que el métodoconcat() está mostrando un comportamiento polimórfico, ya

que se comporta de forma diferente en función del contexto - en este caso, en función de
los tipos de datos que le doy.
Para reiterar, el polimorfismo es útil porque permite a los desarrolladores construir

objetos que pueden tener exactamente la misma funcionalidad, es decir, funciones con
exactamente el mismo nombre, que se comportan exactamente igual. Sin embargo, al
mismo tiempo, puede anular algunas partes de la funcionalidad compartida o incluso la
funcionalidad completa, en algunas otras partes de la estructura de la programación
orientada a objetos.
He aquí un ejemplo de polimorfismo mediante clases en JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Bird {
useWings() {
console.log("Flying!")
}
}
class Eagle extends Bird {
useWings() {
super.useWings()
console.log("Barely flapping!")
}
}
class Penguin extends Bird {
useWings() {
console.log("Diving!")
}
}
var baldEagle = new Eagle();
var kingPenguin = new Penguin();
baldEagle.useWings(); // "Flying! Barely flapping!"
kingPenguin.useWings(); // "Diving!"
Las subclasesPenguin yEagle heredan ambas de la superclaseBird. La subclaseEagle
hereda el métodouseWings() de la claseBird, pero lo amplía con un registro de consola
adicional. La subclasePenguin no hereda la claseuseWings(), sino que tiene su propia
implementación, aunque la propia clasePenguin sí extiende la claseBird.
Practique un poco con el código anterior, intente crear algunas de sus propias clases.
(pista : piense en cosas que conozca de la vida cotidiana)
1
// create your classes here
Constructores
Inglés
JavaScript tiene una serie de tipos de objetos incorporados, tales como:
Math,Date,Object,Function,Boolean,Symbol,Array,Map,Set,Promise,JSON, etc.
Estos objetos se denominan a veces "objetos nativos".
Las funciones constructoras, comúnmente denominadas simplemente "constructores",

son funciones especiales que nos permiten construir instancias de estos objetos nativos
incorporados. Todos los constructores se escriben con mayúsculas.
Para utilizar una función constructora, debo anteponerle el operadornew.
Por ejemplo, para crear una nueva instancia del objetoDate, puedo ejecutar:new Date().
Lo que obtengo de vuelta es la fecha y hora actuales, como:
Thu Feb 03 2022 11:24:08 GMT+0100 (Central European Standard Time)
Sin embargo, no todos los objetos incorporados vienen con una función constructora.
Un ejemplo de este tipo de objeto es el objeto incorporadoMath.
La ejecución denew Math() lanza unUncaught TypeError, informándonos de queMath

is not a constructor.
Así, puedo concluir que algunos objetos incorporados sí tienen constructores, cuando
sirven a un propósito concreto: permitirnos instanciar una instancia específica del
constructor de un objeto dado. El objeto incorporadoDate es perfectamente adecuado
para tener un constructor porque cada nueva instancia de objeto de fecha que construya
debe tener datos únicos por definición, ya que va a ser una marca de tiempo diferente:
se va a construir en un momento diferente en el tiempo.
Otros objetos incorporados que no tienen constructores, como el objetoMath, no
necesitan un constructor. Son simplemente objetos estáticos a cuyas propiedades y
métodos se puede acceder directamente, desde el propio objeto incorporado. En otras
palabras, no tiene sentido construir una instancia del objeto incorporadoMath para
poder utilizar su funcionalidad.
Por ejemplo, si quiero utilizar el métodopow del objetoMath para calcular valores
exponenciales, no hay necesidad de construir una instancia del objetoMath para hacerlo.
Por ejemplo, para obtener el número 2 a la potencia de 5, ejecutaría:
Math.pow(2,5); // --> 32
No es necesario construir una instancia del objetoMath ya que no habría nada que
almacenar en la instancia de ese objeto específico.
Además de las funciones constructoras para los objetos incorporados, también puedo
definir funciones constructoras personalizadas.
He aquí un ejemplo:
1
2
3
4
5
6
function Icecream(flavor) {
this.flavor = flavor;
this.meltIt = function() {
console.log(`The ${this.flavor} icecream has melted`);
}
}
EjecutarRestablecer
Ahora puedo hacer tantos helados como quiera:
1
2
3
4
5
6
7
8
9
10
11
function Icecream(flavor) {
this.flavor = flavor;
this.meltIt = function() {
console.log(`The ${this.flavor} icecream has melted`);
}
}
let kiwiIcecream = new Icecream("kiwi");

let appleIcecream = new Icecream("apple");
kiwiIcecream; // --> Icecream {flavor: 'kiwi', meltIt: ƒ}
appleIcecream; // --> Icecream {flavor: 'apple', meltIt: ƒ}
EjecutarRestablecer
Acabo de construir dos objetos instancia del tipoIcecream.
El caso de uso más común denew es utilizarlo con uno de los tipos de objeto
incorporados.
Tenga en cuenta que utilizar funciones constructoras en todos los objetos incorporados
no es a veces el mejor enfoque.
Esto es especialmente cierto para los constructores de objetos de tipos primitivos, a

saber:String,Number, yBoolean.
Por ejemplo, utilizando el constructor incorporadoString, puedo construir nuevas

cadenas:
1
2
let apple = new String("apple");
apple; // --> String {'apple'}
La variableapple es un objeto de tipoString.
Veamos en qué se diferencia el objetoapple de la siguiente variablepear:
1
2
let pear = "pear";
pear; // --> "pear"
La variablepear es un literal de cadena, es decir, un valor primitivo de Javascript.
La variablepear, al ser un valor primitivo, siempre será más performante que la

variableapple, que es un objeto.
Además de ser más performante, debido al hecho de que cada objeto en Javascript es
único, no se puede comparar un objeto String con otro objeto String, incluso cuando sus
valores son idénticos.
En otras palabras, si comparanew String('plum') === new String('plum'),

obtendráfalse, mientras que"plum" === "plum" devuelve verdadero. Obtendráfalse al
comparar objetos porque lo que se compara no son los valores que se pasan al
constructor, sino la ubicación de memoria donde se guardan los objetos.
Además de no utilizar constructores para construir versiones objeto de primitivas, es

mejor que no utilice constructores cuando construya objetos normales y corrientes.
En lugar denew Object, debería ceñirse a la sintaxis literal de objeto:{}.
Un objeto RegExp es otro objeto incorporado en JavaScript. Se utiliza para hacer

coincidir patrones de cadenas utilizando lo que se conoce como "Expresiones
Regulares". Las Expresiones Regulares existen en muchos lenguajes, no sólo en
JavaScript.
En JavaScript, puede construir una instancia del constructor RegExp utilizando new
RegExp.
Alternativamente, puede utilizar un literal de patrón en lugar de RegExp. He aquí un

ejemplo de utilización de /d/ como literal de patrón, pasado como argumento al método
match sobre una cadena.
1
2
"abcd".match(/d/); // ['d', index: 3, input: 'abcd', groups: undefined]
"abcd".match(/a/); // ['a', index: 0, input: 'abcd', groups: undefined]
En lugar de utilizar los constructoresArray,Function, yRegExp, debería utilizar sus

variedades de literal de matriz, literal de función y literal de patrón: [],() {}, y/()/.
Sin embargo, al construir objetos de otros tipos incorporados, podemos utilizar el

constructor.
He aquí algunos ejemplos:
1
2
3
4
5
6
7
new Date();
new Error();
new Map();
new Promise();
new Set();
new WeakSet();
new WeakMap();
La lista anterior no es concluyente, pero sólo está ahí para darle una idea de algunas
funciones constructoras que seguramente puede utilizar.
Tenga en cuenta que se proporcionan enlaces sobre RegExp y la expresión regular en el
elemento de la lección titulado "Lectura adicional".
Creación de clases
Inglés
Al final de esta lectura, debería ser capaz de explicar, con ejemplos, el concepto de
extender clases utilizando la herencia básica para alterar los comportamientos dentro de
las clases hijas.
A estas alturas, ya debería saber que la herencia en JavaScript se basa en el objeto

prototipo.
Todos los objetos que se construyen a partir del prototipo comparten la misma
funcionalidad.
Cuando necesite codificar relaciones OOP más complejas, puede utilizar la palabra
claveclass y su sintaxis fácil de entender y razonar.
Imagine que necesita codificar una claseTrain.
Una vez que haya codificado esta clase, podrá utilizar la palabra clavenew para
instanciar objetos de la claseTrain.
Por ahora, sin embargo, primero necesita definir la claseTrain, utilizando la siguiente
sintaxis:
1
class Train {}
Así, utilizará la palabra claveclass, después especificará el nombre de su clase, con la

primera letra en mayúscula, y a continuación añadirá una llave de apertura y otra de
cierre.
Entre las llaves, la primera pieza de código que debe definir es elconstructor:
1
2
3
4
5
class Train {
constructor() {
}
}
Elconstructor se utilizará para construir propiedades en la futura instancia del objeto de

la claseTrain.
Por ahora, digamos que sólo hay dos propiedades que cada instancia de objeto de la
claseTrain debe tener en el momento en que se instancie:color ylightsOn.
1
2
3
4
5
6
class Train {
constructor(color, lightsOn) {
this.color = color;
this.lightsOn = lightsOn;
}
}
Fíjese en la sintaxis del constructor. El constructor es una función especial en mi

claseTrain.
En primer lugar, observe que no existe la palabra clavefunction. Además, observe que
se utiliza la palabra claveconstructor para definir esta función. Usted da los parámetros
de su funciónconstructor dentro de un paréntesis de apertura y cierre, igual que en las
funciones normales. Los nombres de los parámetros soncolor ylightsOn.
A continuación, dentro del cuerpo de la funciónconstructor, usted asigna el valor del

parámetrocolor pasado athis.color, y el valor del parámetrolightsOn pasado
athis.lightsOn.
¿Qué representa aquí esta palabra clavethis?
Esla futura instancia del objeto de la claseTrain.
Esencialmente, este es todo el código que necesita escribir para lograr dos cosas:
1. Este código me permiteconstruir nuevas instancias de la claseTrain.

2. Cada instancia de objeto de la claseTrain que construya tendrá sus propias
propiedades personalizadas decolor ylightsOn.
Ahora, para construir realmente una nueva instancia de la claseTrain, necesito utilizar
la siguiente sintaxis:
1
new Train()
Dentro de los paréntesis, necesito pasar valores como"red" yfalse, por ejemplo, lo que
significa que la propiedadcolor se establece en"red" y la propiedadlightsOn se
establece enfalse.
Y, para poder interactuar con el nuevo objeto construido de esta forma, necesita
asignarlo a una variable.
Juntándolo todo, aquí tiene su primer tren:
1
var myFirstTrain = new Train('red', false);
Como cualquier otra variable, ahora puede, por ejemplo, registrar por consola el
objetomyFirstTrain:
1
console.log(myFirstTrain); // Train {color: 'red', lightsOn: false}
Puede seguir creando instancias de la claseTrain. Aunque les dé exactamente las

mismas propiedades, siguen siendo objetos separados.
1
2
var mySecondTrain = new Train('blue', false);
var myThirdTrain = new Train('blue', false);
Sin embargo, esto no es todo lo que pueden ofrecer las clases.
También puede añadir métodos a las clases, y estos métodos serán entonces
compartidos por todos los futuros objetos instancia de mi claseTrain.
Por ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Train {
this.color = color;
}
toggleLights() {
this.lightsOn = !this.lightsOn;
}
lightsStatus() {
console.log('Lights on?', this.lightsOn);
}
getSelf() {
console.log(this);
}
getPrototype() {
var proto = Object.getPrototypeOf(this);
console.log(proto);
}
}
Ahora, hay cuatro métodos en su claseTrain: toggleLights(),lightsStatus(),getSelf()

ygetPrototype().
1. El métodotoggleLights utiliza el operador lógico no,!. Este operador cambiará el

valor almacenado en la propiedadlightsOn del futuro objeto instancia de la
claseTrain; de ahí el!this.lightsOn. Y el operador= a su izquierda significa que
se asignará athis.lightsOn, lo que significa que se convertirá en el nuevo valor
de la propiedadlightsOn en ese objeto instancia dado.
2. El métodolightsStatus() de la claseTrain sólo informa del estado actual de la
variablelightsOn de una instancia de objeto dada.
3. El métodogetSelf() imprime las propiedades de la instancia de objeto sobre la
que se llama.
4. La consolagetPrototype() registra el prototipo de la instancia de objeto de la
claseTrain. El prototipo contiene todas las propiedades compartidas por todas
las instancias de objeto de la claseTrain. Para obtener el prototipo, utilizará el
método incorporado de JavaScriptObject.getPrototypeOf() y le pasará el
objetothis, es decir, la instancia de objeto dentro de la cual se invoca este
método.
Ahora puede construir un tren completamente nuevo utilizando esta claseTrain
actualizada:
1
var train4 = new Train('red', false);
Y ahora, puede ejecutar cada uno de sus métodos, uno tras otro, para confirmar su
comportamiento:
1
2
3
4
train4.toggleLights(); // undefined
train4.lightsStatus(); // Lights on? true
train4.getSelf(); // Train {color: 'red', lightsOn: true}
train4.getPrototype(); // {constructor: f, toggleLights: f, ligthsStatus:
f, getSelf: f, getPrototype: f}
El resultado de llamar atoggleLights() es el cambio de verdadero a falso y viceversa,

para la propiedadlightsOn.
El resultado de llamar alightsStatus() es el registro en la consola del valor de la

propiedadlightsOn.
El resultado de llamar agetSelf() es el registro en consola de la instancia completa del

objeto en el que se llama al métodogetSelf(). En este caso, el objeto devuelto es el
objetotrain4. Observe que este objeto se devuelve sólo con las propiedades ("datos")
que se construyeron utilizando la funciónconstructor() de la claseTrain. Esto se debe a
que todos los métodos de la claseTrain no "viven" en ninguno de los objetos instancia
de la claseTrain, sino en el prototipo, como se confirmará en el siguiente párrafo.
Por último, el resultado de llamar al métodogetPrototype() es el registro en la consola

de todas las propiedades de la claseprototype. Cuando se utiliza la sintaxisclass en
JavaScript, el resultado es quesólo los métodos compartidos se almacenan en el
prototipo, mientras que la funciónconstructor() establece el mecanismo para guardar los
valores específicos de la instancia ("datos") en el momento de la instanciación del
objeto.
Así pues, en conclusión, la sintaxis de clases en JavaScript nos permite separar

claramente los datos individuales del objeto -que existen en la propia instancia del
objeto- de la funcionalidad compartida del objeto (métodos), que existen en el prototipo
y son compartidos por todas las instancias del objeto.
Sin embargo, esto no es todo.
Es posible implementar el polimorfismo utilizando clases en JavaScript, heredando de la

clase base y luego anulando el comportamiento heredado. Para entender cómo funciona
esto, lo mejor es utilizar un ejemplo.
En el código que sigue, observará cómo se codifica otra clase, que se

denominaHighSpeedTrain y hereda de la claseTrain.
Esto convierte a la claseTrain en una clase base, o la superclase de la

claseHighSpeedTrain. Dicho de otro modo, la claseHighSpeedTrain se convierte en la
subclase de la claseTrain, porque hereda de ella.
Para heredar de una clase a una nueva subclase, JavaScript proporciona la palabra
claveextends, que funciona de la siguiente manera:
1
2
class HighSpeedTrain extends Train {
}
Como en el ejemplo anterior, la sintaxis de la subclase es coherente con la forma en que
se define la clase base en JavaScript. El único añadido aquí es la palabra claveextends, y
el nombre de la clase de la que hereda la subclase.
Ahora puede describir cómo funcionaHighSpeedTrain. De nuevo, puede empezar

definiendo su función constructora:
1
2
3
4
5
6
7
constructor(passengers, highSpeedOn, color, lightsOn) {
super(color, lightsOn);
this.passengers = passengers;
this.highSpeedOn = highSpeedOn;
}
}
Observe la ligera diferencia de sintaxis en el constructor de la claseHighSpeedTrain, a

saber, el uso de la palabra clavesuper.
En las clases JavaScript,super se utiliza para especificar qué propiedad se hereda de la

superclase en la subclase.
En este caso, elijo heredar las dos propiedades de la superclaseTrain en la

subclaseHighSpeedTrain.
Estas propiedades soncolor ylightsOn.
A continuación, añada las propiedades adicionales de la clase HighSpeedTrain dentro de

su constructor, es decir, las propiedades passengers y highSpeedOn.
A continuación, dentro del cuerpo del constructor, usted utiliza la palabra clave super y
pasa las propiedades heredadascolor ylightsOn que provienen de la claseTrain. En las
líneas siguientes usted asignapassengers athis.passengers, yhighSpeedOn
athis.highSpeedOn.
Observe que, además de las propiedades heredadas, tambiénhereda automáticamente

todos los métodos que existen en el prototipoTrain, es decir, los
métodostoggleLights(),lightsStatus(),getSelf() ygetPrototype().
Ahora vamos a añadir otro método que será específico de la claseHighSpeedTrain: el

métodotoggleHighSpeed().
1
2
3
4
5
6
7
8
9
10
11
}
toggleHighSpeed() {
this.highSpeedOn = !this.highSpeedOn;
console.log('High speed status:', this.highSpeedOn);
}
}
Además, imagine que se ha dado cuenta de que no le gusta cómo funciona el

métodotoggleLights() de la superclase y quiere implementarlo de forma un poco
diferente en la subclase. Puede añadirlo dentro de la claseHighSpeedTrain.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
}
toggleHighSpeed() {
}
toggleLights() {
super.toggleLigths();
super.lightsStatus();
console.log('Lights are 100% operational.');
}
}
Entonces, ¿cómo anuló el comportamiento del métodotoggleLights() original?
Bueno, en la superclase, el métodotoggleLights() estaba definido de la siguiente

manera:
1
2
3
toggleLights() {
}
Se dio cuenta de que el métodoHighSpeedTrain debía reutilizar el comportamiento

existente del método originaltoggleLights(), y por ello utilizó la
sintaxissuper.toggleLights() para heredar todo el método de la superclase.
A continuación, también hereda el comportamiento del métodolightsStatus() de la

superclase - porque se da cuenta de que quiere que el estado actualizado de la
propiedadlightsOn se registre en la consola, cada vez que invoque el
métodotoggleLights() en la subclase.
Por último, también añade la tercera línea en el métodotoggleLights() reimplementado,

a saber:
1
Ha añadido esta tercera línea para demostrar que puedo combinar el código del método
"prestado" de la superclase con su propio código personalizado en la subclase.
Ahora está listo para construir algunos objetos tren.
1
2
var train5 = new Train('blue', false);
var highSpeed1 = new HighSpeedTrain(200, false, 'green', false);
Ha construido el objetotrain5 de la claseTrain, y ha establecido sucolor en"blue" y

sulightsOn enfalse.
A continuación, ha construido el objetohighSpeed1 de la claseHighSpeedTrain, y ha

establecidopassengers a200,highSpeedOn afalse,color a"green", y lightsOn a false.
Ahora puede probar el comportamiento detrain5, llamando, por ejemplo, al
métodotoggleLights() y luego al métodolightsStatus():
1
2
train5.toggleLights(); // undefined
train5.lightsStatus(); // Lights on? true
Aquí tiene el código completo de esta lección:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class Train {
this.color = color;
}
toggleLights() {
}
lightsStatus() {
console.log('Lights on?', this.lightsOn);
}
getSelf() {
console.log(this);
}
getPrototype() {
var proto = Object.getPrototypeOf(this);
console.log(proto);
}
}

}
toggleHighSpeed() {
}
toggleLights() {
super.toggleLights();
super.lightsStatus();
}
}
var myFirstTrain = new Train('red', false);

console.log(myFirstTrain); // Train {color: 'red', lightsOn: false}
var mySecondTrain = new Train('blue', false);
Observe cómo el métodotoggleLights() se comporta de forma diferente en la

claseHighSpeedTrain que en la claseTrain.
Además, ayuda a visualizar lo que está ocurriendo obtener el prototipo tanto del
trentrain5 como delhighSpeed1:
1
2
train5.getPrototype(); // {constructor: ƒ, toggleLights: ƒ, lightsStatus:
ƒ, getSelf: ƒ, getPrototype: ƒ}
highSpeed1.getPrototype(); // Train {constructor: ƒ, toggleHighSpeed: ƒ,
toggleLights: ƒ}
Los valores devueltos en este caso pueden parecer inicialmente un poco complicados de
comprender, pero en realidad es bastante sencillo:
1. El objeto prototipo del objetotrain5 se creó cuando usted definió la claseTrain.

Puede acceder al prototipo utilizando la sintaxisTrain.prototype y obtener de
vuelta el objeto prototipo.
2. El objeto prototipo del objetohighSpeed1 es este objeto: {constructor: ƒ,
toggleHighSpeed: ƒ, toggleLights: ƒ}. A su vez, este objeto tiene su propio
prototipo, que puede encontrarse utilizando la siguiente
sintaxis:HighSpeedTrain.prototype.__proto__. La ejecución de este código
devuelve:{constructor: ƒ, toggleLights: ƒ, lightsStatus: ƒ, getSelf: ƒ,
getPrototype: ƒ}.
Los prototipos parecen fáciles de comprender a cierto nivel, pero es fácil perderse en la
complejidad. Esta es una de las razones por las que la sintaxis de clases en JavaScript
mejora su experiencia como desarrollador, al facilitar el razonamiento sobre las
relaciones entre clases. Sin embargo, a medida que mejora sus habilidades, siempre
debe esforzarse por comprender mejor sus herramientas, y esto incluye los prototipos.
Después de todo, JavaScript no es más que una herramienta, y ahora ha "echado un
vistazo detrás de la cortina".
En esta lectura, ha aprendido la esencia misma de cómo funciona la programación

orientada a objetos con clases en JavaScript. Sin embargo, esto no es todo.
En la lección sobre el diseño de un programa orientado a objetos, aprenderá algunos

conceptos más útiles. Éstos tienen que ver principalmente con la codificación de sus
clases para que sea aún más fácil crear instancias de objetos de esas clases en
JavaScript.
Utilizar la instancia de una clase como propiedad del constructor de otra clase
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class StationaryBike {
constructor(position, gears) {
this.position = position
this.gears = gears
}
}
class Treadmill {
constructor(position, modes) {
this.position = position
this.modes = modes
}
}
class Gym {
constructor(openHrs, stationaryBikePos, treadmillPos) {
this.openHrs = openHrs
this.stationaryBike = new StationaryBike(stationaryBikePos, 8)
this.treadmill = new Treadmill(treadmillPos, 5)
}
}
var boxingGym = new Gym("7-22", "right corner", "left corner")
console.log(boxingGym.openHrs) //
console.log(boxingGym.stationaryBike) //
console.log(boxingGym.treadmill) //
EjecutarRestablecer
En este ejemplo, hay tres clases definidas: StationaryBike, Treadmill, y Gym.
La clase StationaryBike está codificada de forma que su futura instancia de objeto

tendrá las propiedades position y gears. La propiedad position describe dónde se
colocará la bicicleta estática dentro del gimnasio, y la propiedad gears da el número de
marchas que debe tener esa bicicleta estática.
La clase Treadmill también tiene una posición, y otra propiedad, denominada modes
(como en "modos de ejercicio").
La clase Gym tiene tres parámetros en su función constructora: openHrs,

stationaryBikePos, treadmillPos.
Este código me permite instanciar un nuevo objeto instancia de la clase Gym, y cuando
lo inspecciono, obtengo la siguiente información:
 la propiedad openHrs es igual a "7-22" (es decir, de 7 de la mañana a 10 de la

noche)
 la propiedad stationaryBike es un objeto de la clase StationaryBike, que
contiene dos propiedades: position y gears
 la propiedad treadmill es un objeto del tipo Treadmill, que contiene dos
propiedades: position y modes
Parámetros por defecto

Inglés
Una útil una característica de ES6 me permite establecer un parámetro por defecto
dentro de una definición de función En primer lugar, .
Lo que esto significa es que voy a utilizar una característica de ES6 que me permite
establecer un parámetro por defecto dentro de una definición de función, que va de la
mano con el enfoque de codificación defensiva, mientras que no requiere casi ningún
esfuerzo para poner en práctica.
Por ejemplo, considere una declaración de función sin parámetros por defecto
establecidos:
1
2
3
function noDefaultParams(number) {
console.log('Result:', number * number)
}
Obviamente, la funciónnoDefaultParams debería devolver cualquier número que

reciba,elevado al cuadrado.
Sin embargo, ¿qué pasaría si la llamo de esta manera?
1
noDefaultParams(); // Result: NaN
JavaScript, debido a su naturaleza dinámica, no lanza un error, pero devuelve una salida
sin sentido.
Considere ahora, la siguiente mejora, utilizando parámetros por defecto:
1
2
3
function withDefaultParams(number = 10) {
console.log('Result:', number * number)
}
Los parámetros por defecto me permiten construir una función que se ejecutará con los
valores de los argumentos por defecto, incluso si no le paso ningún argumento, mientras
que sigue siendo lo suficientemente flexible como para permitirme pasar valores de
argumentos personalizados y tratar con ellos en consecuencia.
Esto me permite ahora codificar mis clases de forma que promueva una instanciación de
objetos más sencilla.
Considere la siguiente definición de clase:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class NoDefaultParams {
constructor(num1, num2, num3, string1, bool1) {
this.num1 = num1;
this.num2 = num2;
this.num3 = num3;
this.string1 = string1;
this.bool1 = bool1;
}
calculate() {
if(this.bool1) {
console.log(this.string1, this.num1 + this.num2 + this.num3);
return;
}
return "The value of bool1 is incorrect"
}
}
Ahora instanciaré un objeto de la claseNoDefaultParams, y ejecutaré en él el

métodocalculate(). Obviamente, elbool1 debe establecerse entrue en la invocación para
que esto funcione, pero lo estableceré en falso a propósito, para resaltar el punto que
estoy haciendo.
1
2
var fail = new NoDefaultParams(1,2,3,false);
fail.calculate(); // 'The value of bool1 is incorrect'
Este ejemplo podría poner de relieve la razón por la que a veces aparecen mensajes de
error extraños cuando se utiliza algún software: quizás los desarrolladores no tuvieron
tiempo suficiente para construirlo mejor.
Sin embargo, ahora que conoce los parámetros por defecto, este ejemplo puede
mejorarse de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class WithDefaultParams {
constructor(num1 = 1, num2 = 2, num3 = 3, string1 = "Result:", bool1
= true) {
this.num1 = num1;
this.num2 = num2;
this.num3 = num3;
this.string1 = string1;
this.bool1 = bool1;
}
calculate() {
if(this.bool1) {
console.log(this.string1, this.num1 + this.num2 + this.num3);
return;
}
return "The value of bool1 is incorrect"
}
}
var better = new WithDefaultParams();
better.calculate(); // Result: 6
Este enfoque mejora la experiencia de desarrollo de mi código, porque ya no tengo que

preocuparme de alimentar la claseWithDefaultParameters con todos los argumentos.
Para pruebas rápidas, esto es genial, porque ya no tengo que preocuparme de pasar los
argumentos adecuados.
Además, este enfoque realmente brilla cuando se construyen jerarquías de herencia

utilizando clases, ya que hace posible proporcionar sólo las propiedades personalizadas
en la subclase, sin dejar de aceptar todos los parámetros por defecto del constructor de
la superclase.
En conclusión, en esta lectura he cubierto lo siguiente
 Cómo abordar el diseño de un programa orientado a objetos en JavaScript

 El papel de las palabras claveextends ysuper
 La importancia de utilizar parámetros por defecto.
Diseñar un programa OO
Inglés
En esta lectura, le mostraré cómo crear clases en JavaScript, utilizando todos los
conceptos que ha aprendido hasta ahora.
En concreto, voy a construir la siguiente jerarquía de herencia:
Animal / \ Pájaro Gato / \ \ CasaGato Tigre Loro
Hay dos palabras clave que son esenciales para la programación orientada a objetos con
clases en JavaScript.
Estas palabras clave sonextends ysuper.
La palabra claveextends me permite heredar de una clase existente.

Basándome en la jerarquía anterior, puedo codificar la claseAnimal así:
1
2
3
class Animal {
// ... class code here ...
}
Luego puedo codificar, por ejemplo, la subclaseCat, así:
1
2
3
class Cat extends Animal {
// ... class code here ...
}
Así es como se utiliza la palabra claveextends para establecer relaciones de herencia.
La palabra clavesuper me permite "tomar prestada" funcionalidad de una superclase, en

una subclase. La dinámica exacta de cómo funciona esto se tratará más adelante en esta
lección.
Ahora puedo empezar a pensar en cómo implementar mi jerarquía de clases OOP.
Antes de empezar, necesito pensar en cosas como: * ¿Qué debe ir en la clase base
deAnimal? En otras palabras, ¿qué heredarán todas las subclases de la clase base? *
¿Cuáles son las propiedades y métodos específicos que separan a cada clase de las
demás? * En general, ¿cómo se relacionarán mis clases entre sí?
Una vez que lo haya pensado bien, podré construir mis clases.
Así pues, mi plan es el siguiente
1. El constructor de la claseAnimal tendrá dos propiedades:color yenergy.
2. El prototipo de la claseAnimal tendrá tres métodos:isActive(),sleep(), ygetColor().
3. El métodoisActive(), siempre que se ejecute, reducirá el valor deenergy hasta que

alcance0. El métodoisActive() también informará del valor actualizado deenergy.
Sienergy está a cero, el objeto animal se dormirá inmediatamente, invocando el
métodosleep() en función de dicha condición.
4. El métodogetColor() se limitará a registrar por consola el valor de la propiedadcolor.
5. La claseCat heredará deAnimal, con las propiedades

adicionalessound,canJumpHigh, ycanClimbTrees específicas de la claseCat. También
tendrá su propio métodomakeSound().
6. La claseBird también heredará deAnimal, pero sus propias propiedades específicas
serán muy diferentes de las deCat. En concreto, la claseBird tendrá las
propiedadessound ycanFly, y también el métodomakeSound.
7. La claseHouseCat extenderá la claseCat, y tendrá su propiahouseCatSound como

propiedad especial. Además, anulará el métodomakeSound() de la claseCat, pero lo
hará de una forma interesante. Si el métodomakeSound(), al ser invocado, recibe un
único argumentooption- fijado entrue, entonces ejecutarásuper.makeSound()- en otras
palabras, ejecutará el código de la clase padre (Cat) con el añadido de ejecutar
elconsole.log(this.houseCatSound). Efectivamente, esto significa que el
métodomakeSound() en el objeto instancia de la claseHouseCat tendrá dos
comportamientos distintos, en función de si le pasamostrue ofalse.
8. La claseTiger también heredará deCat, y vendrá con su propia propiedadtigerSound,

mientras que el resto del comportamiento será prácticamente el mismo que en la
claseHouseCat.
9. Finalmente, la claseParrot extenderá la claseBird, con su propia propiedadcanTalk, y

su propio métodomakeSound(), trabajando con dos condicionales: uno que comprueba
si el valor detrue fue pasado amakeSound durante la invocación, y otro que comprueba
el valor almacenado dentro de la propiedadthis.canTalk.
Ahora que ya he explicado completamente cómo debe funcionar todo el código de mi

jerarquía de clases, puedo empezar a implementarlo añadiendo todos los requisitos
como comentarios dentro de la estructura del código.
En este momento, con todos los requisitos escritos como comentarios, mi código
debería ser el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class Animal {
// constructor: color, energy
// isActive()
// if energy > 0, energy -=20, console log energy
// else if energy <= 0, sleep()
// sleep()
// energy += 20
// console.log energy
}
// constructor: sound, canJumpHigh, canClimbTrees, color, energy
// makeSound()
// console.log sound
}
class Bird extends Animal {
// constructor: sound, canFly, color, energy
// makeSound()
// console.log sound
}
class HouseCat extends Cat {
// constructor: houseCatSound, sound, canJumpHigh, canClimbTrees, col
or, energy
// makeSound(option)
// if (option)
// super.makeSound()
// console.log(houseCatSound)
}
class Tiger extends Cat {
// constructor: tigerSound, sound, canJumpHigh, canClimbTrees, color,
energy
// if (option)
// console.log(tigerSound)
}
class Parrot extends Bird {
// constructor: canTalk, sound, canJumpHigh, canClimbTrees, color, en
ergy
// if (option)
// if (canTalk)
// console.log("talking!")
Ahora que he codificado mis requisitos dentro de los comentarios de clases que, de otro
modo, estarían vacías, puedo empezar a codificar cada clase según mis especificaciones.
Codificación de la claseAnimal
En primer lugar, codificaré la clase baseAnimal.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Animal {
constructor(color = 'yellow', energy = 100) {
this.color = color;
this.energy = energy;
}
isActive() {
if(this.energy > 0) {
this.energy -= 20;
console.log('Energy is decreasing, currently at:', this.energ
y)
} else if(this.energy == 0){
this.sleep();
}
}
sleep() {
this.energy += 20;
console.log('Energy is increasing, currently at:', this.energy)
}
getColor() {
console.log(this.color)
}
}
Cada objeto animal, sea cual sea, compartirá las propiedades decolor yenergy.
Ahora puedo codificar las clasesCat yBird:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
constructor(sound = 'purr', canJumpHigh = true, canClimbTrees = true,
color, energy) {
super(color, energy);
this.sound = sound;
this.canClimbTrees = canClimbTrees;
this.canJumpHigh = canJumpHigh;
}
makeSound() {
console.log(this.sound);
}
}

constructor(sound = 'chirp', canFly = true, color, energy) {
this.sound = sound;
this.canFly = canFly;
}
makeSound() {
}
}
Nota: Si no utilizara la palabra clavesuper en nuestras subclases, al ejecutar el código

anterior, obtendría el siguiente error:Uncaught ReferenceError: Must call super
constructor in derived class before accessing 'this' or returning from derived
constructor.
Y ahora puedo codificar las tres clases restantes:HouseCat,Tiger, yParrot.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class HouseCat extends Cat {
constructor(houseCatSound = "meow", sound,canJumpHigh,canClimbTrees,
color,energy) {
super(sound,canJumpHigh,canClimbTrees, color,energy);
this.houseCatSound = houseCatSound;
}
makeSound(option) {
if (option) {
super.makeSound();
}
console.log(this.houseCatSound);
}
}
class Tiger extends Cat {

constructor(tigerSound = "Roar!", sound,canJumpHigh,canClimbTrees, co
lor,energy) {
super(sound,canJumpHigh,canClimbTrees, color,energy);
this.tigerSound = tigerSound;
}
makeSound(option) {
if (option) {
super.makeSound();
}
console.log(this.tigerSound);
}
}
class Parrot extends Bird {

constructor(canTalk = false, sound,canFly, color,energy) {
super(sound,canFly, color,energy);
this.canTalk = canTalk;
}
makeSound(option) {
if (option) {
super.makeSound();
}
if (this.canTalk) {
console.log("I'm a talking parrot!");
}
}
}
Ahora que hemos establecido toda esta estructura de herencia, podemos construir varios
objetos animales.
Por ejemplo, puedo construir dos loros: uno que puede hablar y otro que no.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var polly = new Parrot(true); // we're passing `true` to the constructor
so that polly can talk
var fiji = new Parrot(false); // we're passing `false` to the constructor
so that fiji can't talk
polly.makeSound(); // 'chirp', 'I'm a talking parrot!'

fiji.makeSound(); // 'chirp'
polly.color; // yellow
polly.energy; // 100
polly.isActive(); // Energy is decreasing, currently at: 80

var penguin = new Bird("shriek", false, "black and white", 200); // setti
ng all the custom properties
penguin; // Bird {color: 'black and white', energy: 200, sound: 'shriek',
canFly: false }
penguin.sound; // 'shriek'
penguin.canFly; // false
penguin.color; // 'black and white'
penguin.energy; // 200
penguin.isActive(); // Energy is decreasing, currently at: 180
También puedo construir un gato mascota:
1
var leo = new HouseCat();
Ahora puedo tenerleo ronroneando:
1
2
3
4
5
// leo, no purring please:
leo.makeSound(false); // meow
// leo, both purr and meow now:

leo.makeSound(true); // purr, meow
Además, puedo construir un tigre:
1
var cuddles = new Tiger();
Mi tigrecuddles puede ronronear y rugir, o sólo rugir:
1
2
cuddles.makeSound(false); // Roar!
cuddels.makeSound(true); // purr, Roar!
Aquí está el código completo de esta lección, para que sea más fácil copiar y pegar:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class Animal {
constructor(color = 'yellow', energy = 100) {
this.color = color;
this.energy = energy;
}
isActive() {
if(this.energy > 0) {
this.energy -= 20;
console.log('Energy is decreasing, currently at:', this.energ
y)
} else if(this.energy == 0){
this.sleep();
}
}
sleep() {
this.energy += 20;
console.log('Energy is increasing, currently at:', this.energy)
}
getColor() {
console.log(this.color)
}
}

constructor(sound = 'purr', canJumpHigh = true, canClimbTrees = true,
color, energy) {
this.sound = sound;
this.canClimbTrees = canClimbTrees;
this.canJumpHigh = canJumpHigh;
}
makeSound() {
}
}

constructor(sound = 'chirp', canFly = true, color, energy) {
this.sound = sound;
this.canFly = canFly;
}
Para empezar, es importante saber que un bucle for of no puede funcionar sobre un
objeto directamente, ya queun objeto no es iterable. Por ejemplo:
1
2
3
4
5
6
7
8
const car = {
speed: 100,
color: "blue"
}
for(prop of car) {
console.log(prop)
}
EjecutarRestablecer
La ejecución del fragmento de código anterior arrojará el siguiente error:
1
Uncaught TypeError: car is not iterable
Al contrario que los objetos, las matricesson iterables. Por ejemplo:
1
2
3
4
const colors = ['red','orange','yellow']
for (var color of colors) {
console.log(color);
}
EjecutarRestablecer
Esta vez, la salida es la siguiente:
1
2
3
rojo
naranja
amarillo
Por suerte, puede utilizar el hecho de que un bucle for of puede ejecutarse sobre
matricespara hacer un bucle sobre objetos.
¿Pero cómo?
Antes de que pueda responder adecuadamente a esta pregunta, primero necesita revisar
tres métodos incorporados:Object.keys(),Object.values(), yObject.entries().
Métodos incorporados
El métodoObject.keys()
El métodoObject.keys() recibe un objeto como parámetro. Recuerde que este objeto esel
objeto sobre el que desea realizar el bucle. Aún es demasiado pronto para explicar
cómo realizará el bucle sobre el objeto en sí; por ahora, céntrese en la matriz de
propiedades devuelta cuando llame al métodoObject.keys().
He aquí un ejemplo de ejecución del métodoObject.keys() sobre un objetocar2 nuevo:
1
2
3
4
5
const car2 = {
speed: 200,
color: "red"
}
console.log(Object.keys(car2)); // ['speed','color']
EjecutarRestablecer
Así, cuando ejecutoObject.keys() y le paso mi objetocar2,el valor devuelto es un array

de cadenas, donde cada cadena es una clave de propiedad de las propiedades contenidas
en mi objetocar2.
El método Object.values()
Otro método útil es Object.values() :
1
2
3
4
5
const car3 = {
speed: 300,
color: "yellow"
}
console.log(Object.values(car3)); // [300, 'yellow']
El método Object.entries()
Por último, existe otro método útil,Object.entries(), que devuelve una matriz con las
claves y los valores.
1
2
3
4
5
const car4 = {
speed: 400,
color: 'magenta'
}
console.log(Object.entries(car4));
Lo que se devuelve de la invocación del métodoObject.entries() es lo siguiente:
1
[ ['speed', 400], ['color', 'magenta'] ]
Esta vez, los valores que se devuelven son arrays de 2 miembros anidados dentro de un
array. En otras palabras, se obtiene un array de arrays, donde cada elemento del array
tiene dos miembros, siendo el primero la clave de una propiedad, y el segundo el valor
de una propiedad.
Efectivamente, es como si estuviera listando todas las propiedades de un objeto dado,

un poco así:
1
2
3
4
5
[
[llave de propiedad, valor de propiedad],
[llave de propiedad, valor de propiedad],
...etc
]
En resumen, ha aprendido que puede realizar bucles sobre matrices utilizando el

buclefor of. También aprendió que puede extraer las claves de los objetos, sus valores, o
ambos, utilizando la sintaxisObject.keys(),Object.values() yObject.entries().
Ejemplos
Ahora tiene todos los ingredientes que necesita para hacer un bucle sobre las clavesy
valores de las propiedades propias de cualquier objeto.
Aquí tiene un ejemplo muy sencillo de cómo hacerlo:
1
2
3
4
5
6
7
8
9
10
var clothingItem = {
price: 50,
color: 'beige',
material: 'cotton',
season: 'autumn'
}
for( const key of Object.keys(clothingItem) ) {

console.log(key, ":", clothingItem[key])
}
La parte más difícil de entender en esta sintaxis es probablemente laclothingItem[key].

Por suerte, no es demasiado difícil de comprender, sobre todo porque ya ha cubierto el
concepto anteriormente cuando aprendía cómoacceder a un miembro de un objeto
utilizando la notación de corchetes.
Recuerde que también aprendió cómo puede acceder dinámicamente al nombre de una
propiedad.
Para retomar este concepto y mostrar una demostración práctica de cómo funciona,
vamos a codificar una declaración de función que asigne aleatoriamente la cadena speed
o la cadenacolor a un nombre de variable y, a continuación, construyamos un objeto que
sólo tenga dos claves: una clavespeed y una clavecolor.
Tras esta configuración, podrá acceder dinámicamente a cualquiera de esas propiedades

en un objetodrone nuevo, utilizando la notación de corchetes.
He aquí el código del ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function testBracketsDynamicAccess() {
var dynamicKey;
if(Math.random() > 0.5) {
dynamicKey = "speed";
}else{
dynamicKey = "color";
}
var drone = {
speed: 15,
color: "orange"
}
console.log(drone[dynamicKey]);
}
testBracketsDynamicAccess();
EjecutarRestablecer
Este ejemplo puede parecer un poco enrevesado, pero su propósito es demostrar el

hecho de que se obtiene uno u otro valor de la clave de un objeto, basándose en la
cadena que se asignó a la variabledynamicKey, y a la que se accede sin problemas,
utilizando la notación de corchetes.
Siéntase libre de ejecutar la funcióntestBracketsDynamicAccess() unas cuantas veces, y

notará que a veces el valor que obtiene como salida es15, y a veces esorange, aunque
siempre estoy accediendo a la clavedrone[dynamicKey]. Dado que el valor de
dynamicKey se rellena en la invocación deMath.random(), a veces esa expresión se
evalúa comodrone["speed"], y otras veces se evalúa comodrone["color"].
Ahora ya conoce los elementos que hacen que el bucle for sea útil para iterar sobre
objetos,aunque los objetos no son iterables .
A continuación, verá un ejemplo práctico de cómo trabajar tanto con el bucle for of
como con el bucle for in. Cada bucle tiene su lugar y puede considerarse útil en
diferentes situaciones.
Ejemplos de literales de plantilla

Inglés
El objetivo de esta lectura es ayudarle a comprender cómo funcionan los literales de
plantilla.
¿Qué son los literales de plantilla?

Los literales de plantilla son una forma alternativa de trabajar con cadenas, que se
introdujo en la adición ES6 al lenguaje JavaScript.
Hasta ES6, la única forma de construir cadenas en JavaScript era delimitarlas entre
comillas simples o dobles:
2
1
"Hello, World!"
'Hello, World!'
Junto a las anteriores formas de construir cadenas, ES6 introdujo el uso de caracteres
backtick como delimitadores:
1
`Hello, World!`
El fragmento de código anterior es un ejemplo de cadena de plantilla, que también se
conoce como literal de plantilla.
Nota: En la mayoría de los teclados, el carácter backtick se encuentra encima de la

tecla TAB, a la izquierda de la tecla número 1.
Con los literales de plantilla, se puede incrustar una expresión en unmarcador de

posición. Un marcador de posición se representa con ${}, y todo lo que esté dentro de
las llaves se trata como JavaScript y todo lo que esté fuera de las llaves se trata como
una cadena:
Diferencias entre una plantilla y una cadena regular

Hay varias maneras en que una cadena de plantilla es diferente de una cadena regular.
 En primer lugar, permite lainterpolación de variables:

1
2
3
let greet = "Hello";
let place = "World";
console.log(`${greet} ${place} !`) //display both variables using templat
e literals
El registro de consola anterior dará como resultado
1
Hello World !
Esencialmente, el uso de literales de plantilla permite a los programadores incrustar

variables directamente entre las comillas, sin necesidad de utilizar el operador + y las
comillas simples o dobles para delimitar los literales de cadena de las variables. En otras
palabras, en ES5, el ejemplo anterior tendría que escribirse como sigue:
1
2
3
var greet = "Hello";
var place = "World";
console.log(greet + " " + place + "!"); //display both variables without
using template literals
 Además de la interpolación de variables, las cadenas de plantilla pueden abarcar

varias líneas.
Por ejemplo, esta es una sintaxis perfectamente buena:
1
2
3
4
`Hello,
World
!
`
Observe que esto no puede hacerse utilizandoliterales de cadena (es decir, cadenas
delimitadas por comillas simples o dobles):
1
2
"Hello,
World"
El código anterior, al ejecutarse, arrojará un error de sintaxis.
En pocas palabras, los literales de plantilla permiten cadenas de varias líneas, algo que
simplemente no es posible con los literales de cadena.
 Además, la razón por la que es posible interpolar variables en los literales de

plantilla es porque esta sintaxis permite realmente laevaluación de expresiones.
En otras palabras:
1
2
//it's possible to perform arithmetic operation inside a template literal
expression
console.log(`${1 + 1 + 1 + 1 + 1} stars!`)
El ejemplo anterior registrará por consola la siguiente cadena:5 stars!.
Esto abre un sinfín de posibilidades. Por ejemplo, es posible evaluar una expresión
ternaria dentro de un literal de plantilla.
Algunos casos de uso adicionales de los literales de plantilla son los literales deplantilla
anidados y lasplantillas etiquetadas. Sin embargo, son un poco más complicados y
están fuera del alcance de esta lectura.
Si tiene curiosidad por saber cómo funcionan, consulte la lectura adicional que se
proporciona al final de esta lección.
Ejemplos de estructuras de datos

del Inglés
Inglés
En esta lectura, conocerá algunos de los ejemplos más comunes de estructuras de datos.
Nos centraremos en el trabajo con las estructuras de datos Object, Array, Map y Set en
JavaScript, a través de una serie de ejemplos.
Tenga en cuenta que esta lectura no incluirá la discusión de algunas estructuras de datos
que existen en otros lenguajes, como las colas o las listas enlazadas. Aunque estas
estructuras de datos (¡y otras estructuras de datos también!) pueden codificarse de forma
personalizada en JavaScript, la naturaleza avanzada de estos temas y la dificultad de
realizar ejercicios relacionados con ellos hacen que queden fuera del alcance de esta
lectura.
Trabajar con matrices en JavaScript

Anteriormente, ha cubierto una gran cantidad de conceptos relacionados con la forma de
trabajar con matrices en JavaScript.
Sin embargo, aún quedan algunos temas importantes por cubrir, y uno de ellos es, por
ejemplo, el trabajo con algunos métodos incorporados.
En esta lectura, la atención se centra en tres métodos específicos que existen en las
matrices:
1. forEach
2. filter
3. map
Exploremos estos métodos.
El método forEach()
Las matrices en JavaScript vienen con un práctico método que le permite hacer un bucle
sobre cada uno de sus miembros.
He aquí la sintaxis básica:
1
2
3
4
5
const fruits = ['kiwi','mango','apple','pear'];
function appendIndex(fruit, index) {
console.log(`${index}. ${fruit}`)
}
fruits.forEach(appendIndex);
El resultado de ejecutar el código anterior es el siguiente:
1
2
3
4
0. kiwi
1. mango
2. apple
3. pear
Para explicar la sintaxis, el métodoforEach() aceptauna función que trabajará sobre cada
elemento del array. El primer parámetro de esa función es el propio elemento actual de la
matriz, y el segundo parámetro (opcional) es el índice.
Muy a menudo, la función que el métodoforEach() necesita utilizar se pasa directamente en

la llamada al método, como en este caso:
1
2
3
4
const veggies = ['onion', 'garlic', 'potato'];
veggies.forEach( function(veggie, index) {
console.log(`${index}. ${veggie}`);
});
Esto hace que el código sea más compacto, pero quizás algo más difícil de leer. Para
aumentar la legibilidad, a veces se utilizan funciones de flecha. Puede encontrar más
información sobre las funciones de flecha en la lectura adicional.
El métodofilter()
Otro método muy útil sobre la matriz es el métodofilter(). Filtra sus arrays basándoseen una
prueba específica. Se devuelven los elementos del array que superan la prueba.
Aquí tiene un ejemplo:
1
2
3
4
const nums = [0,10,20,30,40,50];
nums.filter( function(num) {
return num > 20;
})
Aquí está el valor del array devuelto:
1
[30,40,50]
Similar al métodoforEach(), el métodofilter() también acepta una función y esa función
realiza algún trabajo en cada uno de los elementos del array.
El método map
Por último, existe un método muy útilmap.
Este método se utiliza para mapear cada elemento del array sobre el elemento de otro
array, basándose en cualquier trabajo que se realice dentro de la función que se pasa al
mapa como parámetro.
Por ejemplo:
1
2
3
[0,10,20,30,40,50].map( function(num) {
return num / 10
})
El valor de retorno del código anterior es
1
[0,1,2,3,4,5]
Como ya se ha comentado, la elección de una estructura de datos adecuada afecta al
propio código que puede escribir. Esto se debe a que la propia estructura de datos viene
con alguna funcionalidad incorporada que facilita la realización de ciertas tareas o la hace
más difícil o incluso imposible sin convertir su código a una estructura de datos adecuada.
Ahora que ha cubierto los métodos, vamos a explorar cómo trabajar con diferentes
estructuras de datos incorporadas en JavaScript.
Trabajar con objetos en JavaScript

Gran parte de la información sobre cómo trabajar con objetos en JavaScript ya se ha
cubierto en este curso.
El siguiente ejemplo demuestra cómo utilizar la estructura de datos de objetos para

completar una tarea específica. Esta tarea consiste en convertir un objeto en una matriz:
1
2
3
4
5
6
7
8
9
10
const result = [];
const drone = {
speed: 100,
color: 'yellow'
}
const droneKeys = Object.keys(drone);
droneKeys.forEach( function(key) {
result.push(key, drone[key])
})
console.log(result)
Este es el resultado de ejecutar el código anterior:
1
['speed',100,'color','yellow']
Aunque esto es posible y funciona, tener que hacer algo así puede significar que no ha
elegido la estructura de datos correcta con la que trabajar en su código.
Por otro lado, a veces no puede elegir la estructura de datos con la que trabaja. Tal vez
esos datos procedan de un proveedor de datos externo y lo único que puede hacer es
codificar su programa para que los consuma. Aprenderá más sobre el intercambio de
datos en la web cuando conozca JSON (JavaScript Object Notation).
Trabajar con mapas en JavaScript

Para crear un nuevo Mapa, puede utilizar el constructorMap:
1
new Map();
Un mapa puede parecer muy similar a un objeto en JS.
Sin embargo, no tiene herencia. No tiene prototipos Esto lo hace útil como
almacenamiento de datos.
Por ejemplo:
1
2
3
4
5
6
let bestBoxers = new Map();
bestBoxers.set(1, "The Champion");
bestBoxers.set(2, "The Runner-up");
bestBoxers.set(3, "The third place");
console.log(bestBoxers);
Aquí está la salida de la consola:
1
Map(3) {1 => 'The Champion', 2 => 'The Runner-up', 3 => 'The third place
'}
Para obtener un valor específico, debe utilizar el métodoget(). Por ejemplo:
1
bestBoxers.get(1); // 'The Champion'
Trabajar con conjuntos en JavaScript

Un conjunto es una colección de valores únicos.
Para construir un nuevo conjunto, puede utilizar el constructorSet:
1
new Set();
El constructorSet puede, por ejemplo, aceptar un array.
Esto significa que podemos utilizarlo para filtrar rápidamente un array en busca de
miembros únicos.
1
2
3
const repetitiveFruits = ['apple','pear','apple','pear','plum', 'apple'];
const uniqueFruits = new Set(repetitiveFruits);
console.log(uniqueFruits);
El código anterior muestra lo siguiente en la consola:
1
{'apple', 'pear', 'plum'}
Otras estructuras de datos en JavaScript

Además de las estructuras de datos incorporadas en JavaScript, es posible construir
estructuras de datos personalizadas no nativas.
Estas estructuras de datos vienen incorporadas de forma nativa en algunos otros

lenguajes de programación o incluso esos otros lenguajes de programación no las
soportan de forma nativa.
Algunas estructuras de datos más avanzadas que no se han cubierto incluyen:
 Colas
 Listas enlazadas (enlazadas simple y doblemente)
 Árboles
 Grafos
Uso de la dispersión y el descanso

Inglés
En esta lectura, aprenderá a unir matrices, objetos utilizando el operador resto. También
descubrirá cómo utilizar el operador de dispersión para:
 Añadir nuevos miembros a matrices sin utilizar el método push(),

 Convertir una cadena en una matriz y
 Copiar un objeto o una matriz en un objeto distinto
Recuerde que los métodos push() y pop() se utilizan para añadir y eliminar
elementos del final de una matriz.
Unir matrices, objetos utilizando el operador resto

Utilizando el operador resto, es fácil concatenar matrices:
1
2
3
4
const fruits = ['apple', 'pear', 'plum']
const berries = ['blueberry', 'strawberry']
const fruitsAndBerries = [...fruits, ...berries] // concatenate
console.log(fruitsAndBerries); // outputs a single array
Este es el resultado:
1
['apple', 'pear', 'plum', 'blueberry', 'strawberry']
También es fácil unir objetos:
1
2
3
4
const flying = { wings: 2 }
const car = { wheels: 4 }
const flyingCar = {...flying, ...car}
console.log(flyingCar) // {wings: 2, wheels: 4}
Añada nuevos miembros a las matrices sin utilizar el

métodopush()
He aquí cómo utilizar el operador spread para añadir fácilmente uno o más miembros a
una matriz existente:
1
2
3
4
let veggies = ['onion', 'parsley'];
veggies = [...veggies, 'carrot', 'beetroot'];
console.log(veggies);
He aquí el resultado:
1
['onion', 'parsley', 'carrot', 'beetroot']
Convertir una cadena en una matriz utilizando el

operador spread
Dada una cadena, es fácil extenderla en elementos separados de una matriz:
1
2
3
const greeting = "Hello";
const arrayOfChars = [...greeting];
console.log(arrayOfChars); // ['H', 'e', 'l', 'l', 'o']
Copie un objeto o un array en otro distinto

He aquí cómo copiar un objeto en otro completamente distinto, utilizando el operador
spread.
1
2
3
4
5
6
7
8
9
const car1 = {
speed: 200,
color: 'yellow'
}
const car 2 = {...car1}
car1.speed = 201
console.log(car1.speed, car2.speed)
La salida es201, 200.

Puede copiar una matriz en una matriz completamente separada, también utilizando el
operador de dispersión, así:
1
2
3
4
const fruits1 = ['apples', 'pears']
const fruits2 = [...fruits1]
fruits1.pop()
console.log(fruits1, "not", fruits2)
Esta vez, la salida es:
1
['apples'] 'not' ['apples','pears']
Tenga en cuenta que el operador spread sólo realiza una copia superficial del array u
objeto de origen. Para más información al respecto, consulte la lectura adicional.
Hay muchos más trucos que puede realizar con el operador spread. Algunos de ellos son
realmente útiles cuando se empieza a trabajar con una biblioteca como React.
Interactividad JavaScript
Inglés
El propósito de esta lectura es presentarle una explicación sencilla de la manipulación
de páginas web y algunos ejemplos de la misma.
¿Sabía que el propósito inicial de JavaScript eraproporcionar interactividad en el

navegador?
En otras palabras, era el "conjunto de controles" que permitiría a los desarrolladores

web controlar el comportamiento de las páginas web e incluso de los navegadores en los
que éstas funcionaban.
Esto sigue siendo así hoy en día.
A medida que el ecosistema web se desarrollaba y el mundo se digitalizaba cada vez

más, también lo hacía la miríada de formas en que uno puede utilizar JavaScript como
desarrollador web para manipular las páginas web.
Al principio, a finales de la década de 1990, existía el JavaScript plano que había que
retocar para adaptarlo a cada navegador.
Luego, a mediados de la década de 2000, apareció la biblioteca jQuery, con la idea de
escribir menos código, pero hacer más con él. Igualó las condiciones", ya que permitió a
los desarrolladores utilizar una única base de código para varios navegadores.
Esta tendencia continuó y aparecieron muchos otros frameworks como React, Vue,
Angular, D3 y más.
Junto con npm y Node.js, el ecosistema JavaScript no se ralentiza.
Aunque ha recorrido un largo camino, a veces es bueno volver a lo básico. JavaScript

sigue siendo el rey cuando se trata de hacer que nuestros sitios web sean interactivos.
Aunque el CSS se ha desarrollado mucho a lo largo de los años, sigue siendo JavaScript
el que permite a los usuarios:
 Obtener su geolocalización,
 Interactuar con mapas,
 Jugar en el navegador,
 Manejar todo tipo de eventos desencadenados por el usuario,
independientemente del dispositivo,
 Verificar la entrada de un formulario antes de enviarlo al backend de una
aplicación web,
 ¡y mucho más!
Hay muchas, muchas maneras en las que JavaScript le permite construir experiencias
ricas e interactivas en la web.
Mover datos en la web

del Inglés
Inglés
La web moderna está formada por millones y millones de páginas web, servicios
conectados y bases de datos.
Hay sitios web que se comunican con otros sitios web, que obtienen datos de fuentes y
proveedores de datos, tanto de pago como gratuitos.
Todos estos flujos de datos deben facilitarse con algún tipo de formato de datos.
Alrededor de 2001, Douglas Crockford ideó un formato de intercambio de datos basado en

objetos JavaScript. El nombre que se dio a este formato fue JSON, que es JavaScript
Object Notation (Notación de objetos JavaScript).
Antes de JSON, el formato de archivo de intercambio de datos más común

eraXML(Extensible Markup Language). Sin embargo, debido a la sintaxis de XML,
requería más caracteres para describir los datos que se enviaban. Además, al tratarse de
un lenguaje independiente específico, no era tan fácilmente interoperable con JavaScript.
Así pues, las dos razones principales por las que el formato JSON se ha convertido en el
formato de intercambio de datos dominante que es hoy son dos:
 En primer lugar, es muy ligero, con una sintaxis muy similar a la de "un objeto
JavaScript encadenado". Aprenderá más sobre los detalles de esto más adelante.
 En segundo lugar, es más fácil de manejar en código JavaScript, ya que, JSON,
después de todo, essólo JavaScript.
A menudo se dice que JSON es unsubconjunto de JavaScript, lo que significa que se
adhiere a las reglas de sintaxis del lenguaje JavaScript, pero es aún más estricto en cómo
debe formatearse el código JSON adecuado. En otras palabras, todo el código JSON es
JavaScript, pero no todo el código JavaScript es JSON.
Además de ser un formato de intercambio de datos, JSON es también un formato de

archivo. No es raro acceder a algunos datos de terceros desde un sitio web de terceros a
nuestro propio código en forma de archivojson.
Por ejemplo, si tuviera un sitio web con los datos de los movimientos de los precios de las
acciones, podría querer obtener los datos de los precios actuales de las acciones de un
proveedor de datos. Ellos podrían ofrecerle su servicio de datos dándole acceso al archivo
llamado, digamosstockPrices.json, al que usted podría acceder desde sus servidores.
Una vez que haya descargado esos datos JSON encadenados en su propio código, podría
convertir esos datos en un objeto JavaScript plano.
Eso significaría que podría utilizar el código de su aplicación web para "escarbar" en los
datos de terceros convertidos en un objeto JavaScript, con el fin de obtener información
específica basada en un conjunto determinado de criterios.
Por ejemplo, si los datos JSON encadenados se convirtieran en un objeto que tuviera la
siguiente estructura:
1
2
3
4
5
6
7
8
9
10
11
12
13
const currencyInfo = {
[
USD: {
// ...
},
GBP: {
// ...
},
EUR: {
// ...
}
]
}
entonces podría acceder únicamente a los datos de la propiedadUSD, si eso es lo que
necesita su aplicación en un momento dado.
Esperemos que, con esta explicación, comprenda, a un alto nivel, cómo y por qué podría
querer utilizar JSON en su propio código.
Se trata de obtener datos JSON encadenados de un servidor, convertir ("parsear") esos

datos en objetos JS en su propio código, trabajar con los datos convertidos en su propio
código, y quizás incluso encadenando el resultado en JSON, para que estos datos estén
entonces listos para, por ejemplo, ser enviados de vuelta a un servidor después de que su
código los haya procesado localmente.
JSON es sólo una cadena - pero hay reglas que

debe seguir
JSON es una cadena, pero debe ser una cadena con el formato adecuado. En otras
palabras, debe cumplir algunas reglas.
Si una cadena JSON no está correctamente formateada, JavaScript no podrá analizarla

para convertirla en un objeto JavaScript.
JSON puede trabajar con algunas primitivas y algunos tipos de datos complejos, como se
describe a continuación.
Sólo un subconjunto de valores en JavaScript puede ser adecuadamente encadenado a

JSON y analizado desde un objeto JavaScript a una cadena JSON.
Estos valores incluyen
 valores primitivos: cadenas, números, bolleans, null

 valores complejos: objetos y matrices (¡sin funciones!)
 Los objetos tienen cadenas entre comillas dobles para todas las claves
 Las propiedades están delimitadas por comas tanto en los objetos JSON como en
las matrices JSON, igual que en el código JavaScript normal
 Las propiedades de cadena deben ir rodeadas de comillas dobles. Por ejemplo:
"fruits",
"vegetables"
 Las propiedades de número se representan utilizando la sintaxis numérica habitual
de JavaScript; por ejemplo
5,
10,
1.2
 Las propiedades booleanas se representan utilizando la sintaxis booleana habitual
de JavaScript, es decir:
true
y
false
 Null como propiedad es igual que en JavaScript regular; es sólo un
null
Puede utilizar literales de objeto y literales de matriz, siempre que siga las reglas
anteriores
¿Qué ocurre si intenta encadenar un tipo de datos que no está aceptado en la sintaxis
JSON?
Por ejemplo, ¿qué ocurre si intenta encadenar una función?La operación fallará
silenciosamente.
Si intenta encadenar otros tipos de datos, como un número BigInt, por ejemplo 123n,
obtendrá el siguiente error:Uncaught TypeError: Do not know how to serialize a BigInt.
Algunos ejemplos de cadenas JSON

Por último, he aquí un ejemplo de un objeto JSON encadenado, con un único par clave-
valor:
'{"color":"red"}'
He aquí un objeto JSON un poco más complejo:
'{"color":"red", "nestedObject": { "color": "blue" } }'
El objeto JSON anterior codifica dos propiedades:
 "color":"red"
 "nestedObject": { "color": "blue" }
También es posible tener una cadena JSON que codifique sólo una matriz:
'["one", "two", "three"]'
La cadena JSON anterior codifica una matriz que contiene tres elementos, tres valores del
tipo de datos cadena. Obviamente, al igual que los objetos, las matrices pueden anidar
otras estructuras de datos simples o complejas.
Por ejemplo:
'[{ "color": "blue" }, {"color: "red"}]'
En el ejemplo anterior, la cadena JSON codifica una matriz que contiene dos objetos,
donde cada objeto consiste en un único par clave-valor, donde ambos valores son
cadenas.

Programacion en Javascript

Cargado por

Copyright:

Formatos disponibles

Programacion en Javascript

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Programacion en Javascript

Cargado por

Copyright:

Formatos disponibles

Módulo 1: Introducción a JavaScript

En este módulo, se le presentará JavaScript. Aprenderá por qué JavaScript es tan

Tras completar este módulo, será capaz de:

 Explicar la importancia de JavaScript en el desarrollo de software

Tras completar este módulo, será capaz de:

 Construir y utilizar objetos, matrices y funciones

Este módulo trata sobre la programación funcional y el paradigma de programación

Después de completar este módulo, usted será capaz de:

 Esbozar los principios del paradigma de la programación funcional y de la

Después de completar este módulo, usted será capaz de:

 Describir Node.js y npm

En el módulo final, aprenderá sobre la evaluación graduada. Después de completar las

También tendrá la oportunidad de reflexionar sobre el contenido del curso y el camino

Cómo tener éxito en este curso

He aquí algunos consejos generales que pueden ayudarle a mantenerse centrado y en el

Establezca objetivos diarios de estudio

Cree un espacio dedicado al estudio

Programe tiempo para estudiar en su calendario

Consejo: Puede añadir las fechas límite de un curso de Coursera a su calendario de

Tome apuntes activamente

Haga una cosa cada vez

¡Su viaje de aprendizaje comienza ahora!

 Trabaje a lo largo de cada lección del itinerario de aprendizaje. Intente no

Escribir su primer código

1. Su sintaxis: la forma en que se escriben los comentarios es fácil de

Comentarios en JavaScript: la sintaxis

Existen dos variedades de comentarios en JavaScript:

1. Comentarios de una sola línea

Todo lo que sigue a un comentario de una sola línea en JavaScript es

Esto significa que, esencialmente, puede escribir cualquier tipo de texto,

Un comentario de varias líneas, como su nombre indica, abarca varias

También puede utilizar la sintaxis de comentario multilínea en una sola

Con esta suposición en mente, considere los efectos de lo que acaba de

1. Ahora puede expresar libremente sus ideas sobre cualquier código

Además, puede incluso comentar parte del código de trabajo en un

Efectivamente, los comentarios le permiten "desconectar" trozos de

Puede haber muchas razones para ello:

1. Intentar comprender cómo funciona una determinada pieza de

El punto y coma en JavaScript

Al separar claramente los pensamientos con el punto final, evita que se

En JavaScript, el punto y coma -el carácter;- tiene un propósito similar:

Inserción automática de punto y coma (ASI)

Efectivamente, lo que eso significa para los desarrolladores es que la

Por eso algunos desarrolladores dicen que no hay que molestarse en

Sin embargo, otros desarrolladores sostienen que es mejor utilizarlo

Una nota sobre el uso de la consola en las

Para empezar con JavaScript, todo lo que necesita es un navegador. En

Esto abrirá las Herramientas para desarrolladores y, a continuación,

Puede escribir cualquier comando JavaScript que desee en la consola de

Si necesita escribir varias líneas de código antes de

¡Esto es todo lo que necesita para empezar a escribir código JavaScript!

En las próximas lecciones, siéntase libre de seguir a lo largo de

1. Utilizando el editor VS Code y la extensión Code Runner como se

Emitir un saludo en la consola

En Chrome, con las Herramientas para desarrolladores abiertas, haga

Si escribe un código JavaScript válido, se ejecutará, es decir: se

Ahora utilizará la funciónconsole.log para dar salida a las palabras "Hola,

Para ello, escriba el siguiente comando en la consola:

He aquí otro comando más complejo, para mostrarle que el