Introducción a Java Script

console.log(): El método console.log() se utiliza para registrar o imprimir

mensajes en la consola. También se puede utilizar para imprimir objetos y otra
información.
console.log('Hi there!');
// Prints: Hi there!

JavaScript: JavaScript es un lenguaje de programación que impulsa el

comportamiento dinámico en la mayoría de los sitios web. Junto con HTML y CSS, es
una tecnología central que hace que la web funcione.

Métodos (Methods): Los métodos devuelven información sobre un objeto

y se llaman agregando una instancia con un punto . más el nombre del método y
paréntesis.
// Returns a number between 0 and 1
Math.random();

Bibliotecas (Libraries): Las bibliotecas contienen métodos a los que se

puede llamar añadiendo al nombre de la biblioteca un punto . más el nombre del
método y un conjunto de paréntesis.
Math.random();
// Math is the library

Datos primitivos números (Numbers): Los números son un tipo

de datos primitivo. Incluyen el conjunto de todos los números enteros y de punto
flotante.
let amount = 6;
let price = 4.99;

Propiedad de cadena .length: La propiedad .length de una cadena

devuelve el número de caracteres que componen la cadena.
let message = 'good nite';
console.log(message.length);
// Prints: 9
console.log('howdy'.length);
// Prints: 5

Instancias de datos (Data Instances): Cuando se introduce una

nueva pieza de datos en un programa de JavaScript, el programa realiza un
seguimiento en una instancia de ese tipo de datos. Una instancia es un caso individual
de un tipo de datos.

1
Datos primitivos booleanos (Booleans): Los booleanos son
un tipo de datos primitivo. Pueden ser true o false.
let lateToWork = true;

Función Math.random(): La función Math.random() devuelve un

número aleatorio de coma flotante en el rango de 0 (inclusive) hasta 1, pero sin
incluirlo.
console.log(Math.random());
// Prints: 0 - 0.9

Función Math.floor(): La función Math.floor() devuelve el entero más

grande menor o igual que el número dado.
console.log(Math.floor(5.95));
// Prints: 5

Comentarios de una sola línea (Single Line

Comments): En JavaScript, los comentarios de una sola línea se crean con
dos barras diagonales consecutivas //.
// This line will denote a comment

Dato primitivo Nulo (Null): Null es un tipo de datos primitivo.

Representa la ausencia intencional de valor. En código, se representa como null.
let x = null;

Datos primitivos Cadenas (Strings): Las cadenas son un tipo de

datos primitivo. Son cualquier agrupación de caracteres (letras, espacios, números o
símbolos) entre comillas simples 'o dobles ".
let single = 'Wheres my bandit hat?';
let double = "Wheres my bandit hat?";

Operadores aritméticos (Arithmetic Operators)

JavaScript admite operadores aritméticos para:
+ suma // Addition 5+5
- sustracción // Subtraction 10 - 5
* multiplicación // Multiplication 5 * 10
/ división // Division 10 / 5
% módulo // Modulo 10 % 5

2
Comentarios de varias líneas (Multi-line Comments):
En JavaScript, los comentarios de varias líneas se crean rodeando las líneas /*al
principio y */al final. Los comentarios son buenas formas por una variedad de razones,
como explicar un bloque de código o indicar algunas sugerencias, etc.
/*
The below configuration must be
changed before deployment.
*/
let baseUrl = 'localhost/taxwebapp/country';

Operador de resto/módulo (Remainder / Modulo

Operator): El operador de resto, a veces llamado módulo, devuelve el número
que queda después de que el número de la derecha se divide por el número de la
izquierda tantas veces como sea posible
// calculates # of weeks in a year, rounds down to nearest integer
const weeksInYear = Math.floor(365/7);
// calculates the number of days left over after 365 is divded by 7
const daysLeftOver = 365 % 7 ;
console.log("A year has " + weeksInYear + " weeks and " + daysLeftOver + "
days");

Operadores de Asignación (Assignment Operators):

Un operador de asignación asigna un valor a su operando izquierdo en función del
valor de su operando derecho. Éstos son algunos de ellos:
let number = 100;
// Both statements will add 10 +=asignación de suma
number = number + 10;
-=asignación de resta
number += 10;
console.log(number); *=tarea de multiplicación
// Prints: 120
/=asignación de división

Interpolación de cadenas (String Interpolation): La

interpolación de cadenas es el proceso de evaluar cadenas literales que contienen uno
o más marcadores de posición (expresiones, variables, etc.).
Se puede realizar usando literales de plantilla: text ${expression} text.
let age = 7;
// String concatenation
'Tommy is ' + age + ' years old.';
// String interpolation
`Tommy is ${age} years old.`;

Variables: Las variables se utilizan siempre que existe la necesidad de

almacenar un dato. Una variable contiene datos que se pueden utilizar en el programa
en cualquier otro lugar. El uso de variables también garantiza la reutilización del
código, ya que se puede usar para reemplazar el mismo valor en varios lugares.
const currency = '$';
let userIncome = 85000;

3
console.log(currency + userIncome + ' is more than the average income.');
// Prints: $85000 is more than the average income.

Valor primitivo Indefinido (Undefined): undefinedes un valor

primitivo de JavaScript que representa la falta de un valor definido. Las variables que
se declaran pero no se inicializan a un valor tendrán el valor undefined.
var a;
console.log(a);
// Prints: undefined

Variables Java Script (Javascript Variables): Una variable

es un contenedor de datos que se almacena en la memoria de la computadora. Está
referenciado por un nombre descriptivo que un programador puede llamar para asignar
un valor específico y recuperarlo.
// examples of variables
let name = "Tammy";
const found = false;
var age = 3;
console.log(name, found, age);
// Tammy, false, 3

Declaración de variables (Declaring Variables): Para

declarar una variable en JavaScript, se puede usar cualquiera de estas tres palabras
clave junto con un nombre de variable:
 Var se utiliza en versiones anteriores a ES6 de JavaScript.
 Let es la forma preferida de declarar una variable cuando se puede reasignar.
 Const es la forma preferida de declarar una variable con un valor constante.
var age;
let weight;
const numberOfFingers = 20;

Literales de plantilla (Template Literals)´: Los literales de

plantilla son cadenas que permiten expresiones incrustadas, ${expression}. Mientras
que las cadenas regulares usan comillas simples 'o dobles ", los literales de plantilla
usan acentos graves ` en su lugar.
let name = "Codecademy";
console.log(`Hello, ${name}`);
// Prints: Hello, Codecademy
console.log(`Billy is ${6+8} years old.`);
// Prints: Billy is 14 years old.

Palabra clave LET (Let keyword): let crea una variable local en
JavaScript y se puede reasignar. La inicialización durante la declaración de una
variable let es opcional. Una variable let contendrá undefined si no se le asigna nada.
let count;
console.log(count); // Prints: undefined
count = 10;
console.log(count); // Prints: 10

4
Palabra clave const (const Keyword): Una variable constante
se puede declarar usando la palabra clave const. Debe tener una tarea. Cualquier
intento de reasignar una variable const dará como resultado un error de tiempo de
ejecución de JavaScript.
const numberOfColumns = 4;
numberOfColumns = 8;
// TypeError: Assignment to constant variable.

Concatenación de cadenas (String Concatenation):

En JavaScript, varias cadenas se pueden concatenar juntas usando el +operador. En
el ejemplo, se han concatenado varias cadenas y variables que contienen valores de
cadena. Después de la ejecución del bloque de código, la variable displayText
contendrá la cadena concatenada.
let service = 'credit card';
let month = 'May 30th';
let displayText = 'Your ' + service + ' bill is due on ' + month + '.';
console.log(displayText);
// Prints: Your credit card bill is due on May 30th.

5
 Introducción a Java Script
(Clase 1)
Consola: La consola es un panel que muestra mensajes importantes, como
errores, para los desarrolladores. Gran parte del trabajo que la computadora hace con
nuestro código es invisible para nosotros por defecto. Si queremos ver las cosas que
aparecen en nuestra pantalla, podemos imprimir o iniciar sesión en nuestra consola
directamente.
En JavaScript, la palabra clave consola se refiere a un objeto, una colección de datos
y acciones, que podemos usar en nuestro código. Las palabras clave son palabras que
están integradas en el lenguaje JavaScript, por lo que la computadora las reconoce y
las trata de manera especial.
Una acción o método integrado en el objeto de la consola es el método .log(). Cuando
escribimos console.log(), lo que ponemos entre paréntesis se imprimirá o registrará en
la consola.
Nos será muy útil imprimir valores en la consola, para que podamos ver el trabajo que
estamos haciendo. console.log(5);

Este ejemplo registra 5 en la consola. El punto y coma denota el final de la línea o

declaración. Aunque en JavaScript su código generalmente se ejecutará según lo
previsto sin un punto y coma, le recomendamos que aprenda el hábito de terminar
cada declaración con un punto y coma para que nunca omita uno en los pocos casos
en que sea necesario.

Comentarios: La programación suele ser muy colaborativa. Además, nuestro

propio código puede volverse difícil de entender rápidamente cuando volvemos a él, ¡a
veces solo una hora después! Por estas razones, suele ser útil dejar notas en nuestro
código para otros desarrolladores o para nosotros mismos.
Mientras escribimos JavaScript, podemos escribir comentarios en nuestro código que
la computadora ignorará mientras se ejecuta nuestro programa. Estos comentarios
existen solo para lectores humanos.
Los comentarios pueden explicar qué está haciendo el código, dejar instrucciones para
los desarrolladores que usan el código o agregar otras anotaciones útiles.
Hay dos tipos de comentarios de código en JavaScript:

1. Un comentario de una sola línea comentará una sola línea y se denota con dos
barras diagonales // que lo preceden.
// Prints 5 to the console
console.log(5);
También puede usar un comentario de una sola línea para comentar después de
una línea de código:
console.log(5); // Prints 5
2. Un comentario de varias líneas comentará varias líneas y se denota con /* para
comenzar el comentario y */ para finalizar el comentario.
/*
This is all commented
console.log(10);
None of this is going to run!
console.log(99);
*/

6
También puede usar esta sintaxis para comentar algo en medio de una línea de
código:
console.log(/*IGNORED!*/ 5); // Still just prints 5

Ejemplo:
//Opening line

console.log('It was love at first sight.');

/*
console.log('The first time Yossarian saw the chaplain he fell madly in love with
him.');
console.log('Yossarian was in the hospital with a pain in his liver that fell just
short of being jaundice.');
console.log('The doctors were puzzled by the fact that it wasn\'t quite jaundice.');
console.log('If it became jaundice they could treat it.');
console.log('If it didn\'t become jaundice and went away they could discharge
him.');
console.log('But this just being short of jaundice all the time confused them.');
*/
Se imprimirá únicamente:
console.log('It was love at first sight.');
Que es la única línea que no está encerrada entre /* y */

Tipos de datos (Data Types): Los tipos de datos son las

clasificaciones que damos a los diferentes tipos de datos que usamos en la
programación. En JavaScript, hay siete tipos de datos fundamentales:
 Número: cualquier número, incluidos los números con decimales: 4, 8, 1516,
23,42.
 Cadena: Cualquier agrupación de caracteres en su teclado (letras, números,
espacios, símbolos, etc.) entre comillas simples: ' ... ' o comillas dobles " ... ",
aunque preferimos las comillas simples. A algunas personas les gusta pensar en
cadena como una palabra elegante para texto.
 Booleano: este tipo de datos solo tiene dos valores posibles: verdadero o falso (sin
comillas). Es útil pensar en los booleanos como interruptores de encendido y
apagado o como respuestas a una pregunta de "sí" o "no".
 Nulo: este tipo de datos representa la ausencia intencional de un valor y se
representa mediante la palabra clave nulo (sin comillas).
 Indefinido: este tipo de datos se indica con la palabra clave indefinido (sin
comillas). También representa la ausencia de un valor aunque tiene un uso
diferente a nulo. indefinido significa que un valor dado no existe.
 Símbolo: una característica más nueva del lenguaje, los símbolos son
identificadores únicos, útiles en la codificación más compleja. No hay necesidad de
preocuparse por esto por ahora.
 Objeto: Colecciones de datos relacionados.
Los primeros 6 de esos tipos se consideran tipos de datos primitivos. Son los tipos de
datos más básicos del lenguaje. Los objetos son más complejos y aprenderá mucho
más sobre ellos a medida que avance en JavaScript. Al principio, siete tipos pueden
no parecer tantos, pero pronto observará que el mundo se abre con posibilidades una
vez que comience a aprovechar cada uno. A medida que aprenda más sobre los
objetos, podrá crear colecciones complejas de datos.

7
console.log('Location of Codecademy headquarters: 575 Broadway, New York
City');
console.log(40);

En el ejemplo anterior, primero imprimimos una cadena. Nuestra cadena no es solo

una palabra; incluye letras mayúsculas y minúsculas, espacios y puntuación.
A continuación, imprimimos el número 40, observe que no usamos comillas.
Ejemplo: Se imprimirá:
console.log('JavaScript')
JavaScript
console.log(2011)
2011
console.log('Woohoo! I love to code! #codecademy')
Woohoo! I love to code! #codecademy
console.log(20.49)
20.49

Operadores aritméticos: La aritmética básica a menudo es útil cuando

se programa. Un operador es un carácter que realiza una tarea en nuestro código.
JavaScript tiene varios operadores aritméticos integrados que nos permiten realizar
cálculos matemáticos con números. Estos incluyen los siguientes operadores y sus
símbolos correspondientes:
Agregar: +
Restar: - Los primeros cuatro funcionan como
Multiplicar: * podrías adivinar:
Dividir: /
Resto: %

console.log(3 + 4); // Prints 7

console.log(5 - 1); // Prints 4
console.log(4 * 2); // Prints 8
console.log(9 / 3); // Prints 3

Tenga en cuenta que cuando usamos console.log() la computadora evaluará la

expresión dentro de los paréntesis e imprimirá ese resultado en la consola. Si
quisiéramos imprimir los caracteres 3 + 4, los envolveríamos entre comillas y los
imprimiríamos como una cadena.
console.log(11 % 3); // Prints 2
console.log(12 % 3); // Prints 0

El operador de resto, a veces llamado módulo, devuelve el número que queda

después de que el número de la derecha se divide por el número de la izquierda tantas
veces como sea posible: 11 % 3 es igual a 2 porque 3 cabe en 11 tres veces, dejando
2 como el resto.
Ejemplo:
console.log(49 + 3.5); Se imprimirá:
console.log(2022 - 1969); 52.5
console.log(65 / 240); 53
console.log(0.2708 * 100); 0.2708333333333333
27.08

String Concatenation: ¡Los operadores no son solo para números!

Cuando se usa un operador + en dos cadenas, agrega la cadena derecha a la cadena
izquierda:
console.log('hi' + 'ya'); // Prints 'hiya'
console.log('wo' + 'ah'); // Prints 'woah'

8
console.log('I love to ' + 'code.')
// Prints 'I love to code.'

Este proceso de agregar una cadena a otra se llama concatenación. Observe en el

tercer ejemplo que teníamos que asegurarnos de incluir un espacio al final de la
primera cadena. La computadora unirá las cadenas exactamente, así que
necesitábamos asegurarnos de incluir el espacio que queríamos entre las dos
cadenas.

console.log('front ' + 'space');

// Prints 'front space'
console.log('back' + ' space');
// Prints 'back space'
console.log('no' + 'space');
// Prints 'nospace'
console.log('middle' + ' ' + 'space');
// Prints 'middle space'

Al igual que con las matemáticas normales, podemos combinar o encadenar nuestras
operaciones para obtener un resultado final:
console.log('One' + ', ' + 'two' + ', ' + 'three!');
// Prints 'One, two, three!'

Ejemplo: Se imprimirá:
console.log('Hello' + 'World')
console.log('Hello' + ' ' + 'World') HelloWorld
Hello World

Propiedades: Cuando introduce un nuevo dato en un programa JavaScript, el

navegador lo guarda como una instancia del tipo de datos. Todos los tipos de datos
tienen acceso a propiedades específicas que se transmiten a cada instancia. Por
ejemplo, cada instancia de cadena tiene una propiedad llamada longitud que almacena
la cantidad de caracteres en esa cadena. Puede recuperar la información de la
propiedad agregando la cadena con un punto y el nombre de la propiedad:

console.log('Hello'.length); // Prints 5
El punto . es otro operador! Lo llamamos el operador punto.
En el ejemplo anterior, el valor guardado en la propiedad de longitud se recupera de la
instancia de la cadena, 'Hello'. El programa imprime 5 en la consola, porque Hello
tiene cinco caracteres.

Ejemplo:
console.log('Teaching the world how to code'.length)

Métodos (Methods): Recuerda que los métodos son acciones que

podemos realizar. Los tipos de datos tienen acceso a métodos específicos que nos
permiten manejar instancias de ese tipo de datos. JavaScript proporciona una serie de
métodos de cadena.
Llamamos o usamos estos métodos agregando una instancia con:
 un punto (el operador punto) objectName.methodName();
 el nombre del método
 paréntesis de apertura y cierre 'example string'.methodName();
Cuando usamos console.log() estamos llamando al método .log() en el objeto console

9
console.log('hello'.toUpperCase(…)); // Prints 'HELLO'
console.log('Hey'.startsWith('H')) ; // Prints true

Veamos cada una de las líneas anteriores:

 En la primera línea, .toUpperCase() se llama al método en la instancia de cadena
'hello'. El resultado se registra en la consola. Este método devuelve una cadena en
mayúsculas: 'HELLO'.
 En la segunda línea, .startsWith() se llama al método en la instancia de cadena
'Hey'.

Este método también acepta el carácter 'H' como entrada, o argumento, entre
paréntesis. Dado que la cadena 'Hey' comienza con la letra 'H', el método devuelve el
valor booleano true.
Puede encontrar una lista de métodos de cadena incorporados en la documentación
de JavaScript https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/String. Los desarrolladores
utilizan la documentación como herramienta de referencia. Describe las palabras
clave, los métodos y la sintaxis de JavaScript.

Ejemplos:

// Use .toUpperCase() to log 'Codecademy' in all uppercase letters

console.log('Codecademy'.toUpperCase());

// Use a string method to log the following string without whitespace at the
beginning and end of it.
console.log(' Remove whitespace '.trim());

Se imprimirá CODECADEMY .ToUpperCase para mayúsculas

Remove whitespace  .trim para dejar espacio

Objetos incorporados (Built-in Objects): Además de console,

hay otros objetos integrados en JavaScript. Por ejemplo, si desea realizar operaciones
matemáticas más complejas que la aritmética, JavaScript tiene el objeto Math
incorporado.
Llamemos al método .random() desde el objeto Math incorporado:
console.log(Math.random()); // Prints a random number between 0 and 1
En el ejemplo anterior, llamamos al método .random() agregando el nombre del objeto
con el operador de punto, el nombre del método y paréntesis de apertura y cierre. Este
método devuelve un número aleatorio entre 0 (inclusive) y 1 (exclusivo).
Para generar un número aleatorio entre 0 y 50, podríamos multiplicar este resultado
por 50, así:
Math.random() * 50;
El ejemplo anterior probablemente se evaluará como un decimal. Para asegurarnos de
que la respuesta sea un número entero, podemos aprovechar otro método Math útil
llamado Math.floor().
Math.floor() toma un número decimal y lo redondea hacia abajo al número entero más
cercano. Puede usar Math.floor() para redondear hacia abajo un número aleatorio
como este:
Math.floor(Math.random() * 50);

10
En este caso:

Math.random() genera un número aleatorio entre 0 y 1. Luego multiplicamos ese

número por 50, así que ahora tenemos un número entre 0 y 50.
Luego, Math.floor() redondea el número hacia abajo al número entero más cercano.
Si quisiera ver el número impreso en la terminal, aún necesitaría usar una declaración
console.log():
console.log(Math.floor(Math.random() * 50)); // Prints a random whole number
between 0 and 50

Para ver todas las propiedades y métodos del Mathobjeto, consulte la documentación
aquí https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Math

Ejemplos:
1) Dentro de console.log(), crea un número aleatorio con Math.random() y luego
multiplícalo por 100.
console.log(Math.floor(Math.random() * 100))

Se imprimiró: 62
Donde Math.floor : Redondea hacia abajo al número entero más cercano
Math.random : Genera un número aleatorio comprendido entre 0 y 100

2) Ahora, use Math.floor() para hacer que la salida sea un número entero.
Dentro del archivo console.log() que escribió en el último paso, coloque el código
existente Math.random() * 100 entre paréntesis de Math.floor().
console.log(Math.floor(Math.random(Math.random() * 100)))

Se imprimió: 0
Donde Math.floor redondea hacia abajo al número entero más
cercano que Math.random generó previamente con un número
aleatorio comprendido entre 0 y 100

3) Encuentre un método en el objeto matemático de JavaScript que devuelva el

entero más pequeño mayor o igual que un número decimal. Usa este método con
el número 43.8. Registre la respuesta en la consola.
console.log(Math.ceil(Math.random () * 43.8))
Se imprimió: 4
Donde Math.ceil devuelve un número entero más pequeño > = que un
decimal
Math.random: Genera un número aleatorio comprendido entre 0 y 100

4) Utilice la documentación de JavaScript para encontrar un método en el objeto

numérico integrado que compruebe si un número es un número entero. Pon el
número 2017 entre paréntesis del método y usa console.log() para imprimir el
resultado.
console.log(Number.isInteger(2017));
Se imprimió: True
Donde Number.isInteger comprueba que se trata de un número
entero

11
Revisar
 Los datos se imprimen o registran en la consola, un panel que muestra mensajes,
con console.log().
 Podemos escribir comentarios de una sola línea con // y comentarios de varias
líneas entre /* y */
 Hay 7 tipos de datos fundamentales en JavaScript: cadenas, números, booleanos,
nulos, indefinidos, símbolos y objetos.
 Los números son cualquier número sin comillas: 23.8879
 Las cadenas (Strings) son caracteres entre comillas simples o dobles: 'Cadena de
muestra'
 Los operadores aritméticos incorporados incluyen +, -, *, / y %.
 Los objetos, incluidas las instancias de tipos de datos, pueden tener propiedades,
información almacenada. Las propiedades se denotan con un punto . después del
nombre del objeto, por ejemplo: 'Hola'.longitud.
 Los objetos, incluidas las instancias de tipos de datos, pueden tener métodos que
realizan acciones. Los métodos se llaman agregando el objeto o la instancia con
un punto, el nombre del método y paréntesis. Por ejemplo: 'hola'.toUpperCase().
 Podemos acceder a propiedades y métodos usando el operador punto .
 Los objetos incorporados, incluido Math, son colecciones de métodos y
propiedades que proporciona JavaScript.

Propiedades estáticas matemáticas:

 Math.E la constante de Euler y la base de los logaritmos naturales;
aproximadamente 2.718_
 Math.LN2 Logaritmo natural de 2; aproximadamente 0.693_
 Math.LN10 Logaritmo natural de 10; aproximadamente 2.303_
 Math.LOG2E Logaritmo en base 2 de E; aproximadamente 1.443_
 Math.LOG10E Logaritmo en base 10 de E; aproximadamente 0.434_
 Math.PI Relación de la circunferencia de un círculo a su diámetro;
aproximadamente 3.14159_
 Math.SQRT1_2 raíz cuadrada de ½; aproximadamente 0.707_
 Math.SQRT2 raíz cuadrada de 2; aproximadamente 1.414_

Métodos estáticos matemáticos:

 Math.abs() Devuelve el valor absoluto de x.
 Math.acos() Devuelve el arcocoseno de x.
 Math.acosh() Devuelve el arcocoseno hiperbólico de x.
 Math.asin() Devuelve el arcoseno de x.
 Math.asinh() Devuelve el arcoseno hiperbólico de un número.
 Math.atan() Devuelve el arcotangente de x.
 Math.atanh() Devuelve la arcotangente hiperbólica de x.
 Math.atan2() Devuelve el arcotangente del cociente de sus argumentos.
 Math.cbrt() Devuelve la raíz cúbica de x.
 Math.ceil() Devuelve el entero más pequeño mayor o igual que x.
 Math.clz32() Devuelve el número de bits cero iniciales del entero de 32 bits x.
 Math.cos() Devuelve el coseno de x.
 Math.cosh() Devuelve el coseno hiperbólico de x.
 Math.exp() Devuelve e x , donde x es el argumento y e es la constante de Euler (
2.718…, la base del logaritmo natural).
 Math.expm1() Devuelve restando 1de exp(x).
 Math.floor() Devuelve el entero más grande menor o igual que x.

12
 Math.fround() Devuelve la representación flotante de precisión simplex más
cercana de .
 Math.hypot() Devuelve la raíz cuadrada de la suma de los cuadrados de sus
argumentos.
 Math.imul() Devuelve el resultado de la multiplicación de enteros de 32 bits de xy y.
 Math.log() Devuelve el logaritmo natural (㏒ e ; también, ㏑) de x.
 Math.log1p() Devuelve el logaritmo natural (㏒ e ; también ㏑) de 1 + xpara el
número x.
 Math.log10() Devuelve el logaritmo en base 10 de x.
 Math.log2() Devuelve el logaritmo en base 2 de x.
 Math.max() Devuelve el mayor de cero o más números.
 Math.min() Devuelve el menor de cero o más números.
 Math.pow() Devuelve la base xa la potencia del exponente y(es decir, xy).
 Math.random() Devuelve un número pseudoaleatorio entre 0y 1.
 Math.round() Devuelve el valor del número xredondeado al entero más próximo.
 Math.sign() Devuelve el signo de x, indicando si xes positivo, negativo o cero.
 Math.sin() Devuelve el seno de x.
 Math.sinh() Devuelve el seno hiperbólico de x.
 Math.sqrt() Devuelve la raíz cuadrada positiva de x.
 Math.tan() Devuelve la tangente de x.
 Math.tanh() Devuelve la tangente hiperbólica de x.
 Math.trunc() Devuelve la parte entera de x, eliminando cualquier dígito fraccionario.

Propiedades estáticas
 Number.EPSILON El intervalo más pequeño entre dos números representables.
 Number.MAX_SAFE_INTEGER El entero seguro máximo en JavaScript (2 53 - 1).
 Number.MAX_VALUE El mayor número positivo representable.
 Number.MIN_SAFE_INTEGER El entero mínimo seguro en JavaScript (-(2 53 - 1)).
 Number.MIN_VALUE El número positivo más pequeño representable, es decir, el número
positivo más cercano a cero (sin ser realmente cero).
 Number.NaN Valor especial " N ot a N úmero".
 Number.NEGATIVE_INFINITY Valor especial que representa el infinito negativo. Devuelto
por desbordamiento.
 Number.POSITIVE_INFINITY Valor especial que representa el infinito. Devuelto por
desbordamiento.
 Number.prototype Permite agregar propiedades al Numberobjeto.

Métodos estáticos
 Number.isNaN() Determina si el valor pasado es NaN.
 Number.isFinite() Determina si el valor pasado es un número finito.
 Number.isInteger() Determina si el valor pasado es un número entero.
 Number.isSafeInteger() Determina si el valor pasado es un número entero seguro (número
entre -(2 elevado a 53 - 1) y 2 elevado a 53 - 1).
 Number.parseFloat() Esto es lo mismo que la función global parseFloat().
 Number.parseInt() Esto es lo mismo que la función global parseInt().
 Métodos de instancia Number.prototype.toExponential() Devuelve una cadena que
representa el número en notación exponencial.
 Number.prototype.toFixed() Devuelve una cadena que representa el número en notación
de punto fijo.
 Number.prototype.toLocaleString() Devuelve una cadena con una representación sensible
al idioma de este número. Anula el Object.prototype.toLocaleString()método.
 Number.prototype.toPrecision() Devuelve una cadena que representa el número con una
precisión especificada en notación de punto fijo o exponencial.

13
 Number.prototype.toString() Devuelve una cadena que representa el objeto especificado en
la raíz especificada ("base"). Anula el Object.prototype.toString()método.
 Number.prototype.valueOf() Devuelve el valor primitivo del objeto especificado. Anula el
Object.prototype.valueOf()método.

14
 Variables (Clase 2)
En programación, una variable es un contenedor de un valor. Puede pensar en las
variables como pequeños contenedores de información que viven en la memoria de
una computadora. La información almacenada en variables, como un nombre de
usuario, un número de cuenta o incluso un saludo personalizado, se puede encontrar
en la memoria.
Las variables también proporcionan una forma de etiquetar los datos con un nombre
descriptivo, de modo que nuestros programas puedan ser entendidos más claramente
por el lector y por nosotros mismos.
En resumen, las variables etiquetan y almacenan datos en la memoria. Solo hay
algunas cosas que puede hacer con las variables:
 Cree una variable con un nombre descriptivo.
 Almacenar o actualizar información almacenada en una variable.
 Referenciar u “obtener” información almacenada en una variable.
 Es importante distinguir que las variables no son valores; contienen valores y los
representan con un nombre. Observa el diagrama con los recuadros de colores.
Cada cuadro representa variables; los valores están representados por el
contenido y el nombre está representado por la etiqueta.

Crear una variable: var Se introdujeron muchos cambios en la versión

ES6 de JavaScript en 2015. Uno de los mayores cambios fueron dos nuevas palabras
clave, let y const, para crear o declarar variables. Antes de ES6, los programadores
solo podían usar la palabra clave var para declarar variables.

var myName = 'Arya';

console.log(myName);
// Output: Arya

Consideremos el ejemplo anterior:

 var, abreviatura de variable, es una palabra clave de JavaScript que crea o declara
una nueva variable.
 myName es el nombre de la variable. Usar mayúsculas de esta manera es una
convención estándar en JavaScript llamada camel casing. En mayúsculas y
minúsculas, agrupa las palabras en una, la primera palabra está en minúsculas,
luego cada palabra que sigue tendrá su primera letra en mayúsculas. (por ejemplo,
camelCaseEverything).
 = es el operador de asignación. Asigna el valor ('Arya') a la variable (miNombre).
 'Arya' es el valor asignado (=) a la variable myName. También puede decir que la
variable myName se inicializa con un valor de 'Arya'.

15
 Después de declarar la variable, el valor de cadena 'Arya' se imprime en la consola
haciendo referencia al nombre de la variable: console.log(myName).

Hay algunas reglas generales para nombrar variables:

 Los nombres de variables no pueden comenzar con números.
 Los nombres de las variables distinguen entre mayúsculas y minúsculas, por lo
que myName y myname serían variables diferentes. Es una mala práctica crear
dos variables que tienen el mismo nombre usando casos diferentes.
 Los nombres de las variables no pueden ser iguales a las palabras clave. Para
obtener una lista completa de palabras clave, consulte la documentación de
palabras clave de MDN https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords

En los próximos ejercicios, aprenderemos por qué let y const de ES6 son las palabras
clave variables preferidas por muchos programadores. Debido a que todavía hay una
tonelada de código escrito antes de ES6, es útil familiarizarse con la palabra clave var
anterior a ES6.
Si desea obtener más información sobre var y las peculiaridades asociadas con él,
consulte la documentación de var de MDN https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/var

Algunas palabras reservadas: Break case catch class const

continue debugger default delete do else export extends false finally for
function if import implements interface package private protected public in
instanceof new null return static super switch this throw true try typeof
var void while with yield

Palabras reservadas cuando se encuentran en código de

modo estricto:
 let (también reservado en declaraciones const, let y class)
 yield (también reservado en los cuerpos de funciones del generador)

Palabras reservadas cuando se encuentran en el código

del módulo o en cuerpos de funciones asíncronas:
 await

Ejemplos:

1) Declare una variable llamada comida favorita usando la palabra clave var y
asígnele la cadena 'pizza'.
var comidaFavorita = 'pizza';
2) Declare una variable llamada numeroDeRebanadas utilizando la palabra clave var
y asígnele el número 8
var numeroDeRebanadas = 8;
3) Debajo de la variable numeroDeRebanadas, use console.log() para imprimir el
valor guardado en comidaFavorita
En la siguiente línea, use console.log() para imprimir el valor guardado en
numeroDeRebanadas Se imprimirá:
console.log(comidaFavorita) Pizza
console.log(numeroDeRebanadas) 8

16
Crear una variable: let Como se mencionó en el ejercicio anterior, la
palabra clave let se introdujo en ES6. La palabra clave let indica que a la variable se le
puede reasignar un valor diferente. Echa un vistazo al ejemplo:

let comida = 'Enchiladas';

console.log(comida); // Output: Enchiladas
comida = 'Burrito';
console.log(comida); // Output: Burrito

Otro concepto que debemos tener en cuenta al usar let (e incluso var) es que
podemos declarar una variable sin asignarle un valor. En tal caso, la variable se
inicializará automáticamente con un valor de indefinido:

let precio;
console.log(precio); // Output: undefined
precio = 350;
console.log(precio); // Output: 350

 Si no asignamos un valor a una variable declarada usando la palabra clave let,

automáticamente tiene un valor de indefinido.
 Podemos reasignar el valor de la variable.

Ejemplos:
1) Cree una variable let llamada cambiame y establézcala igual al valor booleano
verdadero.
let cambiame = true;

2) En la línea después de que se declare changeMe, establezca el valor de

changeMe para que sea el valor booleano falso.
Para verificar si changeMe fue reasignado, registre el valor guardado en changeMe
en la consola.
cambiame = false;
console.log(cambiame); Se imprimirá:
false

Crear una variable: const La palabra clave const también se introdujo

en ES6 y es la abreviatura de la palabra constante. Al igual que con var y le permite
almacenar cualquier valor en una variable const. La forma en que declara una variable
const y le asigna un valor sigue la misma estructura que let y var. Echa un vistazo al
siguiente ejemplo:
const miNombre = 'Gilberto';
console.log(miNombre); // Output: Gilberto
Sin embargo, una variable const no se puede reasignar porque es constante. Si intenta
reasignar una variable const, obtendrá un TypeError.
A las variables constantes se les debe asignar un valor cuando se declaran. Si intenta
declarar una variable const sin un valor, obtendrá un SyntaxError.
Si está tratando de decidir entre qué palabra clave usar, let o const, piense si
necesitará reasignar la variable más adelante.

Si necesita reasignar la variable, use let

Si NO necesita reasignar la variable, use const

Ejemplos:

17
1) Cree una variable constante llamada entree y configúrela para que sea igual a la
cadena 'Enchiladas'.
const entrante = 'Enchiladas';
2) Solo para comprobar que ha guardado el valor de 'Enchiladas' para la entrada,
registre el valor de la entrada en la consola.
Se imprimirá:
console.log(entrante);
Enchiladas

3) Genial, veamos qué sucede si intentas reasignar una variable constante.

Pegue el siguiente código en la parte inferior de su programa: entree = 'Tacos'

Se imprimirá:
TypeError: Assignment to constant variable.

4) Después de borrar este punto de control, si desea ver otra peculiaridad de const en
acción escribe const testing;
Se imprimirá:
SyntaxError: Missing initializer in const declaration

Operadores de asignación matemática: Consideremos cómo

podemos usar variables y operadores matemáticos para calcular nuevos valores y
asignarlos a una variable. Mira el ejemplo a continuación:

let w = 4;
w = w + 1;
console.log(w); // Output: 5

En el ejemplo anterior, creamos la variable let w con el número 4 asignado. La

siguiente línea, w = w + 1, aumenta el valor de w de 4 a 5.
Otra forma en que podríamos haber reasignado w después de realizar alguna
operación matemática en él es usar operadores de asignación matemática integrados.
Podríamos reescribir el código anterior para que sea:

let w = 4;
w += 1;
console.log(w); // Output: 5

En el segundo ejemplo, usamos el operador de asignación += para reasignar w.

Estamos realizando la operación matemática del primer operador + usando el número
a la derecha, luego reasignando w al valor calculado.
También tenemos acceso a otros operadores de asignación matemática: -=, *= y /=
que funcionan de manera similar.

let x = 20;
x -= 5; // Can be written as x = x - 5
console.log(x); // Output: 15
let y = 50;
y *= 2; // Can be written as y = y * 2
console.log(y); // Output: 100
let z = 8;
z /= 2; // Can be written as z = z / 2
console.log(z); // Output: 4

18
Ejemplos:
1. Utilice el operador de asignación matemática += para aumentar el valor
almacenado en levelUp en 5.
2. Utilice el operador de asignación matemática -= para disminuir el valor almacenado
en powerLevel en 100.
3. Utilice el operador de asignación matemática *= para multiplicar el valor
almacenado en multipliqueMe por 11.
4. Utilice el operador de asignación matemática /= para dividir el valor almacenado en
quarterMe por 4.
Se imprimirá:
let levelUp = 10; The value of levelUp: 15
levelUp += 5;
console.log('The value of levelUp:', levelUp);

let powerLevel = 9001; Se imprimirá:

powerLevel -= 100; The value of powerLevel:
console.log('The value of powerLevel:', powerLevel); 8901

let multiplyMe = 32;

multiplyMe *= 11 Se imprimirá:
console.log('The value of multiplyMe:', multiplyMe); The value of multiplyMe: 352

let quarterMe = 1152;

quarterMe /= 4 Se imprimirá:
console.log('The value of quarterMe:', quarterMe); The value of quarterMe: 288

El operador de incremento y decremento: Otros operadores

matemáticos de asignación incluyen el operador de incremento (++) y el operador de
decremento (--).
El operador de incremento aumentará el valor de la variable en 1. El operador de
disminución disminuirá el valor de la variable en 1. Por ejemplo:

let a = 10;
a++;
console.log(a); // Output: 11
let b = 20;
b--;
console.log(b); // Output: 19

Al igual que los operadores matemáticos de asignación anteriores (+=, -=, *=, /=), el
valor de la variable se actualiza y se asigna como el nuevo valor de esa variable.

Ejemplos:
1. Usando el operador de incremento, incremente el valor de gainDollar.
let gainedDollar = 3;
Rspta: gainedDollar++;

19
2. Usando el operador de decremento, disminuya el valor de lostDollar.
let lostDollar = 50;
Rspta: lostDollar --;

Concatenación de string con variables: En ejercicios

anteriores, asignamos cadenas string a variables. Ahora, repasemos cómo conectar o
concatenar cadenas en variables.
El operador + se puede usar para combinar dos valores de cadena incluso si esos
valores se almacenan en variables:

let myPet = 'armadillo';

console.log('I own a pet ' + myPet + '.');
// Output: 'I own a pet armadillo.'

En el ejemplo anterior, asignamos el valor 'armadillo' a la variable myPet.

En la segunda línea, el operador + se usa para combinar tres cadenas: 'Tengo una
mascota', el valor guardado en myPet y '.'.
Registramos el resultado de esta concatenación en la consola como:
I own a pet armadillo (Tengo un armadillo de mascota).

Ejemplos:
1. Cree una variable llamada favoriteAnimal y establézcala igual a su favorite animal
Rspta: let favoriteAnimal = 'favorite animal';

2. Usa console.log() para imprimir 'My favorite animal: ANIMAL' en la consola. Use la
concatenación de cadenas para que ANIMAL se reemplace con el valor en su
variable de favoriteAnimal
Rspta. console.log('My favorite animal: ' + favoriteAnimal);

Se imprimirá:
My favorite animal: favorite animal

Interpolación de strings: En la versión ES6 de JavaScript, podemos

insertar o interpolar variables en cadenas strings usando literales de plantilla. Consulte
el siguiente ejemplo en el que se usa un literal de plantilla para registrar cadenas
juntas:

const miPet = 'armadillo';

console.log(`Tengo una mascota ${myPet}.`);
// Salida: Tengo un armadillo como mascota.

Darse cuenta de:

 Un literal de plantilla está envuelto por acentos graves `` (esta tecla generalmente
se encuentra en la parte superior de su teclado, a la izquierda de la tecla 1).
 Dentro del literal de la plantilla, verá un marcador de posición, ${myPet}. El valor
de myPet se inserta en el literal de la plantilla.
 Cuando interpolamos `Tengo una mascota ${myPet}.`, el resultado que imprimimos
es la cadena: 'Tengo una mascota armadillo'.
Uno de los mayores beneficios del uso de literales de plantilla es la legibilidad del
código. Usando literales de plantilla, puede saber más fácilmente cuál será la nueva
cadena. Tampoco tiene que preocuparse por escapar de las comillas dobles o simples.

20
Ejemplos:
1. Cree una variable llamada myName y asígnele su nombre.
Rspta: const myName = 'Sandra';
2. Cree una variable llamada myCity y asígnele el nombre de su ciudad favorita.
Rspta: const myCity = 'Vigo';
3. Use un solo literal de plantilla para interpolar sus variables en la siguiente oración.
Usa console.log() para imprimir tu oración en la consola en el siguiente formato: Mi
nombre es NOMBRE. Mi ciudad favorita es CIUDAD.
Rspta: console.log(`My name is ${myName} My favorite city is ${myCity}.`);

Operador Typeof: Mientras escribe código, puede ser útil realizar un

seguimiento de los tipos de datos de las variables en su programa. Si necesita verificar
el tipo de datos del valor de una variable, puede usar el operador typeof.
El operador typeof comprueba el valor a su derecha y devuelve, o devuelve, una
cadena del tipo de datos.

const unknown1 = 'foo';

console.log(typeof unknown1); // Output: string
const unknown2 = 10;
console.log(typeof unknown2); // Output: number
const unknown3 = true;
console.log(typeof unknown3); // Output: boolean

Analicemos el primer ejemplo. Dado que el valor unknown 1 es 'foo', una cadena,
typeof unknown1 devolverá 'string'.

Ejemplos:
1. Usa console.log() para imprimir el tipo de newVariable.
Rspta: let newVariable = 'Playing around with typeof.';
a. console.log(typeof newVariable);
2. Debajo de la instrucción console.log(), reasigne newVariable a 1.
Rspta: newVariable = 1;
3. Dado que asignó este nuevo valor a newVariable, en la línea debajo
de su reasignación, use console.log() para imprimir typeof
Se imprimirá:
newVariable nuevamente. number
Rspta: console.log(typeof newVariable);

Revisar variables
 Las variables contienen datos reutilizables en un programa y los asocian con un
nombre.
 Las variables se almacenan en la memoria.
 La palabra clave var se usa en versiones anteriores a ES6 de JS.
 let es la forma preferida de declarar una variable cuando se puede reasignar, y
const es la forma preferida de declarar una variable con un valor constante.
 Las variables que no se han inicializado almacenan el tipo de datos primitivo sin
definir.
 Los operadores de asignación matemática facilitan calcular un nuevo valor y
asignarlo a la misma variable.
 El operador + se usa para concatenar cadenas, incluidos los valores de cadena
contenidos en las variables.
 En ES6, los literales de plantilla usan acentos graves ` y ${} para interpolar valores
en una cadena.
 La palabra clave typeof devuelve el tipo de datos (como una cadena) de un valor.

21
 Declaraciones Condicionales
(Clase 3)
¿Qué son las declaraciones condicionales?: En la vida,
tomamos decisiones en función de las circunstancias. Piense en una decisión
cotidiana tan mundana como quedarse dormido: si estamos cansados, nos acostamos;
de lo contrario, nos despertamos y comenzamos nuestro día.
Estas decisiones if-else se pueden modelar en código mediante la creación de
sentencias condicionales. Una declaración condicional verifica una condición o
condiciones específicas y realiza una tarea basada en la condición o condiciones.
En esta lección, exploraremos cómo los programas toman decisiones evaluando
condiciones e introduciendo lógica en nuestro código.
Cubriremos los siguientes conceptos:
 declaraciones if, else if y else
 operadores de comparación (comparison operators)
 operadores lógicos (logical operators)
 valores verdaderos vs falsos (truthy vs falsy values)
 operadores ternarios (ternary operators)
 declaración de cambio (switch statement)
Entonces, si está listo para aprender estos conceptos, vaya a la siguiente lección; de
lo contrario, lea los conceptos, observe el diagrama y ¡prepárese para esta lección!

Declaración if: A menudo realizamos una tarea en función de una condición.

Por ejemplo, si hace buen tiempo hoy, saldremos afuera. Si suena el despertador, lo
apagaremos. Si estamos cansados, nos iremos a dormir.
En programación, también podemos realizar una tarea basada en una condición
usando una declaración if:

if (true) {
console.log('This message will print!');
}
// Prints: This message will print!

Observe que en el ejemplo anterior, tenemos una declaración if. La instrucción if se

compone de:
 La palabra clave if seguida de un conjunto de paréntesis () seguida de un bloque
de código o declaración de bloque, indicada por un conjunto de llaves {}.
 Dentro de los paréntesis (), se proporciona una condición que se evalúa como
verdadera o falsa.
 Si la condición se evalúa como verdadera, el código dentro de las llaves {} corre o
se ejecuta.
 Si la condición se evalúa como falsa, el bloque no se ejecutará.

Ejercicios:
1. Usando la palabra clave let, declare una variable llamada sale. Asígnale el valor
true.
Rspta: let sale = true;
2. Ahora cree una declaración if. Proporcione la declaración if como condición de
venta. Dentro del bloque de código de la instrucción if, coloque console.log() y la
cadena '¡Time to buy!'
Rspta: if (sale) {

22
 console.log('Time to buy!'); }

3. Observe que el código dentro de la instrucción if se ejecutó, ya que '¡Time to buy!'

se registró en la consola. Debajo de la declaración de la variable sale, pero antes
de la declaración if, reasigne sale a false. Ejecute su código y observe lo que
sucede, cambiaremos este comportamiento en el próximo ejercicio.
Rspta: sale = false;
if (sale) {
console.log('Time to buy!');
}

Declaraciones If...Else (Si……más): En el ejercicio anterior,

usamos una instrucción if que verificaba una condición para decidir si ejecutar o no un
bloque de código. En muchos casos, tendremos código que queremos ejecutar si
nuestra condición se evalúa como falsa.
Si quisiéramos agregar algún comportamiento predeterminado a la declaración if,
podemos agregar una declaración else para ejecutar un bloque de código cuando la
condición se evalúe como falsa. Eche un vistazo a la inclusión de una declaración
else:

if (false) {
console.log('El código de este bloque no se ejecutará.');
} else {
console.log(Pero el código estará en este bloque !');
}
// Prints: Pero el código estará en este bloque!

Una instrucción else debe combinarse con una instrucción if, y juntas se denominan
instrucción if...else.
En el ejemplo anterior, la sentencia else:
 Utiliza la palabra clave else después del bloque de código de una instrucción if.
 Tiene un bloque de código que está envuelto por un conjunto de llaves {}.
 El código dentro del bloque de código de la declaración else se ejecutará cuando
la condición de la declaración if se evalúe como falsa.
 Las declaraciones if...else nos permiten automatizar soluciones a preguntas de sí o
no, también conocidas como decisiones binarias.

Ejercicio:
1. Agregue una sentencia else a la sentencia if existente. Dentro del bloque de código
de la instrucción else, a la la cadena console.log() agregue 'Tiempo de ir a las
rebajas.'
Rspta: let rebaja = true;
rebaja = false;
if(rebaja) {
console.log('Tiempo de comprar!');
} else{
console.log('Tiempo de ir a las rebajas.');
}

Operadores de comparación: Al escribir declaraciones

condicionales, a veces necesitamos usar diferentes tipos de operadores para
comparar valores. Estos operadores se denominan operadores de comparación.
Aquí hay una lista de algunos operadores de comparación útiles y su sintaxis:

23
 Menos que (Less than): <
 Mayor que (Greater tan): >
 Menor o igual que (Less than or equal to): <=
 Mayor o igual que (Greater than or equal to): >=
 es igual a (Is equal to): ===
 No es igual a (Is not equal to): !==

Los operadores de comparación comparan el valor de la izquierda con el valor de la

derecha. Por ejemplo: 10 < 12 // Evaluates to true

Puede ser útil pensar en las declaraciones de comparación como preguntas. Cuando
la respuesta es "sí", la declaración se evalúa como verdadera, y cuando la respuesta
es "no", la declaración se evalúa como falsa. El código anterior estaría preguntando:
¿10 es menos que 12? ¡Sí! Entonces 10 < 12 se evalúa como verdadero.
También podemos usar operadores de comparación en diferentes tipos de datos como
cadenas: 'manzanas' === 'naranjas' // false

En el ejemplo anterior, usamos el operador de identidad (===) para verificar si la

cadena 'manzanas' es la misma que la cadena 'naranjas'. Dado que las dos cadenas
no son iguales, la declaración de comparación se evalúa como falsa.
Todas las declaraciones de comparación se evalúan como verdaderas o falsas y se
componen de:
 Dos valores que serán comparados.
 Un operador que separa los valores y los compara en consecuencia (>, <,
<=,>=,===,!==).

Ejercicios:
1. Usando let, cree una variable llamada nivelDeHambre y establézcala en 7.
Rspta: let nivelDeHambre = 7;
2. Escriba una sentencia if...else usando un operador de comparación. La condición
debe verificar si el nivel de nivelDeHambre es mayor que 7. Si es así, la
declaración condicional debe registrar 'Tiempo de comer!'. De lo contrario, debería
registrar 'Podemos comer más tarde!'
Después de presionar Ejecutar, juegue con la condición ajustando la comparación
del nivelDeHambre usando diferentes operadores como <=,>=,> y <.
Rsptas:
if (nivelDeHambre > 7) { Rspta. 1 usando un operador <7
console.log('Tiempo de comer!'); Se imprimirá:
} else { Podemos comer más tarde!
console.log('Podemos comer más tarde!');
};

if (nivelDeHambre > 7) {
Rspta. 2 usando un operador >7
console.log('Tiempo de comer!');
Se imprimirá:
} else {
Podemos comer más tarde!
console.log('Podemos comer más tarde!');
};

if (nivelDeHambre <= 7) { Rspta. 2 usando un operador <=7

console.log('Tiempo de comer!'); Se imprimirá:
} else { Tiempo de comer!
console.log('Podemos comer más tarde!');
};

if (nivelDeHambre <= 7) {

24
 Rspta. 2 usando un operador
console.log('Tiempo de comer!'); >=7
} else { Se imprimirá:
console.log('Podemos comer más tarde!'); Tiempo de comer!
};
Operadores lógicos: Trabajar con condicionales significa que usaremos
valores booleanos, true o false. En JavaScript, hay operadores que trabajan con
valores booleanos conocidos como operadores lógicos. Podemos usar operadores
lógicos para agregar una lógica más sofisticada a nuestros condicionales. Hay tres
operadores lógicos:
 el operador and (&&)
 el operador or (||)
 el operador not, también conocido como operador bang (!)

Cuando usamos el operador &&, estamos comprobando que dos cosas son true:

if (luzDeFreno === 'verde' && peatones === 0) {

console.log('Cruce!');
} else {
console.log('Deténgase');
}

Cuando se usa el operador &&, ambas condiciones deben evaluarse como verdaderas
para que la condición completa se evalúe como true y se ejecute. De lo contrario, si
cualquiera de las condiciones es false, la condición && se evaluará como false y se
ejecutará el bloque else.
Si solo nos importa que cualquiera de las dos condiciones sea true, podemos usar el
operador ||

if (dia === 'Sábado' || día === 'Domingo') {

console.log('Disfruta el fin de semana!');
} else {
console.log(Haz algo de trabajo.');
}

Al usar el operador ||, solo una de las condiciones debe evaluarse como true para que
la declaración general se evalúe como true. En el ejemplo de código anterior, si el día
=== 'Sábado' o el día === 'Domingo' se evalúa como true, la condición if se evaluará
como true y su bloque de código se ejecutará. Si la primera condición en una
declaración || se evalúa como true, la segunda condición ni siquiera se comprobará.
Solo si el día === ' Sábado' se evalúa como false, se evaluará el día === ' Domingo'. El
código en la declaración else anterior se ejecutará solo si ambas comparaciones se
evalúan como false.
El operador not ! invierte o niega el valor de un booleano:

let emocionada = true;

console.log(!emocionada); // Prints false
let cansada = false;
console.log(!cansada); // Prints true

Esencialmente, el operador not ! tomará un valor true y devolverá false, o tomará un

valor false y devolverá true.
Los operadores lógicos a menudo se usan en declaraciones condicionales para
agregar otra capa de lógica a nuestro código.

25
Ejemplo:
1. En main.js hay dos variables humor y nivelDeCansancio
Vamos a crear una instrucción if...else que verifique si el humor es 'somnoliento' y
el nivelDeCansancio es mayor que 8.
Si ambas condiciones se evalúan como verdaderas, entonces en la console.log()
se imprimirá la cadena 'hora de dormir'. De lo contrario, en la console.log()
aparecerá 'todavía no es hora de acostarse'.
Después de presionar "Ejecutar", juegue con el operador || y el operador ! ¿Qué
sucede si niega el valor de toda la declaración con ! y cambiar a || en vez de &&?
Rspta:
Rspta. 1 usando el operador &&
let estadoDeAnimo = 'somnoliento';
Se imprimirá:
let nivelDeCansancio = 6; todavía no es hora de acostarse
if (estadoDeAnimo === 'somnoliento' && nivelDeCansancio > 8) {
console.log('hora de dormir');
} else {
console.log('todavía no es hora de acostarse');
}

Rspta. 2 usando el operador ||

let estadoDeAnimo = 'somnoliento'; Se imprimirá:
let nivelDeCansancio = 6; hora de dormir

if (estadoDeAnimo === 'somnoliento' || nivelDeCansancio > 8) {

console.log('hora de dormir');
} else {
console.log('todavía no es hora de acostarse');
}

Verdadero o Falso: Consideremos cómo se evalúan los tipos de datos no

booleanos, como cadenas o números, cuando se marcan dentro de una condición.
A veces, querrá verificar si existe una variable y no necesariamente querrá que sea
igual a un valor específico; solo verificará si a la variable se le ha asignado un valor.
Aquí hay un ejemplo:

let miVariable = 'Existo!';

if (miVariable) {
console.log(miVariable)
} else {
console.log('La variable no existe.')
}

El bloque de código en la instrucción if se ejecutará porque miVariable tiene un valor

true; aunque el valor de miVariable no es explícitamente el valor true, cuando se usa
en un contexto booleano o condicional, se evalúa como true porque se le ha asignado
un valor que no es false.
Entonces, ¿qué valores son false o se evalúan como false cuando se verifican como
una condición? La lista de valores false incluye:
 0 (Cero)
 Cadenas vacías como "" o ' '
 null (nulo) que representa cuando no hay valor en absoluto
 undefined (indefinido) que representa cuando una variable declarada carece de un
valor
 NaN, o no es un número

26
He aquí un ejemplo con números:

let númeroDeManzanas = 0;
if (númeroDeManzanas){
console.log('Vamos a comer manzanas!');
} else {
console.log('No quedan manzanas!');
}
// Prints 'No quedan manzanas!'

La condición se evalúa como falsa porque el valor de númeroDeManzanas es 0. Dado

que 0 es un valor falso, se ejecutará el bloque de código en la instrucción else.

Ejercicios:
let recuentoDePalabras = 1;
if (recuentoDePalabras) {
console.log("Bien! Has comenzado tu trabajo!");
} else {
console.log('Mejor ponte a trabajar!');
}

let fraseFavorita = “”;

if (fraseFavorita) {
console.log("Esta cadena parece no estar vacía.");
} else {
console.log('Esta cadena está definitivamente vacía.'); }
1. Cambie el valor de wordCount para que sea veraz. Este valor debe seguir siendo
un número. let recuentoDePalabras = 0;
Después de realizar este cambio y ejecutar su código, '¡Genial! ¡Has comenzado tu
trabajo! debe iniciar sesión en la consola.
Rspta. 1. Con let recuento de palabras
Rspta: = 1;
let recuentoDePalabras= 1; Se imprimirá:
Bien! Has comenzado tu trabajo!");
Esta cadena parece no estar vacía
2. Cambie el valor de fraseFavorita para que siga siendo una cadena pero falsa.
let fraseFavorita = 'Hola Mundo!';
Después de realizar este cambio y ejecutar su código, 'Esta cadena
definitivamente está vacía'. debe iniciar sesión en la consola.
Rspta. 1. Con fraseFavorita = '';
Rspta:
Se imprimirá:
fraseFavorita = ''; Bien! Has comenzado tu trabajo!");
Esta cadena parece no estar vacía

Rspta: Rspta. 2. Con fraseFavorita = '””;

fraseFavorita = “”; Se imprimirá:
Bien! Has comenzado tu trabajo!");
Esta cadena parece no estar vacía

Asignación verdadera y falsa: ¡Las evaluaciones verdaderas y falsas

abren un mundo de posibilidades abreviadas!
Digamos que tiene un sitio web y desea tomar el nombre de usuario de un usuario
para hacer un saludo personalizado. A veces, el usuario no tiene una cuenta, lo que

27
hace que la variable del nombre de usuario sea falsa. El siguiente código verifica si el
nombre de usuario está definido y asigna una cadena predeterminada si no lo está:

let nombreDeUsuario = '';

let nombrePorDefecto;
if (nombreDeUsuario) {
nombrePorDefecto = nombreDeUsuario;
} else {
nombrePorDefecto = 'Extraño';
}
console.log(nombrePorDefecto); // Prints: Extraño

Si combina su conocimiento de los operadores lógicos, puede usar una abreviatura

para el código anterior. En una condición booleana, JavaScript asigna el valor
verdadero a una variable si usa el || operador en su asignación:

let nombreDeUsuario = '';

let nombrePorDefecto = nombreDeUsuario || ' Extraño ';

Porque || o las declaraciones verifican primero la condición de la izquierda, a la

variable nombrePorDefecto se le asignará el valor real de nombreDeUsuario si es
verdadero, y se le asignará el valor de 'Extraño' si el nombreDeUsuario es falso. Este
concepto también se conoce como evaluación de cortocircuito.

Ejercicios:
Tenemos el siguiente enunciado
let herramienta = '';
let utensilioDeEscritura

console.log(`El ${ utensilioDeEscritura} es más poderoso que la espada.`);

1. Usemos la evaluación de cortocircuito para asignar un valor a writingUtensil. No

edite la herramienta todavía, volveremos a la herramienta en el siguiente paso.
Asigne a writingUtensil el valor de la herramienta y, si la herramienta es falsa,
asigne un valor predeterminado de 'bolígrafo'.
Rspta: Rspta. 1. Con let utensilioDeEscritura =
let herramienta = ''; herramienta || 'bolígrafo'
Se imprimirá:
El bolígrafo es más poderoso que la espada

let utensilioDeEscritura = herramienta || 'bolígrafo'

console.log(`El ${utensilioDeEscritura} es más poderoso que la espada.`);

2. Observe que el texto "El bolígrafo es más poderoso que la espada" se registró en la
consola. Lo que significa que el valor de utensilioDeEscritura es 'bolígrafo'. ¿Qué
pasa si reasignamos el valor de herramienta a 'marcador'? Veamos qué sucede con
el valor de utensilioDeEscritura. Rspta. 2. Con herramienta = marcador
Se imprimirá:
Rspta: El marcador es más poderoso que la espada
let herramienta = "marcador";
utensilioDeEscritura = herramienta || 'bolígrafo'
console.log(`El ${ utensilioDeEscritura } es más poderoso que la espada.`);

28
Operador Ternario: En el espíritu de usar la sintaxis abreviada, podemos
usar un operador ternario para simplificar una declaración if...else.
Eche un vistazo al ejemplo de declaración if...else:

let esDeNoche = true;

if (esDeNoche) {
console.log('Enciende las luces!');
} else {
console.log(‘Apaga las luces');
}

Podemos usar un operador ternario para realizar la misma funcionalidad:

esDeNoche ? console.log('Enciende las luces!') : console.log('Apaga las luces!');

En el ejemplo anterior:
 La condición, esDeNoche, se proporciona antes de ?.
 Dos expresiones siguen al ? y están separados por dos puntos :
 Si la condición se evalúa como true, se ejecuta la primera expresión.
 Si la condición se evalúa como false, se ejecuta la segunda expresión.
 Al igual que las declaraciones if...else, los operadores ternarios se pueden usar
para condiciones que se evalúan como true o false.

Ejercicio:
let estáBloqueado = false;

if (estáBloqueado) {
console.log('Necesitarás una llave para abrir la puerta.');
1
} else {
console.log('No necesitarás una llave para abrir la puerta.');
}

let esCorrecto = true;

if (esCorrecto) {
console.log('Correcto!'); 2
} else {
console.log('Incorrecto!');
}

let fraseFavorita = 'Amo eso!';

if (fraseFavorita === 'Amo eso!') {

console.log('Amo eso!'); 3
} else {
console.log("Yo no amo eso!");
}

1. Refactorice, o edite, el primer bloque if...else para usar un operador ternario.

Rspta. Primer Bloque:
if (estáBloqueado) {
console.log('Necesitarás una llave para abrir la puerta.');
} else {

29
 console.log('No necesitarás una llave para abrir la puerta.');
}
estáBloqueado ? console.log('Necesitarás una llave para abrir la puerta. ') :
console.log('No necesitarás una llave para abrir la puerta.');

2. Refactorice el segundo bloque if...else para usar un operador ternario.

Rspta. Segundo bloque:
let esCorrecto = true;
if (esCorrecto) {
console.log('Correcto!');
} else {
console.log('Incorrecto!');
}
esCorrecto ? console.log('Correcto!') : console.log('Incorrecto!');

3. Refactorice el tercer bloque if...else para usar un operador ternario.

Rspta. Tercer bloque:
let fraseFavorita = 'Amo eso!';
if (fraseFavorita === 'Amo eso!') {
console.log('Amo eso!');
} else {
console.log("Yo no amo eso!");
}
fraseFavorita === 'Amo eso!' ? console.log('Amo eso!') : console.log("Yo no
amo eso!");

Declaración Else If (Si…..más): Podemos agregar más

condiciones a nuestro if...else con una declaración else if. La instrucción else if permite
más de dos resultados posibles. ¡Puede agregar tantas declaraciones if como desee
para hacer condicionales más complejos!
La sentencia else if siempre viene después de la sentencia if y antes de la sentencia
else. La instrucción else if también acepta una condición. Echemos un vistazo a la
sintaxis:

let luzDeFreno = 'amarillo';

if (luzDeFreno === 'rojo') {
console.log('Deténgase!');
} else if (luzDeFreno === 'amarillo') {
console.log(‘Desacelere.');
} else if (luzDeFreno === 'verde') {
console.log('Avance!');
} else {
console.log('Precaución, desconocido!');
}

Las declaraciones else if le permiten tener múltiples resultados posibles. Las

declaraciones if/else if/else se leen de arriba a abajo, por lo que la primera condición
que se evalúa como verdadera de arriba a abajo es el bloque que se ejecuta.
En el ejemplo anterior, dado que luzDeFreno === 'rojo' se evalúa como false y
luzDeFreno === 'amarillo' se evalúa como true, se ejecuta el código dentro de la
primera instrucción else if. El resto de las condiciones no se evalúan. Si ninguna de las

30
condiciones se evaluó como true, entonces se habría ejecutado el código en la
instrucción else.

Ejercicios:
1. Vamos a crear un programa que realice un seguimiento de la forma en que cambia
el entorno con las estaciones. ¡Escriba una declaración condicional para que esto
suceda!
En main.js ya existe una declaración if...else. Agreguemos una declaración else if
que verifique si la temporada es igual a 'winter'.
Dentro del bloque de código de la instrucción else if, agregue un archivo
console.log() que imprima la cadena 'It\'s winter! Everything is covered in snow.'
let temporada = 'verano';
if (temporada === 'primavera') {
console.log('Es primavera! Los árboles están floreciendo!');
} else {
console.log('Temporada no válida.');
}
2. Agregue otra instrucción else if que verifique si la temporada es igual a 'otoño'.
Dentro del bloque de código de la declaración else if que acaba de crear, agregue
un archivo console.log() que imprima la cadena '¡Es otoño! ¡Las hojas están
cayendo!'.
3. Agregue una declaración final else if que verifique si la temporada es igual a
'verano'. Dentro del bloque de código de la instrucción else if que acaba de crear,
agregue un archivo console.log() que imprima la cadena '¡Hace sol y calor porque
es verano!'.
let season = 'verano';
if (temporada === 'primavera') {
console.log('It\'s spring! The trees are budding!');
} else if(season === 'winter') {
console.log('It\'s winter! Everything is covered in snow.');
} else if(season === 'fall') {
console.log('It\'s fall! Leaves are falling!');
} else if(season === 'summer') {
console.log('It\'s sunny and warm because it\'s summer!');
} else {
console.log('Invalid season.');
}

Declaración de cambio switch keyword: Con else if, las

declaraciones if son una gran herramienta si necesitamos verificar múltiples
condiciones. En la programación, a menudo nos encontramos con la necesidad de
verificar múltiples valores y manejar cada uno de ellos de manera diferente. Por
ejemplo:

let tiendaDeComestiblesArticulo = 'papaya';

if (tiendaDeComestiblesArticulo === 'tomato') {
console.log('Tomates están $0.49');
} else if (tiendaDeComestiblesIArticulo === 'papaya'){
console.log('Papayas están $1.29');
} else {
console.log('Articulo Invalido');
}

31
En el código anterior, tenemos una serie de condiciones que buscan un valor que
coincida con una variable de artículo de supermercado. Nuestro código funciona bien,
¡pero imagina si tuviéramos que verificar 100 valores diferentes!
Una declaración de cambio proporciona una sintaxis alternativa que es más fácil de
leer y escribir. Una declaración de cambio se ve así:

switch (tiendaDeComestiblesArticulo) {
caso 'tomate':
console.log('Tomates están $0.49');
break;
caso 'limones':
console.log('Limones están $1.49');
break;
caso 'papaya':
console.log('Papayas están $1.29');
break;
default:
console.log('Articulo Invalido');
break;
}
// Prints 'Papayas están $1.29'

 La palabra clave switch inicia la sentencia y va seguida de (...), que contiene el

valor que comparará cada caso. En el ejemplo, el valor o la expresión de la
declaración de cambio es el artículo de compra.
 Dentro del bloque, { ... } hay varios casos. La palabra clave case verifica si la
expresión coincide con el valor especificado que viene después. El valor que sigue
al primer caso es 'tomate'. Si el valor de tiendaDeComestiblesArticulo fuera igual a
'tomate', se ejecutaría el archivo console.log() de ese caso.
 El valor de tiendaDeComestiblesArticulo es 'papaya', por lo que se ejecuta el tercer
caso: las papayas cuestan $1,29 se registran en la consola.
 La palabra clave break le dice a la computadora que salga del bloque y no ejecute
más código ni verifique ningún otro caso dentro del bloque de código. Nota: Sin
palabras clave de interrupción switch, se ejecutará el primer caso coincidente, pero
también lo harán todos los casos subsiguientes, independientemente de si coincide
o no, incluido el predeterminado. Este comportamiento es diferente de las
declaraciones condicionales if/else que ejecutan solo un bloque de código.
 Al final de cada declaración de cambio switch, hay una declaración default. Si
ninguno de los casos es verdadero, se ejecutará el código de la instrucción por
default

Ejercicios:
1. Escribamos una declaración de cambio para decidir qué medalla otorgar a un
atleta. athleteFinalPosition ya está definido en la parte superior. Así que comience
escribiendo una declaración de cambio con athleteFinalPosition como su
expresión.
let athleteFinalPosition = 'first place';
Rspta:
switch (athleteFinalPosition) {
}

2. Dentro de la instrucción agregue tres casos:

 El primer caso verifica el valor ‘first place’. Si el valor de la expresión coincide
con el valor del caso, entonces console.log() la cadena '¡ You get the gold
medal!'

32
  El segundo caso verifica el valor 'second place'. Si el valor de la expresión
coincide con el valor del caso, entonces console.log() la cadena '¡ You get the
silver medal!'
 El tercer caso verifica el valor ‘third place’. Si el valor de la expresión coincide
con el valor del caso, entonces console.log() la cadena '¡ You get the bronze
medal!'
Recuerde agregar un descanso después de cada console.log().
Rspta:
let athleteFinalPosition = 'first place';
switch (athleteFinalPosition) {
case 'first place':
console.log('You get the gold medal!');
break;
case 'second place':
console.log('You get the silver medal!');
break;
case 'third place':
console.log('You get the bronze medal!');
break;
default:
console.log('Invalid item');
break; }

3. Ahora, agregue una declaración default al final del cambio que usa console.log()
para imprimir 'No medal awarded.’
Si la posición final del atleta no es igual a ningún valor de nuestros casos,
entonces la cadena 'No medal awarded.’ se registra en la consola.
Recuerde agregar la palabra clave break al final del caso predeterminado.
Rspta:
let athleteFinalPosition = 'first place';
switch (athleteFinalPosition) {
case 'first place':
console.log('You get the gold medal!');
break;
case 'second place':
console.log('You get the silver medal!');
break;
case 'third place':
console.log('You get the bronze medal!');
break;
default:
console.log('No medal awarded.');
break;
}

Revisar
 Una declaración if verifica una condición y ejecutará una tarea si esa condición se
evalúa como verdadera.
 Las declaraciones if...else toman decisiones binarias y ejecutan diferentes bloques
de código en función de una condición proporcionada.
 Podemos agregar más condiciones usando sentencias else if.
 Los operadores de comparación, incluidos <, >, <=, >=, === y !== pueden
comparar dos valores.

33
 El operador lógico && o “and”, comprueba si ambas expresiones proporcionadas
son verdaderas.
 El operador lógico || o "or" comprueba si cualquiera de las expresiones
proporcionadas es veraz.
 El operador ! cambia la veracidad y la falsedad de un valor.
 El operador ternario es una abreviatura para simplificar sentencias if...else
concisas.
 Se puede usar una sentencia switch para simplificar el proceso de escribir varias
sentencias else if. La palabra clave break evita que los casos restantes se
verifiquen y ejecuten en una declaración de cambio.

34
 Funciones (Clase 4)
¿Qué son las funciones?: Al aprender por primera vez a calcular el
área de un rectángulo, hay una secuencia de pasos para calcular la respuesta
correcta:
 Mide el ancho del rectángulo.
 Mide la altura del rectángulo.
 Multiplica el ancho y el alto del rectángulo.
Con la práctica, puedes calcular el área del rectángulo sin que te indiquen estos tres
pasos cada vez.
Podemos calcular el área de un rectángulo con el siguiente código:

const width = 10;

const height = 6;
const area = width * height;
console.log(area); // Output: 60
Imagina que te pidan calcular el área de tres rectángulos diferentes:

// Area of the first rectangle

const width1 = 10;
const height1 = 6;
const area1 = width1 * height1;

// Area of the second rectangle

const width2 = 4;
const height2 = 9;
const area2 = width2 * height2;

// Area of the third rectangle

const width3 = 10;
const height3 = 10;
const area3 = width3 * height3;

En programación, a menudo usamos código para realizar una tarea específica varias
veces. En lugar de reescribir el mismo código, podemos agrupar un bloque de código y
asociarlo con una tarea, luego podemos reutilizar ese bloque de código cada vez que
necesitemos realizar la tarea nuevamente. Logramos esto creando una función. Una
función es un bloque de código reutilizable que agrupa una secuencia de
declaraciones para realizar una tarea específica.

Declaraciones de funciones: En JavaScript, hay muchas formas de

crear una function. Una forma de crear una función es usando una declaración de
function. Al igual que una declaración de variable vincula un valor a un nombre de
variable, una declaración de function vincula una function a un nombre o un
identificador (Identifier). Eche un vistazo a la anatomía de una declaración de función a
continuación:

35
Una declaración de función consta de:

 La palabra clave de función (Function keyword)

 El nombre de la función, o su identificador, seguido de paréntesis.
 El cuerpo de una función, o el bloque de instrucciones necesario para realizar una
tarea específica, encerrado entre llaves de la función, { }.

Una declaración de función es una función que está vinculada a un identificador o

nombre.
También debemos tener en cuenta la función de elevación (hoisting feature) en
JavaScript que permite el acceso a las declaraciones de funciones antes de que se
definan.
Eche un vistazo al ejemplo de elevación:

saludarMundo(); // Output: Hola, Mundo!

function saludarMundo() {
console.log('Hola, Mundo!');
}

¡Observe cómo hoisting (Elevación) permitió llamar a greetingWorld() antes de que se

definiera la función GreetWorld()! Dado que la elevación no se considera una buena
práctica, simplemente queremos que esté al tanto de esta función.
Si desea leer más sobre la elevación, consulte la documentación de MDN sobre la
elevación https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Ejercicios:
1. Creemos una función que imprima un recordatorio en la consola. Usando una
declaración de función, cree una función llamada obtenerRecordatorio().
2. En el cuerpo de la función de obtenerRecordatorio(), registre el siguiente
recordatorio en la consola: 'Regar las plantas'.
Rspta:
obtenerRecordatorio();
function obtenerRecordatorio() {
console.log('Regar las plantas.');
}

3. Vamos a crear otra función que imprima una frase útil para viajar en español en la
consola. Usando una declaración de función, cree una función llamada
saludarEnEspañol().
4. Agrega código al cuerpo de la función de saludarEnEspañol():
En el cuerpo de la función console.log() la siguiente frase en español a la consola:
'Buenas Tardes.'
Rspta:
saludarEnEspañol()

36
 function saludarEnEspañol() {
console.log('Buenas Tardes.');
}

Llamar a una función: Como vimos en ejercicios anteriores, una

declaración de función vincula una función a un identificador.
Sin embargo, una declaración de función no pide que se ejecute el código dentro del
cuerpo de la función, solo declara la existencia de la función. El código dentro del
cuerpo de una función se ejecuta, o se ejecuta, solo cuando se llama a la función.
Para llamar a una función en su código, escriba el nombre de la función seguido de
paréntesis.

Esta llamada de función ejecuta el cuerpo de la función o todas las declaraciones entre
llaves en la declaración de la función.

Podemos llamar a la misma función tantas veces como sea necesario.

Ejercicios:
1. Imagina que administras una tienda en línea. Cuando un cliente hace un pedido, le
envías una nota de agradecimiento. Vamos a crear una función para completar esta
tarea: Defina una función llamada diGracias() como una declaración de función.
2. En el cuerpo de la función diGracias() agregue código de modo que la función
escriba el siguiente mensaje de agradecimiento en la consola cuando se le llame:
'¡Gracias por su compra! Apreciamos tu negocio.'
3. Llama a diGracias() para ver el mensaje de agradecimiento en la consola.
Imagina que tres clientes hicieron un pedido y deseas enviarle a cada uno de ellos
un mensaje de agradecimiento. Actualiza tu código para llamar a diGracias() tres
veces.
Rspta:
function diGracias() {
console.log('¡Gracias por su compra! Apreciamos tu negocio.');
}

37
 diGracias();
diGracias();
diGracias();

Parámetros y Argumentos: Hasta ahora, las funciones que hemos

creado ejecutan una tarea sin una entrada. Sin embargo, algunas funciones pueden
tomar entradas y usar las entradas para realizar una tarea. Al declarar una función,
podemos especificar sus parámetros. Los parámetros permiten que las funciones
acepten entradas y realicen una tarea usando las entradas. Usamos parámetros como
marcadores de posición para la información que se pasará a la función cuando se
llame.
Observemos cómo especificar parámetros en nuestra declaración de función:

En el diagrama anterior, calculateArea() calcula el área de un rectángulo, en función

de dos entradas, ancho (width) y alto (height).
Los parámetros se especifican entre paréntesis como ancho (width) y alto (height), y
dentro del cuerpo de la función, actúan como variables regulares.
Ancho (width) y alto (height). actúan como marcadores de posición para los valores
que se multiplicarán entre sí.
Al llamar a una función que tiene parámetros, especificamos los valores entre
paréntesis que siguen al nombre de la función. Los valores que se pasan a la función
cuando se llama se llaman argumentos. Los argumentos se pueden pasar a la función
como valores o variables.

En la llamada de función anterior, el número 10 se pasa como ancho y 6 como alto.

Observe que el orden en que se pasan y asignan los argumentos sigue el orden en
que se declaran los parámetros.

38
Las variables rectWidth y rectHeight se inicializan con los valores de alto y ancho de
un rectángulo antes de usarse en la llamada de función.
¡Usando parámetros, calculateArea() se puede reutilizar para calcular el área de
cualquier rectángulo!

Ejercicios:
1. La función diGracias() funciona bien, pero agreguemos el nombre del cliente en el
mensaje. Agregue un parámetro llamado nombre a la declaración de función para
La función diGracias()

Rspta:
function diGracias(nombre) {
}

2. Con nombre como parámetro, se puede usar como una variable en el cuerpo de la
función diGracias(). Usando el nombre y la concatenación de cadenas, cambie el
mensaje de agradecimiento a lo siguiente: ‘¡Gracias por su compra '+ nombre + '!
Apreciamos tu negocio.'
Rspta:
function diGracias(nombre) {
console.log('Gracias por su compra '+ nombre + '! Apreciamos tu
negocio.');
}

3. Un cliente llamado Cole acaba de comprar algo en su tienda en línea. Llame a

diGracias() y pase 'Cole' como argumento para enviar a Cole un mensaje de
agradecimiento personalizado.
Rspta:
function diGracias(nombre) {
console.log('Gracias por su compra '+ nombre + '! Apreciamos tu
negocio.');
}
diGracias('Cole');

Parámetros predeterminados: Una de las funciones añadidas en

ES6 es la capacidad de utilizar parámetros predeterminados. Los parámetros
predeterminados permiten que los parámetros tengan un valor predeterminado en
caso de que no se pase ningún argumento a la función o si se undefined llama al
argumento.
Eche un vistazo al fragmento de código a continuación que usa un parámetro
predeterminado:

function saludo (nombre = 'extraño') {

console.log(`Hola, ${nombre}!`)
}
saludo('Nick') // Output: Hola, Nick!
saludo() // Output: Hola, extraño!

En el ejemplo anterior, usamos el operador = para asignar al parámetro nombre un

valor predeterminado de 'extraño'. ¡Esto es útil en caso de que alguna vez queramos
incluir un saludo predeterminado no personalizado!
Cuando el código llama saludo('Nick') se pasa el valor del argumento y 'Nick' anulará
el parámetro predeterminado de 'extraño' para iniciar sesión 'Hola, Nick!' en la consola.

39
Cuando no se pasa un argumento a saludo() se usa el valor predeterminado de
'extraño' y 'Hola, extraño!' se registra en la consola.
Al usar un parámetro predeterminado, tenemos en cuenta las situaciones en las que
no se pasa un argumento a una función que espera un argumento.

Ejercicio:
1. La función makeShoppingList() crea una lista de compras basada en los elementos
que se pasan a la función como argumentos.
Imagine que siempre compra leche, pan y huevos cada vez que va de compras.
Para facilitar la creación de una lista de compras, asignemos valores
predeterminados a los parámetros en makeShoppingList().
Cambie los parámetros de makeShoppingList() a parámetros predeterminados:
 Asigne 'leche' como el valor predeterminado de item1.
 Asigne 'pan' como el valor predeterminado de item2.
 Asigne 'huevos' como el valor predeterminado de item3.

function makeShoppingList(item1, item2, item3){

console.log(`Remember to buy ${item1}`);
console.log(`Remember to buy ${item2}`);
console.log(`Remember to buy ${item3}`);
}

Rspta:
function makeShoppingList(item1 = 'milk', item2 = 'bread', item3 = 'eggs'){
console.log(`Remember to buy ${item1}`);
console.log(`Remember to buy ${item2}`);
console.log(`Remember to buy ${item3}`);
}

Función devolver (Return): Cuando se llama a una función, la

computadora ejecutará el código de la función y evaluará el resultado de llamar a la
función. Por defecto, ese valor resultante será undefined

function areaDelRectangulo(ancho, alto) {

let area = ancho * alto;
}
console.log(areaDelRectangulo(5, 7)) // Prints undefined

En el ejemplo de código, definimos nuestra función para calcular areaDelRectangulo

con parámetros de ancho y alto. Luego, se invoca el areaDelRectangulo con los
argumentos 5 y 7. Pero cuando fuimos a imprimir los resultados, obtuvimos
indefinidos. ¿Escribimos mal nuestra función? ¡No! De hecho, la función funcionó bien
y la computadora calculó el área como 35, pero no la capturamos. Entonces, ¿cómo
podemos hacer eso? Con la palabra clave return!

40
Para devolver información de la llamada a la función, usamos una declaración de
return. Para crear una declaración de return, usamos la palabra clave de return
seguida del valor que deseamos devolver. Como vimos anteriormente, si se omite el
valor, se devuelve undefined en su lugar.
Cuando se usa una declaración de retorno en el cuerpo de una función, la ejecución
de la función se detiene y el código que le sigue no se ejecutará. Mira el ejemplo de
abajo:

function areaDelRectangulo(ancho, alto) {

if (ancho < 0 || alto < 0) {
return 'Necesitas números positivos para calcular el area!';
}
return ancho * alto;
}

Si un argumento para el ancho o la altura es menor que 0, el areaDelRectangulo

devolverá '¡Necesitas números enteros positivos para calcular el área!'. La segunda
declaración de devolución ancho * alto no se ejecutará.
La palabra clave de retorno es poderosa porque permite que las funciones produzcan
una salida. Luego podemos guardar la salida en una variable para su uso posterior.

Ejercicios:
1. Imagínese si necesitáramos pedir monitores para todos en una oficina y esta
oficina estuviera convenientemente dispuesta en forma de cuadrícula. ¡Podríamos
usar una función para ayudarnos a calcular la cantidad de monitores necesarios!
Declare una función cantidadDeMonitores() que tenga dos parámetros. El primer
parámetro son filas y el segundo parámetro son columnas.
Rspta:
function cantidadDeMonitores(filas, columnas) {
}

2. Calculemos el número de monitores multiplicando filas y columnas y luego

devolviendo el valor. En el cuerpo de la función que acaba de escribir, use la
palabra clave return para devolver filas * columnas.
Rspta:
return filas * columnas;

3. Ahora que la función está definida, podemos calcular la cantidad de monitores

necesarios. Digamos que la oficina tiene 5 filas y 4 columnas. Declare una variable
llamada numeroDeMonitores usando la palabra clave const y asigne a
numeroDeMonitores el valor de invocar cantidadDeMonitores() con los argumentos
5 y 4.
Rspta:
const numeroDeMonitores = cantidadDeMonitores(5, 4);

4. Para verificar que la función funcionó correctamente, registre numeroDeMonitores

en la consola.
Rspta:
console.log(numeroDeMonitores);

Funciones auxiliar de ayuda helper: También podemos usar el

valor de retorno de una función dentro de otra función. Estas funciones que se llaman

41
dentro de otra función a menudo se denominan funciones auxiliares (helper functions).
Dado que cada función está realizando una tarea específica, hace que nuestro código
sea más fácil de leer y depurar si es necesario.
Si quisiéramos definir una función que convierta la temperatura de Celsius a
Fahrenheit, podríamos escribir dos funciones como:

function multiplicarPornueveQuintos(numero) {
return numero * (9/5);
};

function obtenerFahrenheit(celsius) {
return multiplicarPornueveQuintos (celsius) + 32;
};

obtenerFahrenheit(15); // Returns 59

En el ejemplo anterior:
 Se llama a obtenerFahrenheit() y se pasa 15 como argumento.
 El bloque de código dentro de obtenerFahrenheit() llama
multiplicarPornueveQuintos() y pasa 15 como argumento.
 multiplicaByNineFifths() toma el argumento de 15 para el parámetro de número.
 El bloque de código dentro de la funciónmultiplicarPorNineFifths() multiplica 15 por
(9/5), lo que da como resultado 27.
 27 vuelve a la llamada de función en obtenerFahrenheit().
 obtenerFahrenheit() continúa ejecutándose. Suma 32 a 27, que se evalúa a 59.
 Finalmente, 59 se devuelve a la llamada de función obtenerFahrenheit(15).

Podemos usar funciones para separar pequeños fragmentos de lógica o tareas, y

luego usarlos cuando lo necesitemos. Escribir funciones auxiliares puede ayudar a
tomar tareas grandes y difíciles y dividirlas en tareas más pequeñas y manejables.

Ejercicio:
1. En el ejercicio anterior, creamos una función para encontrar la cantidad de
monitores a pedir para una oficina. Ahora escribamos otra función que use la
función cantidadDeMonitores para calcular el precio.
Debajo cantidadDeMonitores Cree una declaración de función llamada
precioDeLosMonitores que tenga dos parámetros, el primer parámetro son filas y el
segundo parámetro son columnas. Deje el cuerpo de la función vacío por ahora.

function cantidadDeMonitores(filas, columnas) {

return filas * columnas;
}

Rspta:
function precioDeLosMonitores(filas, columnas) {
return filas * columnas;
}

2. Es hora de agregar algo de código al cuerpo de la función de

precioDeLosMonitores para calcular el costo total. Agregue una declaración de
devolución que devuelva el valor de llamar a cantidadDeMonitores (filas,
columnas) multiplicado por 200.
Rspta:
function precioDeLosMonitores(filas, columnas) {

42
 return cantidadDeMonitores(filas, columnas) * 200;
};

3. Deberíamos guardar el costo en una variable. Declare una variable llamada

precioTotal usando la palabra clave const. Asigne a precioTotal el valor de llamar a
precioDeLosMonitores() con los argumentos 5 y 4 respectivamente.
Rspta:
const precioTotal = precioDeLosMonitores(5, 4);
4. Para verificar que la función funcionó correctamente, registre precioTotal en la
consola.
Rspta:
console.log(precioTotal);

Expresiones de función: Otra forma de definir una función es usar una

expresión de función. Para definir una función dentro de una expresión, podemos usar
la palabra clave function. En una expresión de función, el nombre de la función
generalmente se omite. Una función sin nombre se llama función anónima. Una
expresión de función a menudo se almacena en una variable para hacer referencia a
ella.
Considere la siguiente expresión de función:

Para declarar una expresión de función:

 Declare una variable para que el nombre de la variable sea el nombre o

identificador de su función. Desde el lanzamiento de ES6, es una práctica común
usar const como palabra clave para declarar la variable.
 Asigne como valor de esa variable una función anónima creada usando la palabra
clave function seguida de un conjunto de paréntesis con posibles parámetros.
Luego, un conjunto de llaves que contienen el cuerpo de la función.

Para invocar una expresión de función, escriba el nombre de la variable en la que se

almacena la función seguido de paréntesis que encierran los argumentos que se
pasan a la función.

NombreDeLaVariable(argumento1, argumento2)

A diferencia de las declaraciones de funciones, las expresiones de funciones no se

elevan, por lo que no se pueden llamar antes de definirlas.

Ejercicios:
1. Digamos que tenemos una planta que necesitamos regar una vez a la semana los
miércoles. Podríamos definir una expresión de función que nos ayude a verificar el día

43
de la semana y si la planta necesita ser regada: Cree una variable llamada
plantaNecesitaAgua utilizando la variable. const
Asigne una función anónima que tome un parámetro de dia para plantaNecesitaAgua.
Rspta:
const plantaNecesitaAgua = function(dia) {

};

2. Ahora necesitamos agregar algo de código al cuerpo de la función de

plantaNecesitaAgua (). En el cuerpo de la función, agregue un condicional if que
verifique el día === 'Miércoles'. Si el condicional es verdadero, dentro del bloque
de código if, use return para devolver el resultado verdadero.
Rspta:
const plantaNecesitaAgua = function(dia) {
if(dia === 'Miercoles'){
return true;
}
};

3. En los días que no son 'miércoles', plantaNecesitaAgua () debería devolver falso:

Agregue una declaración else después de la declaración if. Dentro de la
declaración else use la palabra clave return para devolver falso.
Rspta:
const plantaNecesitaAgua = function(dia){
if(dia === 'Miercoles'){
return true;
} else {
return false;
}
};

4. Para llamar a una función, agregue un conjunto de paréntesis al nombre de la

función y pase los argumentos necesarios:
Rspta:
plantaNecesitaAgua ('martes');

5. Comprobemos que plantaNecesitaAgua() devolvió el valor esperado. Inicie sesión

plantaNecesitaAgua('Martes') en la consola log. Si funcionó correctamente, debería
ver falso registrado en la consola.
Rspta:
console.log(plantNeedsWater('Tuesday'));

Funciones de flecha Arrow: ES6 introdujo la sintaxis de función de

flecha, una forma más corta de escribir funciones mediante el uso de la notación
especial "flecha gruesa" o “fat arrow” () =>.
Las funciones de flecha eliminan la necesidad de escribir la función de palabra clave
cada vez que necesita crear una función. En su lugar, primero incluye los parámetros
dentro de ( ) y luego agrega una flecha => que apunta al cuerpo de la función rodeado
de { } así:

const areaDelRectangulo = (ancho, alto) => {

let area = ancho * alto;

44
 return area;
};

Es importante estar familiarizado con las múltiples formas de escribir funciones porque
se encontrará con cada una de ellas al leer otro código JavaScript.

Ejercicio:
1. Cambie plantaNecesitaAgua() para usar la sintaxis de la función de flecha.
const plantaNecesitaAgua = function(dia) {
if (dia=== 'Miercoles') {
return true;
} else {
return false;
}
};

Rspta:
const plantaNecesitaAgua = (dia) => {
if (dia === 'Miercoles') {
return true;
} else {
return false;
}
};

Funciones de flecha de cuerpo conciso

 JavaScript también proporciona varias formas de refactorizar la sintaxis de la
función de flecha. La forma más condensada de la función se conoce como cuerpo
conciso. Exploraremos algunas de estas técnicas a continuación:
Las funciones que toman un solo parámetro no necesitan que ese parámetro esté
entre paréntesis. Sin embargo, si una función toma cero o múltiples parámetros, se
requieren paréntesis.

 Un cuerpo de función compuesto por un bloque de una sola línea no necesita

llaves. Sin las llaves, lo que evalúe esa línea se devolverá automáticamente. El
contenido del bloque debe seguir inmediatamente a la flecha => y se puede
eliminar la palabra clave de retorno. Esto se conoce como retorno implícito.

45
Así que si tenemos una función (Siendo square num, el cuadrado de un número):

const squareNum = (num) => {

return num * num;
};

Podemos refactorizar la función a:

const squareNum = num => num * num;

 Se han eliminado los paréntesis alrededor de num, ya que tiene un solo parámetro.
 Se han eliminado las llaves { } ya que la función consta de un bloque de una sola
línea.
 La palabra clave return se eliminó porque la función consiste en un bloque de una
sola línea.

Ejercicios:
1. Refactoricemos plantaNecesitaAgua() para que sea un cuerpo conciso. Tenga en
cuenta que ya convertimos la instrucción if/else en un operador ternario para que el
código quepa en una línea.
const plantNeedsWater = (day) => {
return day === 'Wednesday' ? true : false;
};
Rspta:
const plantNeedsWater = day => day === 'Wednesday' ? true :
false;

Revisión de Funciones:
 Una función es un bloque de código reutilizable que agrupa una secuencia de
declaraciones para realizar una tarea específica.

 Una declaración de función:

 Un parámetro es una variable con nombre dentro del bloque de una función a la
que se le asignará el valor del argumento pasado cuando se invoque la función:

46
 Para llamar a una función en su código:

ES6 presenta nuevas formas de manejar parámetros arbitrarios a través de

parámetros predeterminados que nos permiten asignar un valor predeterminado a un
parámetro en caso de que no se pase ningún argumento a la función.

 Para devolver un valor de una función, usamos una instrucción de return.

 Para definir una función usando expresiones de función:

 Para definir una función utilizando la notación de función de flecha :

 La definición de la función se puede hacer concisa usando la notación de flecha

concisa:

47
Es bueno conocer las diferencias entre expresiones de funciones, funciones de flecha
y declaraciones de funciones. A medida que programe más en JavaScript, verá una
amplia variedad de cómo se utilizan estos tipos de funciones.

48
 Alcance Scope
(Clase 5)
Una idea importante en la programación es el alcance (Scope) . El ámbito define
dónde se puede acceder o hacer referencia a las variables. Si bien se puede acceder
a algunas variables desde cualquier lugar dentro de un programa, es posible que otras
variables solo estén disponibles en un contexto específico.
Puede pensar en el alcance como la vista del cielo nocturno desde su ventana. Todo
el que vive en el planeta Tierra está en el ámbito global de las estrellas. Las estrellas
son accesibles globalmente. Mientras tanto, si vives en una ciudad, puedes ver el
horizonte de la ciudad o el río. El horizonte y el río solo son accesibles localmente en
su ciudad, pero aún puede ver las estrellas que están disponibles a nivel mundial.

Bloques y Alcance: Antes de hablar más sobre el alcance, primero

debemos hablar sobre los bloques.
Hemos visto bloques usados antes en funciones y sentencias if. Un bloque es el
código que se encuentra dentro de un conjunto de llaves {}. Los bloques nos ayudan a
agrupar una o más declaraciones y sirven como un marcador estructural importante
para nuestro código.
Un bloque de código podría ser una función, como esta:

const logColorDelCielo = () => {

let color = 'azul';
console.log(color); // azul
}

Observe que el cuerpo de la función es en realidad un bloque de código.

Observe el bloque en una declaración if

if (oscuridad) {
let color = 'rosa';
console.log(color); // rosa
}

Ejercicio:
1. En la parte superior de main.js, declare una variable const, denominada ciudad
igual a 'Ciudad de Nueva York'. Esta variable existirá fuera del bloque.
Rspta:
const ciudad = 'Ciudad de Nueva York';

2. Debajo de la variable de la ciudad, escribe una función llamada

logHorizonteDeLaCiudad.
Rspta:
const logHorizonteDeLaCiudad = () => {

3. Dentro del cuerpo de la función de logHorizontaDeLaCiudad(), escriba otra variable

usando el let rascacielos y establézcala igual a 'Edificio Empire State'.
Rspta:
let rascacielos = 'Edificio Empire State';

49
4. Dentro de la función, incluya una declaración de retorno como esta:
return 'La estrellas sobre el ' + rescacielo + ' en ' + la ciudad;
Rspta:
return 'Las estrellas sobre el ' + rascacielo + ' en ' + la ciudad;
};

5. Debajo de la función logHorizonteDelaCiudad(), use console.log() para registrar el

valor de logHorizonteDeLaCiudad() en la consola.
Notarás que la función HorizonteDeLaCiudad() puede acceder a ambas variables
sin ningún problema. En el próximo ejercicio consideraremos por qué sería
preferible tener una variable fuera de un bloque y la otra dentro de un bloque.
Rspta:
console.log(logCitySkyline());

 Siendo el resultado completo:

const city = 'New York City';
const logCitySkyline = () => {
let skyscraper = 'Empire State Building';
return 'The stars over the ' + skyscraper + ' in ' + city;
};
console.log(logCitySkyline());

Alcance global: El ámbito es el contexto en el que se declaran nuestras

variables. Pensamos en el alcance en relación con los bloques porque las variables
pueden existir fuera o dentro de estos bloques.
En el ámbito global, las variables se declaran fuera de los bloques. Estas variables se
denominan variables globales. Debido a que las variables globales no están
vinculadas dentro de un bloque, cualquier código del programa puede acceder a ellas,
incluido el código en bloques.
Veamos un ejemplo de alcance global:

const color = 'azul';

const returnColorDelCielo = () => {
return color; // azul
};
console.log(returnColorDelCielo()); // blue
console.log(returnColorDelCielo()); // azul

 Aunque la variable de color se define fuera del bloque, se puede acceder a ella en
el bloque de funciones, lo que le otorga un alcance global.
 A su vez, se puede acceder al color dentro del bloque de funciones
returnColorDelCielo.

Ejercicio:
1. En la parte superior de main.js, escribe tres variables globales:
 Nombra la primer variable satelite y configúralo igual a 'La Luna'.
 Nombra la segunda variable galaxia y configúrala igual a 'La Via Lactea'.
 Nombra la tercera variable estrella y configúrala igual a 'Estrella del Norte'.

Rspta:
const satelite = 'La Luna';

50
 const galaxia = 'La via Lactea';
const estrella = 'Estrella del Norte';

2. Debajo de las variables creadas en el paso anterior, escribe una función llamada
llamarMiCieloNocturno. Dentro de la función, incluya una declaración de retorno
como esta: return 'Cielo Nocturno: ' + satelite + ', ' + estrellas + ', y ' + galaxia;
Rspta:
const llamarMiCieloNocturno = () => {
return 'Cielo Nocturno: ' + satelite + ', ' + estrellas + ', y ' +
galaxia;
};

3. Debajo de la función llamarMiCieloNocturno(), use console.log() para registrar el

valor de llamarMiCieloNocturno () en la consola.
Notará que el bloque de funciones para llamarMiCieloNocturno () puede acceder a
las variables globales libremente ya que las variables están disponibles para todas
las líneas de código en el archivo.
Rspta:
console.log(llamarMiCieloNocturno());

Siendo el código completo:

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
const stars = 'North Star';
const callMyNightSky = () => {
return 'Night Sky: ' + satellite + ', ' + stars + ', and ' + galaxy;
};

console.log(callMyNightSky());

Alcance de bloque (Block Scope): El siguiente contexto que

cubriremos es el alcance del bloque. Cuando una variable se define dentro de un
bloque, solo es accesible para el código dentro de las llaves {}. Decimos que la
variable tiene alcance de bloque porque solo es accesible para las líneas de código
dentro de ese bloque.
Las variables que se declaran con alcance de bloque se conocen como variables
locales porque solo están disponibles para el código que forma parte del mismo
bloque.
El alcance del bloque funciona así:

const logColorDelCielo = () => {

let color = 'azul';
console.log(color); // blue
};

logSkyColor(); // blue
console.log(color); // ReferenceError

 Definimos una función logSColorDelCielo().

 Dentro de la función, la variable de color solo está disponible dentro de las llaves
de la función.
 Si intentamos registrar la misma variable fuera de la función, arroja un error de
referencia.

51
Ejercicios:
1. En main.js, defina una función logOlasDeLuzVisibles().
2. Dentro de la función logOlasDeLuzVisibles(), usando const, crea una variable
olasDeLuz y establécela igual a 'Luz de luna'.
3. Dentro de la función logOlasDeLuzVisbles(), debajo de la variable olasDeLuz,
agregue una instrucción console.log() que registrará el valor de la variable
olasDeLuz cuando se ejecute la función.
4. Llame a la función logOlasDeLuzVisibles() desde fuera de la función.
5. Debajo de la llamada a la función, registre el valor de olasDeLuz en la consola
desde fuera de la función.
Rspta:
const logOlasDeLuzVisibles = () => {
const olasDeLuz = 'Luz de luna';
console.log(olasDeLuz);
};

console.log(olasDeLuz); //ReferenceError: lightWaves is not

defined

Alcance Contaminación (Scope Pollution): Puede parecer

una gran idea hacer siempre accesibles sus variables, pero tener demasiadas
variables globales puede causar problemas en un programa.
Cuando declara variables globales, van al espacio de nombres global. El espacio de
nombres global permite que las variables sean accesibles desde cualquier parte del
programa. Estas variables permanecen allí hasta que finaliza el programa, lo que
significa que nuestro espacio de nombres global puede llenarse muy rápido.
La contaminación del alcance es cuando tenemos demasiadas variables globales que
existen en el espacio de nombres global, o cuando reutilizamos variables en diferentes
alcances. La contaminación del alcance dificulta el seguimiento de nuestras diferentes
variables y nos prepara para posibles accidentes. Por ejemplo, las variables de
alcance global pueden colisionar con otras variables que tienen un alcance más local,
lo que provoca un comportamiento inesperado en nuestro código.
Veamos un ejemplo de contaminación de alcance en la práctica para que sepamos
cómo evitarlo:

let num = 50;

const logNum = () => {
num = 100; // Toma nota de esta línea de código.
console.log(num);
};
logNum(); // Prints 100
console.log(num); // Prints 100

Notarás:
 Tenemos una variable num.
 Dentro del cuerpo de la función de logNum(), queremos declarar una nueva
variable pero olvidamos usar la palabra clave let.
 Cuando llamamos a logNum(), num se reasigna a 100.
 La reasignación dentro de logNum() afecta a la variable global num.
 Aunque la reasignación está permitida y no obtendremos un error, si decidimos
usar num más tarde, sin saberlo, usaremos el nuevo valor de num.

52
Si bien es importante saber qué es el alcance global, es una buena práctica no definir
variables en el alcance global.

Ejercicios:
1. Veamos qué sucede si creamos una variable que sobrescribe una variable global.
Dentro de la función llamoMiEstrellaDeNoche(), en la primera línea del cuerpo de
la función, asigne las estrellas variables a 'Sirius' como tales:
2. Fuera de la función, en la declaración actual de console.log(), agregue otra
declaración de console.log() para registrar estrellas en la consola. Notarás que las
estrellas variables globales se reasignaron a 'Sirius'. En otras palabras, cambiamos
el valor de la variable global de estrellas pero no es fácil leer qué sucedió
exactamente. Esta es una mala práctica en la mantenibilidad del código y podría
afectar nuestro programa de maneras que no pretendemos.
Rspta:
const satellite = 'La Luna';
const galaxy = 'La Via Lactea';
let estrellas = 'Estrella del norte';
const llamoMiEstrellaDeNoche = () => {
estrellas = 'Sirius';

return 'Cielo de Noche: ' + satelite + ', ' + estrellas + ', ' +
galaxia;
};
console.log(llamoMiEstrellaDeNoche()); // Cielo de Noche: La Luna,
Sirius, La Via Lactea
console.log(estrellas); // Sirius

Practique un buen alcance: Dados los desafíos con las variables

globales y la contaminación del alcance, debemos seguir las mejores prácticas para
definir el alcance de nuestras variables con la mayor precisión posible utilizando el
alcance de bloque.
El alcance estricto de sus variables mejorará en gran medida su código de varias
maneras:
 Hará que su código sea más legible ya que los bloques organizarán su código en
secciones discretas.
 ¡Hace que su código sea más comprensible ya que aclara qué variables están
asociadas con diferentes partes del programa en lugar de tener que realizar un
seguimiento de ellas línea tras línea!
 Es más fácil mantener su código, ya que su código será modular.
 Ahorrará memoria en su código porque dejará de existir una vez que el bloque
termine de ejecutarse.
Aquí hay otro ejemplo de cómo usar el alcance del bloque, como se define dentro de
un bloque if:

const logColorDelCielo = () => {

const anochecer = true;
let color = 'azul';
if (anochecer) {
let color = 'rosa';
console.log(color); // rosa
}
console.log(color); // azul
};

53
console.log(color); // ReferenceError

Aquí, notarás:
 Creamos una variable anochecer dentro de la función logColorDelCielo().
 Después de la instrucción if, definimos un nuevo bloque de código con las llaves {}.
Aquí asignamos un nuevo valor a la variable color si la declaración if es verdadera.
 Dentro del bloque if, la variable de color tiene el valor 'rosa', aunque fuera del
bloque if, en el cuerpo de la función, la variable de color tiene el valor 'azul'.
 Si bien usamos el alcance del bloque, todavía contaminamos nuestro espacio de
nombres al reutilizar el mismo nombre de variable dos veces. Una mejor práctica
sería cambiar el nombre de la variable dentro del bloque.
Block scope es una herramienta poderosa en JavaScript, ya que nos permite definir
variables con precisión y no contaminar el espacio de nombres global. Si una variable
no necesita existir fuera de un bloque, ¡no debería estar!

Ejercicios:
1. Dentro del cuerpo de la función de logOlasDeLuzVisibles(), debajo de la variable
region y antes de la instrucción console.log() proporcionada, cree una instrucción if
que verifique si la región es "El Ártico".
2. Dentro del bloque if, define una nueva variable let olasDeLuz y establécela igual a
'AurorasBoreales'.
3. Debajo de la variable en el bloque if, usa console.log() para registrar el valor de la
variable del bloque dentro del bloque if.
Ejecute su código y observe la salida. Dentro del bloque if console.log(olasDeLuz)
registra el valor Aurora Boreal en la consola. Fuera del bloque if, pero aún dentro
de la función, la misma instrucción registra Luz de Luna en la consola.
Rspta:
const logOlasDeLuzVisibles = () => {
let olasDeLuz = 'Luz de luna';
let region = 'The Arctic';
:
if (region === 'El Artico'){
let olasDeLuz = 'Aurora Boreal';
console.log(olasDeLuz);
}

console.log(olasDeLuz);
};
logOlasDeLuzVisibles();

Revisión: Alcance
 El alcance Scope se refiere a dónde se puede acceder a las variables a lo largo del
programa y está determinado por dónde y cómo se declaran.
 Los bloques Blocks son declaraciones que existen entre llaves {}.
 El alcance global Global scope se refiere al contexto dentro del cual las variables
son accesibles para cada parte del programa.
 Las variables globales Global variables son variables que existen dentro del ámbito
global.
 El alcance del bloque Block scope se refiere al contexto dentro del cual las
variables son accesibles solo dentro del bloque en el que están definidas.
 Las variables locales Local variables son variables que existen dentro del alcance
del bloque.

54
 El espacio de nombres global Global namespace es el espacio en nuestro código
que contiene información de alcance global.
 La contaminación del alcance Scope pollution se produce cuando existen
demasiadas variables en un espacio de nombres o se reutilizan los nombres de las
variables.

55
Arrays (Matriz JavaScript)
(Clase 6)
Organizar y almacenar datos es un concepto fundamental de la programación.
Una forma en que organizamos los datos en la vida real es haciendo listas. Hagamos
uno aquí:
Resoluciones de Año Nuevo:
1. Lleva un diario
2. Toma una clase de repostería
3. Aprende a hacer malabares
Ahora escribamos esta lista en JavaScript, como una matriz:

let resolucionesDeAñoNuevo = ['Lleva un diario', 'Toma una clase de repostería',

'Aprende a hacer malabares'];

Los arrays son la forma de JavaScript de hacer listas. Las matrices pueden almacenar
cualquier tipo de datos (incluidas cadenas, números y valores booleanos). Al igual que
las listas, las matrices están ordenadas, lo que significa que cada elemento tiene una
posición numerada.
Aquí hay una serie de conceptos que cubriremos:

let conceptos = ['crear arrays', 'estructurar arrays', 'manipular arrays'];

Ejemplo:

let resolucionesDeAñoNuevo = ['Lleva un diario', 'Toma una clase de repostería',

'Aprende a hacer malabares'];
console.log(resolucionesDeAñoNuevo); // print ['Lleva un diario', 'Toma una
clase de repostería', 'Aprende a hacer malabares'];

Creando un Array: Una forma en que podemos crear un array es usar un

literal de array. Un literal de array crea un array envolviendo elementos entre corchetes
[]. Recuerde del ejercicio anterior, los arreglos pueden almacenar cualquier tipo de
datos: podemos tener un arreglo que contenga todos los mismos tipos de datos o un
arreglo que contenga diferentes tipos de datos.

Echemos un vistazo más de cerca a la sintaxis en el ejemplo de matriz:

 La matriz está representada por corchetes [] y el contenido dentro.
 Cada elemento de contenido dentro de una matriz se denomina elemento.
 Hay tres elementos diferentes dentro de la matriz.

56
 Cada elemento dentro de la matriz es un tipo de datos diferente.
 También podemos guardar una matriz en una variable. Es posible que haya notado
que hicimos esto en el ejercicio anterior:

let resolucionesDeAñoNuevo = ['Lleva un diario', 'Toma una clase de repostería',

'Aprende a hacer malabares'];

Ejercicios:
1. Declare una variable usando const llamada pasatiempos y configúrela igual a una
matriz con tres cadenas dentro de ella.
2. Usa console.log() para imprimir pasatiempos en la consola.
Rspta:
const pasatiempos = ['atletismo', 'tocar piano', 'karate'];
console.log(pasatiempos); // print: ['atletismo', 'tocar piano', 'karate']

Accediendo a Elementos: Cada elemento de una matriz tiene una

posición numerada conocida como su índice. Podemos acceder a elementos
individuales utilizando su índice, que es similar a hacer referencia a un elemento en
una lista según la posición del elemento.
Las matrices en JavaScript están indexadas a cero, lo que significa que las posiciones
comienzan a contar desde 0 en lugar de desde 1. Por lo tanto, el primer elemento de
una matriz estará en la posición 0. Veamos cómo podemos acceder a un elemento de
una matriz:

En el fragmento de código anterior:

 cities es una matriz let que tiene tres elementos (0, 1, y 2)

 Estamos usando la notación de corchetes, [] con el índice después del nombre de
la matriz para acceder al elemento.
 Cities [0] accederá al elemento en el índice 0 en la matriz cities. Puede pensar en
las ciudades [0] como accediendo al espacio en la memoria que contiene la
cadena 'Nueva York'.
 También puede acceder a caracteres individuales en una cadena usando la
notación de paréntesis y el índice. Por ejemplo, puedes escribir:

const hola = 'Hola Mundo';

console.log(hola[6]); // Output: W

La consola mostrará W ya que es el carácter que está en el índice 6.

57
Ejercicios:
1. Los elementos individuales en matrices también se pueden almacenar en
variables. Cree una variable denominada elementoDeLista y establézcala igual que
el primer elemento de la matriz de dichos famosos utilizando la notación de
corchetes ([]). Luego use console.log() para imprimir la variable listItem en la
consola.
const dichosFamosos = [' La fortuna favorece a los valientes.', ' La broma es cosa
muy seria.', ' Donde hay amor hay vida.'];
Rspta:
const elementoDeLista = dichosFamosos[0];
2. Ahora ejecute un console.log() el tercer elemento en el arreglo de dichos famosos
usando la notación de paréntesis para acceder al elemento. No guarde el elemento
en una nueva variable antes de registrarlo.
Rspta:
console.log(dichosFamosos[2]); // print: Donde hay amor hay vida
3. Intente registrar el elemento en el índice [3] de dichos famosos en la consola.
¿Qué se registra en la consola?
Rspta:
console.log(dichosFamosos[3]); // print: undefined

Actualizar elementos: En el ejercicio anterior, aprendió cómo acceder a

los elementos dentro de una matriz o una cadena mediante el uso de un índice. Una
vez que tenga acceso a un elemento en una matriz, puede actualizar su valor.

let estaciones = ['Invierno', 'Primavera', 'Verano', 'Otoño Americano'];

estacioness[3] = 'Otoño Britanico';
console.log(estaciones); //Output: ['Invierno', 'Primavera', 'Verano', 'Otoño
Britanico']

 En el ejemplo anterior, el array de estaciones contenía los nombres de las cuatro

estaciones.
 Sin embargo, decidimos que preferíamos decir 'Otoño Britanico' en lugar de 'Otoño
Americano' (En UK se dice autumn y en USA fall)
 La línea, estaciones[3] = 'Otoño Britanico'; le dice a nuestro programa que cambie
el elemento en el índice 3 de la matriz de estaciones para que sea 'Otoño Britanico'
en lugar de lo que ya está allí.

Ejercicio:
1. Cambie el segundo elemento de la listaDeComestibles a 'aguacates'.
let listaDeComestibles = ['pan', 'tomates', 'leche'];
Rspta:
listaDeComestibles[1] = 'aguacates';
console.log(listaDeComestibles); // print: [ 'pan', 'aguacates', 'leche' ]

Arrays con let y const: Puede recordar que puede declarar variables con
las palabras clave let y const. Las variables declaradas con let se pueden reasignar.
Las variables declaradas con la palabra clave const no se pueden reasignar. Sin
embargo, los elementos de un array declarado con const siguen siendo mutables. Lo
que significa que podemos cambiar el contenido de un array const, pero no podemos
reasignar un nuevo array o un valor diferente.

58
Las instrucciones a continuación ilustrarán este concepto más claramente. Preste
mucha atención a las similitudes y diferencias entre el array de condimentos y el array
de utensilios a medida que completa los pasos.

Ejercicios:
1. Debajo de las dos matrices existentes, vuelva a asignar el elemento en el índice 0
de condimentos a 'Mayo'. Registre el array actualizado de condimentos, en la
consola.
let condimentos = ['Ketchup', 'Mostaza', 'Salsa de soja, 'Mayonesa'];
Rspta:
condiments[0] = 'Mayo';
console.log(condiments); // print: ['Ketchup', 'Mostaza', 'Salsa de soja,
'Mayonesa']
2. Debajo de su código del Paso 1, reasigne los condimentos para que sean un
nuevo array que contenga una sola cadena ['Mayo']. Registre el resultado en la
consola. Tenga en cuenta que puede reasignar elementos en un array y reasignar
un nuevo array completo a una variable declarada con la palabra clave let.
Rspta:
condiments = ['Mayo']; // print: ['Mayo', 'Mostaza', 'Salsa de soja,
'Mayonesa']
3. Debajo de su código del Paso 2, vuelva a asignar el último elemento del array de
utensilios a 'Cuchara'. Registre la matriz actualizada en la consola.
const utensilios = ['Tenedor', 'Cuchillo', 'Palillos', 'Tenedor'];
Rspta:
utensilios[3] = 'Cuchara';
console.log(utensilios); // print: ['Tenedor', 'Cuchillo', 'Palillos', 'Cuchara']

La propiedad .length: Una de las propiedades integradas de un array es

la longitud y devuelve la cantidad de elementos en el array. Accedemos a la propiedad
.length tal como lo hacemos con las cadenas. Revisa el ejemplo a continuación:
const resolucionesDeAñoNuevo = ['Tener un diario', 'Tomar clases de
repostería];
console.log(resolucionesDeAñoNuevo.length); // Output: 2
En el ejemplo anterior, registramos resolucionesDeAñoNuevo.length en la consola
mediante los siguientes pasos:
 Usamos la notación de puntos, encadenando un punto con el nombre de la
propiedad al array, para acceder a la propiedad de longitud del array
resolucionesDeAñoNuevo
 Luego registramos la duración de resolucionesDeAñoNuevo en la consola.
 Dado que resolucionesDeAñoNuevo tiene dos elementos, 2 se registrarían en la
consola.
Cuando queremos saber cuántos elementos hay en un array, podemos acceder a la
propiedad .length.

Ejercicio:
1. Encuentre la longitud del array de objetivos y regístrelo en la consola.
const objectives = ['Learn a new language', 'Read 52 books', 'Run a marathon'];
Rspta:
console.log(objectives.length); // print: 3

El Método .push(): Aprendamos sobre algunos métodos de JavaScript

integrados que facilitan el trabajo con arrays. Estos métodos se utilizan

59
específicamente en arrays para hacer que las tareas comunes, como agregar y
eliminar elementos, sean más sencillas.
Un método, .push() nos permite agregar elementos al final de un array. Aquí hay un
ejemplo de cómo se usa esto:

const rastreadorDeArticulos = ['item 0', 'item 1', 'item 2'];

rastreadorDeArticulos.push('item 3', 'item 4');
console.log(rastreadorDeArticulos); // Output: ['item 0', 'item 1', 'item 2', 'item 3',
'item 4'];

Entonces, ¿cómo funciona .push()?

 Accedemos al método .push conectando push a rastreadorDeArticulos con un
punto.
 Entonces lo llamamos como una función. Eso es porque .push() es una función
que JavaScript nos permite usar directamente en un array
 .push() puede tomar un solo argumento o múltiples argumentos separados por
comas. En este caso, estamos agregando dos elementos: 'elemento 3' y 'elemento
4' a rastreadorDeArticulos
 Tenga en cuenta que .push() cambia, o muta, rastreadorDeArticulos. También
puede ver .push() referido como un método de array destructivo ya que cambia la
array inicial.
Si está buscando un método que mute una matriz agregándole elementos, ¡entonces
.push() es el método para usted!

Ejercicios:
1. Agregue dos elementos al array de tareas usando .push()
const tareas = ['lavar platos', 'lavar ropa', 'sacar la basura'];
Rspta:
tareas.push('barrer', 'cocinar');
2. Use console.log para imprimir su array de tareas para asegurarse de que se
agregaron sus elementos.
Rspta:
console.log(tareas); // print: ['lavar platos', 'lavar ropa', 'sacar la basura',
'barrer', 'cocinar']

El método .pop(): Otro método de matriz, .pop() elimina el último elemento

de un array

const nuevoRastreadorDeArticulos = ['item 0', 'item 1', 'item 2'];

const removed = nuevoRastreadorDeArticulos.pop();
console.log(nuevoRastreadorDeArticulos); // Output: [ 'item 0', 'item 1' ]
console.log(removed); // Output: item 2

 En el ejemplo anterior, llamar a .pop() en el array nuevoRastreadorDeArticulos

eliminó el elemento 2 del final.
 .pop() no toma ningún argumento, simplemente elimina el último elemento de
nuevoRastreadorDeArticulos
 .pop() devuelve el valor del último elemento. En el ejemplo, almacenamos el valor
devuelto en una variable eliminada para usarla más adelante.
 .pop() es un método que muta el array inicial.
Cuando necesite mutar una matriz eliminando el último elemento, use .pop().

Ejercicios:

60
1. Utilice el método .pop() para eliminar el último elemento de las tareas.
const tareas = ['lavar platos', 'lavar la ropa', 'tirar la basura', 'cocinar', 'fregar el
suelo'];
Rspta:
tareas.pop();
2. En una línea después de llamar a actividades.pop(), registre el console.log para
asegurarse de que funcionó.
Rspta:
console.log(tareas); // print ['lavar platos', 'lavar la ropa', 'tirar la basura',
'cocinar', 'fregar el suelo']

Más métodos de array: Hay muchos más métodos de array además de

.push() y .pop() Puede leer acerca de todos los métodos de matriz que existen en la
documentación de matriz de Mozilla Developer Network (MDN)
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array
.pop() y .push() cambian el array. Sin embargo, hay ocasiones en las que no queremos
mutar el array original y podemos usar métodos de array que no mutan. Asegúrese de
consultar MDN para comprender el comportamiento del método que está utilizando.
Algunos métodos de matrices que están disponibles para los desarrolladores de
JavaScript incluyen: .join(), .slice(), .splice(), .shift(), .unshift() y .concat(), entre muchos
otros. El uso de estos métodos integrados facilita la realización de algunas tareas
comunes cuando se trabaja con arrays.
A continuación, exploraremos algunos métodos que aún no hemos aprendido.
Usaremos estos métodos para editar una lista de compras. A medida que complete los
pasos, puede consultar la documentación de MDN para saber qué hace cada método.

Ejercicios:
1. Utilice el método .shift() para eliminar el primer elemento de la matriz de la
listaDeLaCompra. Registre la nueva lista de compras en la consola.
const listaDeLaCompra= ['jugo de naranja', 'platanos', 'granos de cafe', 'arroz
integral', 'pasta', 'aceite de coco', 'uvas'];
Rspta:
listaDeLaCompra.shift();
console.log(listaDeLaCompra); // print: ['platanos', 'granos de cafe', 'arroz
integral', 'pasta', 'aceite de coco', 'uvas'];
2. Bajo el código agregado en el paso 1, use el método .unshift() para agregar 'pop
corn' al comienzo de su listaDeLaCompra. Después de llamar a .unshift() en la
listaDeLaCompra, registre la listaDeLaCompra en la consola.
Rspta:
listaDeLaCompra.unshift('popcorn');
console.log(listaDeLaCompra); // print: ['pop corn', 'platanos', 'granos de
cafe', 'arroz integral', 'pasta', 'aceite de coco', 'uvas']
3. Tienes prisa y decides pedirle a un amigo que te ayude con tus compras. Quiere
que recoja los 'plátanos', los 'granos de café' y el 'arroz integral'. Bajo el código que
agregó para el paso 2, use .slice() para proporcionarle a su amigo una lista de
estas tres cosas. Registre esta parte de la lista en la consola. A diferencia de los
dos puntos de control anteriores, debe realizar ambos pasos en una línea.
Rspta:
console.log(listaDeLaCompra.slice(1, 4)); // print: [ 'platanos', 'granos de
cafe', 'arroz integral' ]
4. Después de llamar a .slice() en la llistaDeLaCompra, registre la listaDeLaCompra
en la consola una vez más. Tenga en cuenta que el array de la listaDeLaCompra

61
 todavía contiene los mismos elementos que tenía en el Paso 2. ¡Eso significa que
.slice() no está mutando! Puedes confirmarlo en el enlace del paso anterior.
Rspta:
console.log(listaDeLaCompra); // print: ['pop corn', 'platanos', 'granos de
cafe', 'arroz integral', 'pasta', 'aceite de coco', 'uvas']
5. Encontremos el índice de un elemento particular en la listaDeLaCompra usando
.indexOf(). Llame a .indexOf() en la listaDeLaCompra para encontrar el índice del
elemento 'pasta' y guarde el valor devuelto en una variable const llamada
pastaCarbonara. Luego inicie sesión en pastaCarbonara en la consola. (Puede
eliminar las otras declaraciones de console.log() para despejar el terminal).
Rspta:
const pastaCarbonara = listaDeLaCompra.indexOf('pasta');
console.log(pastaCarbonara); // print: 4

Arrays y Funciones: A lo largo de la lección, repasamos que los arrays

son mutables o modificables. Bueno, ¿qué sucede si tratamos de cambiar un array
dentro de un array? ¿El array mantiene el cambio después de la llamada a la función o
está dentro de la función?
Eche un vistazo al siguiente ejemplo en el que llamamos a .push() en un array dentro
de una función. Recuerde, el método .push() muta o cambia un array:

const flores = ['peonia', 'narciso', 'calendula'];

function añadirFlor(arr) {
arr.push('lirio');
}
añadirFlor(flores);
console.log(flores); // Output: ['peonia', 'narciso', 'calendula', ‘lirio’]

Repasemos lo que sucedió en el ejemplo:

 El array de flores que tiene 3 elementos.
 La función añadirFlor() tiene un parámetro de arr usa .push() para agregar un
elemento 'lirio' en arr.
 Llamamos a añadirFlor() con un argumento de flores que ejecutará el código
dentro de añadirFlor
 ¡Comprobamos el valor de las flores y ahora incluye el elemento 'lirio'! ¡El array fue
mutado!
Entonces, cuando pasa un array a una función, si el array se muta dentro de la
función, ese cambio también se mantendrá fuera de la función. También puede ver
este concepto explicado como paso por referencia, ya que lo que en realidad estamos
pasando a la función es una referencia a dónde se almacena la memoria variable y
cambia la memoria.

Ejercicios:
1. En main.js, hay un concepto de array. También hay una función cambiarArr que
asignará el elemento en el índice 3 de una matriz a 'MUTATED'. La función
cambiarArr fue llamada con un argumento de concepto.
Debajo de la llamada de función, registre el concepto en la consola para verificar si
esta reasignación mutó el array.
const concepto = ['array', 'puede', 'ser', 'mutado'];
function cambiarArr(arr){
arr[3] = 'CAMBIADO';
}
cambiarArr(concepto);

62
 Rspta:
const concepto = ['array', 'puede', 'ser', 'mutado'];
function cambiarArr(arr){
arr[3] = 'CAMBIADO';
}
cambiarArr(concepto);
console.log(concepto); // print: ['array', 'puede', 'ser', 'mutado']
2. Verifiquemos dos veces qué sucede si mutamos un array usando un método
incorporado dentro de una función. Bajo la instrucción console.log(), defina otra
función llamada removerElemento que tome un parámetro de nuevoArr. Dentro del
cuerpo de la función, llame a .pop() en nuevoArr.
Rspta:
function removerElemento (nuevoArr) {
nuevoArr.pop();
}
3. Llamar a removerElemento () con el argumento concepto
Rspta: removerElemento(concepto);
4. Después de llamar a removerElemento(concepto), verifica el valor de concepto
registrándolo en la consola.
¡Observe que en ambos casos, el cambio a la matriz se mantuvo fuera de la
función!
Rspta: console.log(concepto); //Print: [ 'arrays', 'puede', 'ser' ]

Array anidado (Nested Array): Anteriormente mencionamos que los

arrays pueden almacenar otros arrays. Cuando un array contiene otro array, se conoce
como Nested Array. Examina el siguiente ejemplo:

const nestedArr = [[1], [2, 3]];

Para acceder a los arrays anidados, podemos usar la notación de corchetes con el
valor del índice, tal como lo hicimos para acceder a cualquier otro elemento:

const nestedArr = [[1], [2, 3]];

console.log(nestedArr[1]); // Output: [2, 3]

Tenga en cuenta que nestedArr[1] tomará el elemento en el índice 1, que es el array

[2, 3]. Luego, si quisiéramos acceder a los elementos dentro del array anidado
podemos encadenar o agregar más notación de paréntesis con valores de índice.

const nestedArr = [[1], [2, 3]];

console.log(nestedArr[1]); // Output: [2, 3]
console.log(nestedArr[1][0]); // Output: 2

En la segunda declaración de console.log(), tenemos dos notaciones de paréntesis

encadenadas a nestedArr. Sabemos que nestedArr[1] es la matriz [2, 3]. Luego, para
tomar el primer elemento de ese array, usamos nestedArr[1][0] y obtenemos el valor
de 2.

Ejercicios:
1. ¡Hagamos una matriz anidada! Cree una variable numberClusters. Asigne como su
valor un array con tres elementos de matriz.
 El primer elemento del array debe contener los elementos 1 y 2 en ese orden.
 El segundo elemento del array debe contener los elementos 3 y 4 en ese orden.
 El tercer elemento del array debe contener los elementos 5 y 6 en ese orden.

63
 Rspta: const numberClusters = [[1, 2], [3, 4], [5, 6]];

2. ¡Impresionante, hiciste una matriz anidada! Ahora declare una variable llamada
target usando la palabra clave const y asígnela para acceder al elemento 6 dentro
de numberClusters.
Rspta: const target = numberClusters[2][1];

Revisión de Arrays
 Los arrays son listas que almacenan datos en JavaScript.
 Los arrays se crean con corchetes [].
 Cada elemento dentro de un array está en una posición numerada o índice,
comenzando en 0.
 Podemos acceder a un elemento en un array usando su índice, con una sintaxis
como: myArray[0].
 También podemos cambiar un elemento en un array usando su índice, con una
sintaxis como myArray[0] = 'new string';
 Los arrays tienen una propiedad de longitud, que le permite ver cuántos elementos
hay en un array
 Los array tienen sus propios métodos, incluidos .push() y .pop() que agregan y
eliminan elementos de un arreglo, respectivamente.
 Los array tienen muchos métodos que realizan diferentes tareas, como .slice() y
.shift()
 Algunos métodos incorporados están mutando, lo que significa que el método
cambiará al array, mientras que otros no están mutando. Siempre puedes
consultar la documentación.
 Las variables que contienen arrays se pueden declarar con let o const. Incluso
cuando se declaran con const, los array siguen siendo mutables. Sin embargo, una
variable declarada con const no se puede reasignar.
 Los arrays mutados dentro de una función mantendrán ese cambio incluso fuera
de la función.
 Los array se pueden anidar dentro de otros array
 Para acceder a elementos en array anidadas, encadene índices utilizando la
notación de paréntesis.

64
 Bucles (loops)
(Clase 7)
Un bucle es una herramienta de programación que repite un conjunto de instrucciones
hasta que se alcanza una condición específica, llamada condición de parada. Como
programador, descubrirá que depende de los bucles todo el tiempo. Escuchará el
término genérico iterar cuando se refiera a bucles; iterar simplemente significa
"repetir".
Cuando necesitamos reutilizar una tarea en nuestro código, a menudo empaquetamos
esa acción en una función. De manera similar, cuando vemos que un proceso tiene
que repetirse varias veces seguidas, escribimos un bucle. Los bucles nos permiten
crear código eficiente que automatiza procesos para crear programas escalables y
manejables.
Como se ilustra en el diagrama, los bucles iteran o repiten una acción hasta que se
cumple una condición específica. Cuando se cumple la condición, el ciclo se detiene y
la computadora pasa a la siguiente parte del programa.

Repetir tareas manualmente: Antes de escribir nuestros propios

bucles, tomemos un momento para desarrollar una apreciación por los bucles. La
mejor manera de hacerlo es mostrándole lo engorroso que sería si una tarea repetida
requiriera que escribiera el mismo código cada vez.

Ejercicios:
1. Cree la variable VacationSpots y asigne su valor a una matriz de tres cadenas que
nombran los lugares que le gustaría visitar.
Rspta:
const vacationSpots = ['Santiago de Compostela', 'Vigo', 'Lugo']; // print:
['Santiago de Compostela', 'Vigo', 'Lugo']

2. A continuación, haga un console.log() de cada elemento en vacationSpots. Como

aún no conocemos los bucles, tenemos que hacer console.log() por cada elemento
de la matriz por separado.
Rspta:
console.log(vacationSpots[0]);
console.log(vacationSpots[1]);
console.log(vacationSpots[2]);
// print
Santiago de Compostela
Vigo
Lugo

¡Buen trabajo! Ahora imagine que la lista de vacaciones tiene 100 lugares: registrar
cada elemento de la matriz en la consola a mano sería una tarea tediosa. En el
próximo ejercicio, aprenderemos cómo hacer que las cosas sean más eficientes con
bucles.

El bucle For
En lugar de escribir el mismo código una y otra vez, los bucles nos permiten decirle a
las computadoras que repitan un bloque de código determinado por sí solo. Una forma
de dar a las computadoras estas instrucciones es con un bucle for.

65
El bucle for típico incluye una variable iteradora que suele aparecer en las tres
expresiones. La variable del iterador se inicializa, se compara con la condición de
parada y se le asigna un nuevo valor en cada iteración del bucle. Las variables de
iterador pueden tener cualquier nombre, pero se recomienda utilizar un nombre de
variable descriptivo.
Un bucle for contiene tres expresiones separadas por ; dentro de los paréntesis:
 una inicialización inicia el ciclo y también se puede usar para declarar la variable
del iterador.
 una condición de parada es la condición con la que se evalúa la variable del
iterador: si la condición se evalúa como verdadera, el bloque de código se
ejecutará, y si se evalúa como falsa, el código se detendrá.
 se utiliza una declaración de iteración para actualizar la variable del iterador en
cada ciclo.
La sintaxis del bucle for se ve así:

for (let counter = 0; counter < 4; counter++) {

console.log(counter);
}
// print:
0
1
2
3

Desglosemos el ejemplo:
 La inicialización se deja contador = 0, por lo que el ciclo comenzará a contar en 0.
 La condición de parada es contador < 4, lo que significa que el bucle se ejecutará
siempre que la variable del iterador, contador, sea inferior a 4.
 La instrucción de iteración es counter++. Esto significa que después de cada bucle,
el valor del contador aumentará en 1. Para la primera iteración, el contador será
igual a 0, para la segunda iteración, el contador será igual a 1, y así
sucesivamente.
 El bloque de código está dentro de las llaves, console.log(counter) se ejecutará
hasta que la condición se evalúe como falsa. La condición será falsa cuando el
contador sea mayor o igual a 4; el punto en el que la condición se vuelve falsa a
veces se denomina condición de parada.
 Este bucle for hace posible escribir 0, 1, 2 y 3 mediante programación.

Ejercicio:
1. ¡Cree un programa que recorra del 5 al 10 y registre cada número en la consola.
Rspta:
for (let counter = 5; counter < 11; counter++) {
console.log(counter);
}
// print:
5
6
7
8
9
10

66
Bucle en reversa: ¿Qué pasa si queremos que el bucle for registre 3, 2, 1 y
luego 0? ¡Con simples modificaciones a las expresiones, podemos hacer que nuestro
ciclo se ejecute hacia atrás!
Para ejecutar un bucle for hacia atrás, debemos:
 Establezca la variable del iterador en el valor deseado más alto en la expresión de
inicialización.
 Establezca la condición de parada para cuando la variable del iterador sea menor
que la cantidad deseada.
 El iterador debe disminuir en intervalos después de cada iteración.
 Practicaremos cambiando el for que escribimos anteriormente para que ahora vaya
al revés. Al escribir/cambiar bucles, existe la posibilidad de que nuestra condición
de parada no se cumpla y obtengamos un temido bucle infinito que esencialmente
impide que nuestra programación ejecute cualquier otra cosa. Para salir de un ciclo
infinito en un ejercicio, actualice la página y luego corrija el código para su ciclo.

Ejercicio:
1. Cree un bucle for que retroceda imprimiendo 3 a 0 en la consola. Use el operador
de comparación >= en su condición de parada y el operador -- en su declaración
de iteración.
for (let counter = 0; counter < 4; counter++){
console.log(counter);
}
Rspta:
or (let counter = 3; counter >= 0; counter--){
console.log(counter);
}
// print:
3
2
1
0

Bucle a través de matrices: Los bucles for son muy útiles para iterar
sobre estructuras de datos. Por ejemplo, podemos usar un bucle for para realizar la
misma operación en cada elemento de una matriz. Las matrices contienen listas de
datos, como nombres de clientes o información de productos. Imagina que tenemos
una tienda y queremos aumentar el precio de todos los productos de nuestro catálogo.
Eso podría ser una gran cantidad de código repetitivo, pero al usar un bucle for para
iterar a través de la matriz, podríamos realizar esta tarea fácilmente.
Para recorrer cada elemento de una matriz, un bucle for debe usar la propiedad .length
de la matriz en su condición.
Consulte el siguiente ejemplo para ver cómo los bucles iteran en las matrices:

const animals = ['Grizzly Bear', 'Sloth', 'Sea Lion'];

for (let i = 0; i < animals.length; i++){
console.log(animals[i]);
}
//Print:
Grizzly Bear
Sloth
Sea Lion

67
En el ciclo anterior, hemos nombrado a nuestra variable iteradora i. Esta es una
convención de nomenclatura de variables que verá en muchos bucles. Cuando
usamos i para iterar a través de matrices, podemos pensar que es una forma
abreviada de la palabra índice. Observe cómo nuestra condición de parada comprueba
que i es menor que animals.length. Recuerde que los arreglos tienen índice cero, el
índice del último elemento de un array es equivalente a la longitud de ese array menos
1. Si intentamos acceder a un elemento en el índice de animals.length, ¡habremos ido
demasiado lejos!
Con for, es más fácil para nosotros trabajar con elementos en arreglos.

Ejercicio:
1. Escriba un bucle for que itere a través de nuestra matriz de vacaciones usando i
como la variable iteradora. Dentro del bloque del bucle for, usa console.log() para
registrar cada elemento en la matriz de vacationSpots después de la cadena 'I
would love to visit'. Por ejemplo, la primera ronda del ciclo debería imprimir 'I would
love to visit Bali' en la consola.
const vacationSpots = ['Bali', 'Paris', 'Tulum'];
Rspta:
for (let i = 0; i < vacationSpots.length; i++ ){
console.log('I would love to visit ' + vacationSpots[i]);
}
// Print:
I would love to visit Bali
I would love to visit Paris
I would love to visit Tulum

Bucles anidados. Cuando tenemos un bucle ejecutándose dentro de otro

bucle, lo llamamos bucle anidado. Un uso para un bucle for anidado es comparar los
elementos en dos matrices. Para cada ronda del bucle for externo, el bucle for interno
se ejecutará por completo.
Veamos un ejemplo de un bucle for anidado:

const myArray = [6, 19, 20];

const yourArray = [19, 81, 2];
for (let i = 0; i < myArray.length; i++) {
for (let j = 0; j < yourArray.length; j++) {
if (myArray[i] === yourArray[j]) {
console.log('Both arrays have the number: ' + yourArray[j]);
}
}
}

Pensemos en lo que sucede en el bucle anidado de nuestro ejemplo. Para cada

elemento de la matriz de bucle externo, myArray, el bucle interno se ejecutará en su
totalidad comparando el elemento actual de la matriz externa, myArray[i], con cada
elemento de la matriz interna, yourArray[j]. Cuando encuentra una coincidencia,
imprime una cadena en la consola.

Ejercicio:
1. ¡Imagina que eres un programador importante para una plataforma de redes
sociales! Se le ha encomendado la tarea de crear un prototipo para un programa
de seguidores mutuos. Necesitará dos matrices “friends” de dos usuarios
simulados para poder extraer los nombres de los seguidores que existen en ambas

68
 listas. Cree una variable llamada bobsFollowers y configúrela como una matriz con
cuatro cadenas que representen los nombres de los amigos de Bob.
2. Cree una variable llamada tinasFollowers y establézcala como una matriz con tres
cadenas que representen los nombres de los amigos de Tina. Haga exactamente
dos de estos iguales a dos de los amigos en la matriz bobsFollowers.
3. Cree una tercera variable llamada seguidores mutuos y configúrela en una matriz
vacía.
4. Cree un ciclo anidado que itere a través de bobsFollowers como matriz para el
ciclo externo y tinasFollowers como matriz para el ciclo interno. Si el elemento
actual del ciclo externo es el mismo que el elemento actual del ciclo interno, inserte
ese elemento en la matriz mutualFollowers.
Rspta:
let bobsFollowers = ['Sandra', 'Alvaro', 'Antonio', 'Pepe'];
let tinasFollowers = ['Jorge', 'Michael', 'Carlos'];
let mutualFollowers = [];

for (let i = 0; i < bobsFollowers.length; i++) {

for (let j = 0; j < tinasFollowers.length; j++) {
if (bobsFollowers[i] === tinasFollowers[j]) {
mutualFollowers.push(bobsFollowers[i]);
}
}
};

El bucle while: Para empezar, vamos a convertir un bucle for en un bucle

while:

// A for loop that prints 1, 2, and 3

for (let counterOne = 1; counterOne < 4; counterOne++){
console.log(counterOne);
}

// A while loop that prints 1, 2, and 3

let counterTwo = 1;
while (counterTwo < 4) {
console.log(counterTwo);
counterTwo++;
}

Analicemos lo que sucede con nuestra sintaxis de ciclo

while:
 La variable counterTwo se declara antes del ciclo. Podemos acceder a él dentro de
nuestro bucle while ya que está en el ámbito global.
 Comenzamos nuestro bucle con la palabra clave while seguido de nuestra
condición de parada o condición de prueba. Esto se evaluará antes de cada ronda
del ciclo. Mientras la condición se evalúa como verdadera, el bloque continuará
ejecutándose. Una vez que se evalúe como falso, el bucle se detendrá.
 A continuación, tenemos el bloque de código de nuestro ciclo que imprime
counterTwo en la consola e incrementa counterTwo.

69
¿Qué pasaría si no incrementáramos counterTwo dentro de nuestro bloque? Si no
incluyéramos esto, counterTwo siempre tendría su valor inicial, 1. Eso significaría que
la condición de prueba counterTwo < 4 siempre se evaluaría como verdadera y
nuestro ciclo nunca dejaría de ejecutarse. Recuerda, esto se llama bucle infinito y es
algo que siempre queremos evitar. Los bucles infinitos pueden consumir toda la
potencia de procesamiento de su computadora y potencialmente congelar su
computadora.
¡Entonces puede que se pregunte cuándo usar un bucle while! La sintaxis de un ciclo
while es ideal cuando no sabemos de antemano cuántas veces debe ejecutarse el
ciclo. Piense en comer como un ciclo de tiempo: cuando comienza a tomar bocados,
no sabe el número exacto que necesitará para llenarse. Más bien comerás mientras
tengas hambre. En situaciones en las que queremos que un bucle se ejecute un
número indeterminado de veces, los bucles while son la mejor opción.

Ejercicio:
1. Debajo de la matriz de cards, declare una variable, currentCard, con la palabra
clave let pero no le asigne ningún valor.
const cards = ['diamond', 'spade', 'heart', 'club'];
2. Cree un ciclo while con una condición que verifique si la currentCard no tiene ese
valor 'spade'. Dentro del bloque de tu ciclo while, agrega la siguiente línea de
código:
currentCard = cards[Math.floor(Math.random() * 4)];
Math.floor(Math.random() * 4) nos dará un número aleatorio de 0 a 3. Usaremos
este número para indexar la matriz de cards y asignar el valor de currentCard a un
elemento aleatorio de esa matriz.
3. Su bucle se está ejecutando, pero no puede saberlo porque no genera nada.
Agreguemos una instrucción console.log() a nuestro bloque while. Dentro del
bloque, después de asignar a currentCard un nuevo valor, registre currentCard en
la consola.
Rspta:
let currentCard;

while ( currentCard != 'spade') {

currentCard = cards[Math.floor(Math.random() * 4)];
console.log(currentCard);
}
// Print: Aparecerán varias combinaciones de listados

Declaraciones Do...While: En algunos casos, desea que un fragmento

de código se ejecute al menos una vez y luego se repita en función de una condición
específica después de su ejecución inicial. Aquí es donde entra en juego la sentencia
do...while.
Una declaración do...while dice que se debe hacer una tarea una vez y luego seguir
haciéndola hasta que ya no se cumpla una condición específica. La sintaxis para una
instrucción do...while se ve así:

let countString = '';

let i = 0;
do {
countString = countString + i;
i++;
} while (i < 5);
console.log(countString);

70
En este ejemplo, el bloque de código realiza cambios en la variable countString al
agregarle la forma de cadena de la variable i. Primero, el bloque de código después de
la palabra clave do se ejecuta una vez. Luego se evalúa la condición. Si la condición
se evalúa como verdadera, el bloque se ejecutará nuevamente. El bucle se detiene
cuando la condición se evalúa como falsa.
Tenga en cuenta que el ciclo while y do...while son diferentes. A diferencia del bucle
while, do...while se ejecutará al menos una vez, ya sea que la condición se evalúe
como verdadera o no.

const firstMessage = 'I will print!';

const secondMessage = 'I will not print!';
// A do while with a stopping condition that evaluates to false
do {
console.log(firstMessage)
} while (true === false);
// A while loop with a stopping condition that evaluates to false
while (true === false){
console.log(secondMessage)
};

Ejercicios:
1. Nos gustaría un programa para simular parte del proceso de horneado de pasteles.
Dependiendo de la receta, se requiere una cantidad diferente de tazas de azúcar.
Cree la variable cupsOfSugarNeeded y asígnele un valor numérico de su elección.
Las tazas de azúcar se deben agregar a la masa de una en una. Declare la
variable cupsAdded y asígnele el valor 0.
2. Somos golosos, por lo que queremos agregar al menos una taza de azúcar a la
masa, incluso si el valor de cupsOfSugarNeeded es 0. Cree un ciclo do...while que
incremente cupsAdded en uno mientras cupsAdded es menor que
cupsOfSugarNeeded. Para ayudarnos a visualizar el resultado en cada iteración
del ciclo, agregue un archivo console.log dentro del bloque do...while y registre el
valor de cupsAdded.
Rspta:
let cupsOfSugarNeeded = 5;
let cupsAdded = 0;
do {
cupsAdded++
console.log(cupsAdded + ' cup was added')
} while (cupsAdded < cupsOfSugarNeeded);
// Print:
1 cup was added
2 cup was added
3 cup was added
4 cup was added
5 cup was added

La palabra clave de ruptura break Keyword: Imagina que

estamos buscando adoptar un perro. Planeamos ir al refugio todos los días durante un
año y luego darnos por vencidos. Pero, ¿y si nos encontramos con el perro de
nuestros sueños el día 65? No queremos seguir yendo al refugio durante los próximos
300 días solo porque nuestro plan original era ir por un año entero. En nuestro código,
cuando queremos detener la ejecución de un bucle aunque no se haya cumplido la
condición de parada original que escribimos para nuestro bucle, podemos usar la
palabra clave break.

71
La palabra clave break permite que los programas se "salgan" del bucle desde dentro
del bloque del bucle.
Veamos la sintaxis de una palabra clave break:

for (let i = 0; i < 99; i++) {

if (i > 2 ) {
break;
}
console.log('Banana.');
}
console.log('Orange you glad I broke out the loop!');
// Print:
Banana.
Banana.
Banana.
Orange you glad I broke out the loop!

¡Las declaraciones de ruptura break pueden ser especialmente útiles cuando estamos
recorriendo grandes estructuras de datos! Con los descansos, podemos agregar
condiciones de prueba además de la condición de parada y salir del ciclo cuando se
cumplan.

Ejercicios:
1. Registre cada elemento de rapperArray en un bucle for con la variable de iterador i.
const rapperArray = ["Lil' Kim", "Jay-Z", "Notorious B.I.G.", "Tupac"];
2. Después del bucle for, registre la cadena "And if you don't know, now you know." a
la consola Nota: dado que hay un carácter de comilla simple, ', en nuestra cadena,
podemos usar comillas dobles alrededor de la cadena para asegurarnos de que se
imprima el carácter.
3. Agregue una ruptura break dentro del bloque de su ciclo que salga del ciclo si el
elemento en el índice actual en el rapperArray es 'Notorious B.I.G.'
Rspta:
for (let i = 0; i < rapperArray.length; i++){
console.log(rapperArray[i]);
if (rapperArray[i] === 'Notorious B.I.G.'){
break;
}
}
console.log("And if you don't know, now you know.");
// Print:
Lil' Kim
Jay-Z
Notorious B.I.G.
And if you don't know, now you know.

Revisar
 Los bucles realizan acciones repetitivas para que no tengamos que codificar ese
proceso manualmente cada vez.
 Cómo escribir bucles for con una variable iteradora que incrementa o decrementa
 Cómo usar un bucle for para iterar a través de una matriz
 Un bucle for anidado es un bucle dentro de otro bucle
 mientras que los bucles permiten diferentes tipos de condiciones de parada, las
condiciones de parada son cruciales para evitar bucles infinitos.

72
 do...while ejecuta el código al menos una vez; solo verifica la condición de
detención después de la primera ejecución
 La palabra clave break permite que los programas dejen un bucle durante la
ejecución de su bloque.

73
 Funciones de orden superior
(Clase 8)
Introducción
A menudo no somos conscientes de la cantidad de suposiciones que hacemos cuando
nos comunicamos en nuestros idiomas nativos. Si le decimos que "cuente hasta tres",
esperaríamos que diga los números "uno", "dos" y "tres". Asumimos que sabría
comenzar con "uno" y terminar con "tres". Con la programación, necesitamos ser más
explícitos con nuestras direcciones a la computadora. Así es como podríamos decirle a
la computadora que "cuente hasta tres":

for (let i = 1; i <= 3; i++) {

console.log(i);
}

Cuando hablamos con otros humanos, compartimos un vocabulario que proporciona

formas rápidas de comunicar conceptos complicados. Cuando decimos la palabra
"hornear", nos recuerda una subrutina familiar: precalentar un horno, poner algo en el
horno durante un tiempo determinado y finalmente sacarlo. Esto nos permite abstraer
muchos de los detalles y comunicar conceptos clave de manera más concisa. En lugar
de enumerar todos esos detalles, podemos decir: "Hornamos un pastel" y aun así
transmitirle todo ese significado.
En esta lección, aprenderemos cómo usar la "abstracción" en la programación
escribiendo funciones. Además de permitirnos reutilizar nuestro código, las funciones
ayudan a que los programas sean claros y legibles. Si encuentra countToThree() en un
programa, es posible que pueda adivinar rápidamente qué hace la función sin tener
que detenerse y leer el cuerpo de la función.
También aprenderemos sobre una forma de agregar otro nivel de abstracción a
nuestra programación: funciones de orden superior. Las funciones de orden superior
son funciones que aceptan otras funciones como argumentos y/o devuelven funciones
como salida. Esto nos permite construir abstracciones sobre otras abstracciones, al
igual que "Organizamos una fiesta de cumpleaños" es una abstracción que puede
construirse sobre la abstracción "Hicimos un pastel".

Funciones como datos: Las funciones de JavaScript se comportan

como cualquier otro tipo de datos en el lenguaje; podemos asignar funciones a
variables y podemos reasignarlas a nuevas variables.
A continuación, tenemos un nombre de función molestamente largo que perjudica la
legibilidad de cualquier código en el que se use. Nota: Si la sintaxis de la siguiente
función no le resulta familiar, vuelva a realizar el ejercicio de funciones de flecha para
refrescar sus conocimientos sobre la notación de flecha de ES6.

const announceThatIAmDoingImportantWork = () => {

console.log("I’m doing very important work!");
};

Supongamos que esta función hace un trabajo importante y necesita ser llamada
repetidamente. Para cambiar el nombre de esta función sin sacrificar el código fuente,
podemos reasignar la función a una variable con un nombre adecuadamente corto:

74
const busy = announceThatIAmDoingImportantWork;
busy(); // This function call barely takes any space!

busy es una variable que contiene una referencia a nuestra función original. Si
pudiéramos buscar la dirección en la memoria de ocupado y la dirección en la
memoria de anunciar que estoy haciendo un announceThatIAmDoingImportantWork,
apuntarían al mismo lugar. Nuestra nueva función busy() se puede invocar con
paréntesis como si ese fuera el nombre que originalmente le dimos a nuestra función.
Observe cómo asignamos announceThatIAmDoingImportantWork sin paréntesis como
el valor de la variable busy. Queremos asignar el valor de la función en sí, no el valor
que devuelve cuando se invoca.
En JavaScript, las funciones son objetos de primera clase. Esto significa que, al igual
que otros objetos que haya encontrado, las funciones de JavaScript pueden tener
propiedades y métodos.
Como las funciones son un tipo de objeto, tienen propiedades como .length y .name, y
métodos como .toString(). Puede ver más sobre los métodos y propiedades de las
funciones en la documentación. https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Function

Las funciones son especiales porque podemos invocarlas, pero aún podemos tratarlas
como cualquier otro tipo de datos

Ejercicios:
1. Hemos definido una función con un nombre muy largo:
checkThatTwoPlusTwoEqualsFourAMillionTimes(). Esta función tarda mucho
tiempo en ejecutarse. Comprueba si 2 + 2 = 4, ¡pero lo hace un millón de veces
(solo para estar realmente seguro)!
Usando const, declare una variable con un nombre más corto, isTwoPlusTwo, con
la que será más fácil trabajar. Asigne
checkThatTwoPlusTwoEqualsFourAMillionTimes como su valor.
2. Invoque su función isTwoPlusTwo().
3. Hmmm, si olvidamos el nombre original de nuestra función. ¿Hay alguna manera
de que podamos resolverlo? Usa isTwoPlusTwo para console.log() la propiedad de
nombre de la función que asignamos a isTwoPlusTwo.
const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
for(let i = 1; i <= 1000000; i++) {
if ( (2 + 2) != 4) {
console.log('Something has gone very wrong :( ');
}
}
};
Respuesta:
const isTwoPlusTwo = checkThatTwoPlusTwoEqualsFourAMillionTimes;
isTwoPlusTwo();
console.log(isTwoPlusTwo.name);

Funciones como parámetros: Como sabe, un parámetro es un

marcador de posición para los datos que se pasan a una función. Dado que las
funciones pueden comportarse como cualquier otro tipo de datos en JavaScript, puede
que no le sorprenda saber que las funciones pueden aceptar otras funciones como
parámetros. Una función de orden superior es una función que acepta funciones como
parámetros, devuelve una función o ambas cosas. Llamamos funciones que se pasan

75
como funciones de devolución de llamada de parámetros. Las funciones de devolución
de llamada se invocan durante la ejecución de la función de orden superior.
Cuando invocamos una función de orden superior y pasamos otra función como
argumento, no invocamos la función de argumento. Invocarlo se evaluaría como pasar
el valor de retorno de esa llamada de función. Con las funciones de devolución de
llamada, pasamos la función en sí escribiendo el nombre de la función sin paréntesis:

const higherOrderFunc = param => {

param();
return `I just invoked ${param.name} as a callback function!`
}
const anotherFunc = () => {
return 'I\'m being invoked by the higher-order function!';
}
higherOrderFunc(anotherFunc);

Escribimos una función de orden superior highOrderFunc que acepta un solo

parámetro, param. Dentro del cuerpo, se invoca a param usando paréntesis. Y
finalmente, se devuelve una cadena que nos dice el nombre de la función de
devolución de llamada que se pasó.
Debajo de la función de orden superior, tenemos otra función llamada anotherFunc.
Esta función aspira a ser llamada dentro de la función de orden superior.
Por último, invocamos highOrderFunc(), pasando anotherFunc como su argumento,
cumpliendo así sus sueños de ser llamado por la función de orden superior.

higherOrderFunc(() => {
for (let i = 0; i <= 10; i++){
console.log(i);
}
});

En este ejemplo, invocamos a highOrderFunc() con una función anónima (una función
sin nombre) que cuenta hasta 10. ¡Las funciones anónimas también pueden ser
argumentos!

Ejercicios:
1. Aquí tenemos una función, addTwo(), que suma 2 a lo que se le pasa. Debajo de
eso, hemos creado lo que será una función de orden superior,
checkConsistentOutput(). El propósito de la función de orden superior será verificar
el trabajo de addTwo().
Para comenzar, dentro del cuerpo de checkConsistentOutput(), declara dos
variables: checkA y checkB:
 checkA almacena la suma val más 2.
 checkB almacena la invocación de la devolución de llamada func, con val como
argumento.
2. Luego, debajo de las variables, escriba una declaración condicional que verifique si
el valor de checkA es igual al valor de checkB. Si es verdadero, devuelve el
resultado de la función de devolución de llamada. Si es falso, devuelve la cadena
'inconsistent results'.
3. Finalmente, usando console.log(), registre la invocación de
checkConsistentOutput() con dos argumentos: la función addTwo() y cualquier
número.
const addTwo = num => {
return num + 2;
}

76
 const checkConsistentOutput = (func, val) => {
}
console.log();
Rspta:
const addTwo = num => {
return num + 2;
}
const checkConsistentOutput = (func, val) => {
let checkA = val + 2;
let checkB = func(val);
return checkA === checkB ? func(val) : 'inconsistent results';
}
console.log(checkConsistentOutput(addTwo, 10));
// Print: 2

Revisar
 La abstracción nos permite escribir código complicado de una manera que sea fácil
de reutilizar, depurar y comprender para los lectores humanos.
 Podemos trabajar con funciones de la misma manera que trabajamos con
cualquier otro tipo de datos, incluso reasignándolos a nuevas variables.
 Las funciones de JavaScript son objetos de primera clase, por lo que tienen
propiedades y métodos como cualquier otro objeto.
 Las funciones se pueden pasar a otras funciones como parámetros.
 Una función de orden superior es una función que acepta funciones como
parámetros, devuelve una función o ambas cosas.

77
 Iteradores
(Clase 9)
Introducción a los iteradores: Imagina que tienes una lista de
compras y quieres saber qué es cada elemento de la lista. Tendría que escanear cada
fila y buscar el artículo. Esta tarea común es similar a lo que tenemos que hacer
cuando queremos iterar o recorrer una matriz. Una herramienta a nuestra disposición
es el bucle for. Sin embargo, también tenemos acceso a métodos de matriz
incorporados que facilitan el bucle.
Los métodos de matriz de JavaScript incorporados que nos ayudan a iterar se
denominan métodos de iteración, a veces denominados iteradores. Los iteradores son
métodos llamados en matrices para manipular elementos y devolver valores.
En esta lección, aprenderá la sintaxis de estos métodos, sus valores de retorno, cómo
usar la documentación para comprenderlos y cómo elegir el método de iterador
correcto para una tarea determinada.

El método .forEach(): El primer método de iteración que vamos a

aprender es .forEach(). Bien llamado, .forEach() ejecutará el mismo código para cada
elemento de una matriz.

El código anterior registrará una lista bien formateada de las compras en la consola.
Exploremos la sintaxis de invocar .forEach().
 groceries.forEach() llama al método forEach en la matriz de comestibles.
 forEach() toma un argumento de la función de devolución de llamada. Recuerde,
una función de devolución de llamada es una función que se pasa como
argumento a otra función.
 forEach() recorre la matriz y ejecuta la función de devolución de llamada para cada
elemento. Durante cada ejecución, el elemento actual se pasa como argumento a
la función de devolución de llamada.
 El valor devuelto por .forEach() siempre será indefinido.
Otra forma de pasar una devolución de llamada para .forEach() es usar la sintaxis de
la función de flecha.

78
groceries.forEach(groceryItem => console.log(groceryItem));

También podemos definir una función de antemano para usarla como función de
devolución de llamada.

function printGrocery(element){
console.log(element);
}
groceries.forEach(printGrocery);

El ejemplo anterior usa una declaración de función, pero también puede usar una
expresión de función o una función de flecha.
Los tres fragmentos de código hacen lo mismo. En cada método de iteración de
matriz, podemos usar cualquiera de los tres ejemplos para proporcionar una función
de devolución de llamada como argumento para el iterador. Es bueno estar al tanto de
las diferentes formas de pasar funciones de devolución de llamada como argumentos
en los iteradores porque los desarrolladores tienen diferentes preferencias estilísticas.
No obstante, debido a la fuerte adopción de ES6, utilizaremos la sintaxis de la función
de flecha en los ejercicios posteriores.

Ejercicio:
1. Iterar sobre la matriz de fruits para registrar I want to eat más el nombre de cada
fruta en la consola. Por ejemplo, I want to eat a mango. Puede utilizar cualquier
forma de devolución de llamada que prefiera.
const fruits = ['mango', 'papaya', 'pineapple', 'apple'];
Rspta:
fruits.forEach(fruit=>console.log('I want to eat a '+fruit));
// Print:
I want to eat a mango
I want to eat a papaya
I want to eat a pineapple
I want to eat a Apple

El método .map()
El segundo iterador que vamos a cubrir es .map() Cuando se llama a .map() en una
matriz, toma un argumento de una función de devolución de llamada y devuelve una
nueva matriz. Eche un vistazo a un ejemplo de llamar a .map():

const numbers = [1, 2, 3, 4, 5];

const bigNumbers = numbers.map(number => {
return number * 10;
});

.map() funciona de manera similar a .forEach() la principal diferencia es que .map()

devuelve una nueva matriz.

En el ejemplo anterior:
 numbers es una matriz de números.
 bigNumbers almacenará el valor de retorno de llamar a .map() en numbers
 numbers.map iterará a través de cada elemento en la matriz de números y pasará
el elemento a la función de devolución de llamada.

79
 el return number * 10 es el código que deseamos ejecutar en cada elemento de la
matriz. Esto guardará cada valor de la matriz de numbers, multiplicado por 10, en
una nueva matriz.
 Si echamos un vistazo a los numbers y bigNumbers:

console.log(numbers); // Output: [1, 2, 3, 4, 5]

console.log(bigNumbers); // Output: [10, 20, 30, 40, 50]

Tenga en cuenta que los elementos de los numbers no se modificaron y bigNumbers

es una nueva matriz.

Ejercicios:
1. Agrega tu código debajo de la matriz de animals y antes de la línea
console.log(secretMessage.join('')); Use .map() para crear una nueva matriz que
contenga el primer carácter de cada cadena en la matriz de animals. Guarde la
nueva matriz en una variable const denominada secretMessage.
2. Use .map() para dividir todos los números en bigNumbers por 100. Guarde los
valores devueltos en una variable declarada con const llamada smallNumbers.
Rspta:
const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus',
'rabbit', 'lion', 'dog'];
const secretMessage = animals.map(animal => animal[0]);
console.log(secretMessage.join(''));
const bigNumbers = [100, 200, 300, 400, 500];
const smallNumbers = bigNumbers.map(function(number){return
number/100});

El método .filter(): Otro método iterador útil es .filter() Al igual que .map()
.filter() devuelve una nueva matriz. Sin embargo, .filter() devuelve una matriz de
elementos después de filtrar ciertos elementos de la matriz original. La función de
devolución de llamada para el método .filter() debería devolver verdadero o falso
según el elemento que se le pase. Los elementos que hacen que la función de
devolución de llamada devuelva verdadero se agregan a la nueva matriz. Echa un
vistazo al siguiente ejemplo:

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door'];

const shortWords = words.filter(word => {

return word.length < 6;
});

 words es una matriz que contiene elementos de cadena.

 const shortWords =declara una nueva variable que almacenará la matriz devuelta
al invocar .filter()
 La función de devolución de llamada es una función de flecha que tiene un solo
parámetro, word. Cada elemento de la matriz de words se pasará a esta función
como un argumento.
 palabra.longitud < 6; es la condición en la función de devolución de llamada.
Cualquier word de la matriz de words que tengan menos de 6 caracteres se
agregará a la matriz shortWords.
Comprobemos también los valores de las words y las shortWords:

console.log(words); // Output: ['chair', 'music', 'pillow', 'brick', 'pen', 'door'];

80
console.log(shortWords); // Output: ['chair', 'music', 'brick', 'pen', 'door']

Observe cómo las palabras no se mutaron, es decir, cambiaron, y shortWords es una

nueva matriz.

Ejercicios:
1. Llame al método .filter() en randomNumbers para devolver valores menores a 250.
Guárdelos en una nueva matriz llamada smallNumbers, declarada con const.
2. Ahora trabajemos con una matriz de cadenas. Invoque .filter() en la matriz de
favoriteWords para devolver elementos que tengan más de 7 caracteres. Guarde la
matriz devuelta en una variable const denominada longFavoriteWords.
Rspta:
const randomNumbers = [375, 200, 3.14, 7, 13, 852];
const smallNumbers = randomNumbers.filter(number => number < 250)
const favoriteWords = ['nostalgia', 'hyperbole', 'fervent', 'esoteric', 'serene'];
const longFavoriteWords = favoriteWords.filter(word => word.length > 7 );

El método .reduce(): Otro método de iteración ampliamente utilizado es

.reduce() El método .reduce() devuelve un único valor después de iterar a través de los
elementos de una matriz, reduciendo así la matriz. Eche un vistazo al siguiente
ejemplo:

const numbers = [1, 2, 4, 10];

const summedNums = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue
})
console.log(summedNums) // Output: 17

Estos son los valores de accumulator y currentValue a medida que iteramos a través
de numbers array

Iteration accumulator currentValue return value

First 1 2 3
Second 3 4 7
Third 7 10 17

Ahora repasemos el uso de .reduce() del ejemplo anterior:

 numbers es una matriz que contiene números.
 summedNums es una variable que almacena el valor devuelto al invocar .reduce()
en numbers.
 numbers.reduce() llama al método .reduce() en la matriz de numbers y toma una
función de devolución de llamada como argumento.
 La función de devolución de llamada tiene dos parámetros, accumulator y
currentValue. El valor del accumulator comienza como el valor del primer elemento
en la matriz y el currentValue comienza como el segundo elemento. Para ver el
valor del accumulator y el cambio de currentValue, revise la tabla anterior.
 A medida que .reduce() itera a través de la matriz, el valor de retorno de la función
de devolución de llamada se convierte en el valor accumulator para la próxima
iteración, currentValue toma el valor del elemento actual en el proceso de bucle.
 El método .reduce() también puede tomar un segundo parámetro opcional para
establecer un valor inicial para el accumulator (recuerde, ¡el primer argumento es
la función de devolución de llamada!). Por ejemplo:

81
const numbers = [1, 2, 4, 10];
const summedNums = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue
}, 100) // <- Second argument for .reduce()
console.log(summedNums); // Output: 117

Aquí hay un gráfico actualizado que representa el segundo argumento de 100:

Iteration # accumulator currentValue return value

First 100 1 101
Second 101 2 103
Third 103 4 107
Fourth 107 10 117

Ejercicios:
1. Practiquemos llamar a .reduce() y usar console.log() para verificar los valores a
medida que .reduce() itera a través de la matriz. Para comenzar, declare una
nueva variable llamada newSum usando la palabra clave const. Asigne a newSum
el valor de llamar a .reduce() en newNumbers. No necesita proporcionar ningún
argumento a .reduce() todavía.
También verá un TypeError: undefined is not a function, ¡pero lo arreglaremos
después de agregar nuestra función de devolución de llamada en el siguiente
paso!
2. Proporcione .reduce con un argumento de una función de devolución de llamada.
La función de devolución de llamada tiene dos parámetros. El primer parámetro es
el acumulador y el segundo parámetro es currentValue. Utilice una expresión de
función o una función de flecha.
3. Para verificar el valor que se está utilizando a medida que iteramos a través de la
matriz, agregue tres declaraciones al cuerpo de la función de la devolución de
llamada:
 console.log('El valor del accumulator r: ', acumulador);
 console.log('El valor de currentValue: ', currentValue);
 una declaración de retorno que agrega un accumulator a currentValue.
4. Registre el valor de newSum en la consola para ver el valor de retorno de llamar a
.reduce() en newNumbers.
5. Mientras tenemos este código configurado, también veamos qué sucede si agrega
un segundo argumento a .reduce(). El segundo argumento actúa como un valor
inicial para el accumulator. Agregue un segundo argumento de 10 a .reduce().
Rspta:
const newNumbers = [1, 3, 5, 7];
const newSum = newNumbers.reduce((accumulator, currentValue) => {
console.log('The value of accumulator: ', accumulator);
console.log('The value of currentValue: ', currentValue);
return accumulator + currentValue;
}, 10);
console.log(newSum);

Documentación del iterador: Hay muchos métodos de matriz

incorporados adicionales, cuya lista completa se encuentra en la página de métodos
de iteración de matriz de MDN https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array#Iteration_methods
La documentación de cada método contiene varias secciones:

82
 Una breve definición.
 Un bloque con la sintaxis correcta para usar el método.
 Una lista de parámetros que el método acepta o requiere.
 El valor de retorno de la función.
 Una descripción extendida.
 Ejemplos de uso del método.
 Otra información adicional.
En las instrucciones a continuación, hay algunos errores en el código. Use la
documentación de un método determinado para determinar el error o complete un
espacio en blanco para que el código se ejecute correctamente.

Ejercicios:
1. En el editor de código, hay una matriz llamada words. Queremos crear una nueva
variedad de palabras interesantes. Lo primero que queremos hacer es verificar si
hay palabras que tienen menos de 6 caracteres. Falta algo en la llamada al método
words.some(). Corrija este método para que true se imprima en la consola.
2. El método .some() devolvió verdadero, lo que significa que hay algunas palabras
en la matriz que tienen menos de seis caracteres. Use el método .filter() para
guardar cualquier palabra de más de 5 caracteres en una nueva variable llamada
interestingWords declarada con const. Usamos .filter() en un ejercicio anterior,
pero, para obtener más información, consulte la documentación de MDN sobre
.filter() .
3. En la última línea de main.js, hay este código:
// console.log(interestingWords.every(word => ))

Complete el código entre paréntesis para verificar si cada elemento tiene más de 5
caracteres. Asegúrese de descomentar (eliminar // antes) la última línea del programa
antes de ejecutar el código. Para obtener más información, consulte la documentación
de .every() en MDN
Rspta:
const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];
// Something is missing in the method call below
console.log(words.some(word => {
return word.length < 6;
}));
// Use filter to create a new array
const interestingWords = words.filter((word) => {return word.length > 5});
// Print: true
// Make sure to uncomment the code below and fix the incorrect code before running it
console.log(interestingWords.every((word) => {return word.length > 5}));

Elija el iterador correcto: Hay muchos métodos de iteración que puede

elegir. Además de aprender la sintaxis correcta para el uso de métodos de iteración,
también es importante aprender a elegir el método correcto para diferentes escenarios.
Verá que aparecen errores en la terminal a medida que realiza este ejercicio, ¡pero al
final los errores desaparecerán!

Ejercicios:
1. Reemplace la palabra method en la primera llamada de método con un método
que hará algo con cada uno de los valores en la matriz y devolverá undefined
2. En la segunda llamada al method, reemplace la palabra método con un método
que devolverá una nueva matriz con solo aquellos elementos de más de 7
caracteres.

83
3. En la tercera llamada al método, reemplace la palabra method con un método que
acepte una matriz que contenga varios valores y devuelva un solo valor.
4. En la cuarta llamada al método, reemplace la palabra method con un método que
devolverá una nueva matriz de números devueltos por la función.
5. En la quinta llamada al método, reemplace la palabra method con un método que
devolverá un valor booleano.

const cities = ['Orlando', 'Dubai', 'Edinburgh', 'Chennai', 'Accra', 'Denver', 'Eskisehir',

'Medellin', 'Yokohama'];
const nums = [1, 50, 75, 200, 350, 525, 1000];
// Choose a method that will return undefined
cities.method(city => console.log('Have you visited ' + city + '?'));
// Choose a method that will return a new array
const longCities = cities.method(city => city.length > 7);
// Choose a method that will return a single value
const word = cities.method((acc, currVal) => {
return acc + currVal[0]
}, "C");
console.log(word)
const word = cities.reduce((acc, currVal) => {
return acc + currVal[0]
}, "C");
console.log(word)
// Choose a method that will return a new array
const smallerNums = nums.method(num => num - 5);
// Choose a method that will return a boolean value
nums.method(num => num < 0);

Rspta:
const cities = ['Orlando', 'Dubai', 'Edinburgh', 'Chennai', 'Accra', 'Denver',
'Eskisehir', 'Medellin', 'Yokohama'];
const nums = [1, 50, 75, 200, 350, 525, 1000];
cities.forEach(city => console.log('Have you visited ' + city + '?'));

const longCities = cities.filter(city => city.length > 7);

const word = cities.reduce((acc, currVal) => {

return acc + currVal[0]
}, "C");
console.log(word)

const smallerNums = nums.map(num => num - 5);

nums.every(num => num < 0);

nums.some(num => num < 0);

Revisión
 .forEach() se usa para ejecutar el mismo código en cada elemento de una matriz,
pero no cambia la matriz y devuelve indefinido.
 .map() ejecuta el mismo código en cada elemento de una matriz y devuelve una
nueva matriz con los elementos actualizados.
 .filter() verifica cada elemento en una matriz para ver si cumple con ciertos criterios
y devuelve una nueva matriz con los elementos que devuelven la verdad para los
criterios.

84
 .findIndex() devuelve el índice del primer elemento de una matriz que cumple una
condición en la función de devolución de llamada. Devuelve -1 si ninguno de los
elementos del arreglo cumple la condición.
 .reduce() itera a través de una matriz y toma los valores de los elementos y
devuelve un solo valor.
 Todos los métodos de iterador toman una función de devolución de llamada, que
puede ser una función predefinida, una expresión de función o una función de
flecha.
 Puede visitar la Red de desarrolladores de Mozilla para obtener más información
sobre los métodos de iteración (¡y todas las demás partes de JavaScript!).

https://github.com/ummahusla/Codecademy-Exercise-
Answers/blob/master/Web%20Developer%20Skills/Introduction%20To%20JavaScript/
Unit%2007%20Iterators/readme.md

85
 Objetos
(Clase 10)
Introducción a los objetos
Solo hay siete tipos de datos fundamentales en JavaScript, y seis de ellos son tipos de
datos primitivos: cadena, número, booleano, nulo, indefinido y símbolo. Con el séptimo
tipo, objetos, abrimos nuestro código a posibilidades más complejas. Podemos usar
objetos de JavaScript para modelar cosas del mundo real, como una pelota de
baloncesto, o podemos usar objetos para construir las estructuras de datos que hacen
posible la web.
En esencia, los objetos de JavaScript son contenedores que almacenan datos y
funcionalidades relacionados, pero esa tarea engañosamente simple es
extremadamente poderosa en la práctica.

El valor de una clave puede ser de cualquier tipo de datos en el idioma, incluidas
funciones u otros objetos.
Hacemos un par clave-valor escribiendo el nombre de la clave, o identificador, seguido
de dos puntos y luego el valor. Separamos cada par clave-valor en un objeto literal con
una coma (,) Las claves son cadenas, pero cuando tenemos una clave que no tiene
caracteres especiales, JavaScript nos permite omitir las comillas:

// An object literal with two key-value pairs

let spaceship = {
'Fuel Type': 'diesel',
color: 'silver'
};

El objeto de la spaceship tiene dos propiedades Fuel Type y color. 'Fuel Type' tiene
comillas porque contiene un carácter de espacio.

86
Ejercicios:
1. La spaceship que tenemos hasta ahora se ve bien pero, desafortunadamente, no
es muy rápida en viajes hiperespaciales debido a que tiene una fuente de
combustible inferior. Cree un nuevo objeto llamado spaceship más rápida con el
mismo color que la nave espacial pero con un Tipo de combustible igual a 'Turbo
Fuel'.
Rspta:
let fasterShip = {
'Fuel Type': 'Turbo Fuel',
color: 'silver'
}

Acceso a propiedades: Hay dos formas de acceder a la propiedad de

un objeto. Exploremos la primera forma: notación de puntos ..
Ha utilizado la notación de puntos para acceder a las propiedades y métodos de
objetos integrados e instancias de datos:

'hello'.length; // Returns 5

Con la notación de punto de propiedad, escribimos el nombre del objeto, seguido del
operador de punto y luego el nombre de la propiedad (clave):

let spaceship = {
homePlanet: 'Earth',
color: 'silver'
};
spaceship.homePlanet; // Returns 'Earth',
spaceship.color; // Returns 'silver',

Si intentamos acceder a una propiedad que no existe en ese objeto, se devolverá

undefined.

spaceship.favoriteIcecream; // Returns undefined

Ejercicios:
1. Usemos el operador punto para acceder al valor de numCrew desde el objeto
spaceship en el editor de código. Cree una variable crewCount y asígnele la
propiedad numCrew de la spaceship
2. De nuevo, usando el operador punto, cree una variable planetArray y asígnele la
propiedad flightPath de la spaceship
let spaceship = {
homePlanet: 'Earth',
color: 'silver',

87
 'Fuel Type': 'Turbo Fuel',
numCrew: 5,
flightPath: ['Venus', 'Mars', 'Saturn']
};
Rspta:
let crewCount = spaceship.numCrew;
let planetArray = spaceship.flightPath;

Notación de corchetes: La segunda forma de acceder al valor de una

clave es usando la notación de corchetes, [ ].
Ha utilizado la notación de corchetes al indexar una matriz:

['A', 'B', 'C'][0]; // Returns 'A'

Para usar la notación de corchetes para acceder a la propiedad de un objeto, pasamos

el nombre de la propiedad (clave) como una cadena.

Debemos usar la notación de corchetes al acceder a teclas que tienen números,

espacios o caracteres especiales. Sin la notación de paréntesis en estas situaciones,
nuestro código generaría un error.

let spaceship = {
'Fuel Type': 'Turbo Fuel',
'Active Duty': true,
homePlanet: 'Earth',
numCrew: 5
};
spaceship['Active Duty']; // Returns true
spaceship['Fuel Type']; // Returns 'Turbo Fuel'
spaceship['numCrew']; // Returns 5
spaceship['!!!!!!!!!!!!!!!']; // Returns undefined

Con la notación de corchetes, también puede usar una variable dentro de los
corchetes para seleccionar las claves de un objeto. Esto puede ser especialmente útil
cuando se trabaja con funciones:

let returnAnyProp = (objectName, propName) => objectName[propName];

returnAnyProp(spaceship, 'homePlanet'); // Returns 'Earth'

Si intentáramos escribir nuestra función returnAnyProp() con notación de puntos

(objectName.propName), la computadora buscaría una clave de 'propName' en
nuestro objeto y no el valor del parámetro propName.

88
Ejercicios:
let spaceship = {
'Fuel Type' : 'Turbo Fuel',
'Active Mission' : true,
homePlanet : 'Earth',
numCrew: 5
};
let propName = 'Active Mission';
1. Usemos la notación de corchetes para acceder al valor de 'Active Mission' desde el
objeto spaceship en el editor de código. Cree una variable isActive y asígnele la
propiedad 'Active Mission' de spaceship
Rspta: let isActive = spaceship['Active Mission'];

2. Utilizando la notación de paréntesis y la variable propName proporcionada,

imprima el console.log() con el valor de la propiedad 'Active Mission'
Rspta: console.log(isActive);

Asignación de propiedad: Una vez que hemos definido un objeto, no

estamos atascados con todas las propiedades que escribimos. ¡Los objetos son
mutables, lo que significa que podemos actualizarlos después de crearlos!

Podemos usar la notación de puntos .. o la notación de corchetes [] y el operador de

asignación = para agregar nuevos pares clave-valor a un objeto o cambiar una
propiedad existente.

Una de dos cosas puede suceder con la asignación de propiedad:

 Si la propiedad ya existe en el objeto, cualquier valor que tuviera antes se
reemplazará con el valor recién asignado.
 Si no había ninguna propiedad con ese nombre, se agregará una nueva propiedad
al objeto.
Es importante saber que aunque no podemos reasignar un objeto declarado con const,
aún podemos mutarlo, lo que significa que podemos agregar nuevas propiedades y
cambiar las propiedades que están allí.

const spaceship = {type: 'shuttle'};

spaceship = {type: 'alien'}; // TypeError: Assignment to constant variable.
spaceship.type = 'alien'; // Changes the value of the type property
spaceship.speed = 'Mach 5'; // Creates a new key of 'speed' with a value of 'Mach
5'

Puede eliminar una propiedad de un objeto con el operador de eliminación delete

const spaceship = {
'Fuel Type': 'Turbo Fuel',
homePlanet: 'Earth',
mission: 'Explore the universe'
};
delete spaceship.mission; // Removes the mission property

89
Ejercicios:
let spaceship = {
'Fuel Type' : 'Turbo Fuel',
homePlanet : 'Earth',
color: 'silver',
'Secret Mission' : 'Discover life outside of Earth.'
};
1. Reasignar la propiedad de color del objeto spaceship para que tenga un valor de
'glorious gold'
Rspta: spaceship.color = 'glorious gold';
2. Sin cambiar las líneas 1 - 6, agregue una propiedad numEngines con un valor
numérico entre 1 y 10 al objeto de la spaceship
Rspta: spaceship.numEngines = 9;
3. Utilice el operador delete para eliminar la propiedad 'Secret Mission' del objeto de
la spaceship
Rspta: delete spaceship['Secret Mission'];

Métodos: Cuando los datos almacenados en un objeto son una función, lo

llamamos método. Una propiedad es lo que tiene un objeto, mientras que un método
es lo que hace un objeto.
¿Los métodos de objetos parecen familiares? ¡Eso es porque los has estado usando
todo el tiempo! Por ejemplo, console es un objeto javascript global y .log() es un
método en ese objeto. Math también es un objeto javascript global y .floor() es un
método en él.
Podemos incluir métodos en nuestros objetos literales mediante la creación de pares
clave-valor ordinarios separados por comas. La clave sirve como el nombre de nuestro
método, mientras que el valor es una expresión de función anónima.

const alienShip = {
invade: function () {
console.log('Hello! We have come to dominate your planet. Instead of Earth, it
shall be called New Xaculon.')
}
};

Con la nueva sintaxis del método introducida en ES6, podemos omitir los dos puntos y
la palabra clave de function

. const alienShip = {
invade () {
console.log('Hello! We have come to dominate your planet. Instead of Earth, it
shall be called New Xaculon.')
}
};

Los métodos de objeto se invocan agregando el nombre del objeto con el operador de
punto seguido del nombre del método y paréntesis:

alienShip.invade(); // Prints 'Hello! We have come to dominate your planet.

Instead of Earth, it shall be called New Xaculon.'

Ejercicios:
let retreatMessage = 'We no longer wish to conquer your planet. It is full of dogs, which
we do not care for.';

90
1. Debajo de la variable retreatMessage en el editor de código, cree un objeto
alienShip. Debe contener un método .retreat() que imprima en console.log() el
mensaje retreatMessage.
Rspta:
let alienShip = {
retreat() {
console.log(retreatMessage)
},
// print: We no longer wish to conquer your planet. It is full of dogs, which we
do not care for.
2. Agregue otro método a su objeto literal. Este método, .takeOff(),console.log() debe
imprimir la cadena 'Spim... Borp... Glix... Blastoff!'
Rspta:
takeOff() {
console.log('Spim... Borp... Glix... Blastoff!')
}
};
//Print: Spim... Borp... Glix... Blastoff!
3. Invoque sus dos métodos: primero .retreat() y luego .takeOff().
Rspta:
alienShip.retreat();
alienShip.takeOff();

Objetos anidados: En el código de la aplicación, los objetos a menudo

están anidados: ¡un objeto puede tener otro objeto como propiedad que a su vez
podría tener una propiedad que es una matriz de incluso más objetos!
En nuestro objeto spaceship, queremos un objeto de tripulación. Este contendrá a
todos los miembros de la tripulación que realizan un trabajo importante en la nave.
Cada uno de esos miembros de la tripulación son objetos en sí mismos. Tienen
propiedades como nombre y grado, y cada uno tiene métodos únicos basados en sus
funciones. También podemos anidar otros objetos en spaceship como un telescope, o
anidar detalles sobre las computadoras de spaceship dentro de un objeto principal
nanoelectronics.

const spaceship = {
telescope: {
yearBuilt: 2018,
model: '91031-XLT',
focalLength: 2032
},
crew: {
captain: {
name: 'Sandra',
degree: 'Computer Engineering',
encourageTeam() { console.log('We got this!') }
}
},
engine: {
model: 'Nimbus2000'
},
nanoelectronics: {
computer: {
terabytes: 100,

91
 monitors: 'HD'
},
'back-up': {
battery: 'Lithium',
terabytes: 50
}
}
};

Podemos encadenar operadores para acceder a propiedades anidadas. Tendremos

que prestar atención a qué operador tiene sentido usar en cada capa. Puede ser útil
fingir que eres la computadora y evaluar cada expresión de izquierda a derecha para
que cada operación comience a sentirse un poco más manejable.

spaceship.nanoelectronics['back-up'].battery; // Returns 'Lithium'

En el código anterior:
 Primero, la computadora evalúa spaceship.nanoelectronics, lo que da como
resultado un objeto que contiene el back-up y los objetos de la computer
 Accedimos al back-up agregando ['back-up'].
 El objeto back-up tiene una propiedad battery, a la que se accede con .battery que
devolvió el valor almacenado allí: 'Lithium'

Ejercicios:
let spaceship = {
passengers: null,
telescope: {
yearBuilt: 2018,
model: "91031-XLT",
focalLength: 2032
},
crew: {
captain: {
name: 'Sandra',
degree: 'Computer Engineering',
encourageTeam() { console.log('We got this!') },
'favorite foods': ['cookies', 'cakes', 'candy', 'spinach'] }
},
engine: {
model: "Nimbus2000"
},
nanoelectronics: {
computer: {
terabytes: 100,
monitors: "HD"
},
'back-up': {
battery: "Lithium",
terabytes: 50
}
}
};

92
1. Cree una variable capFave y asígnele la comida favorita captain (el elemento en el
índice 0 de su matriz de 'favorite foods'). Asegúrese de usar la notación de
corchetes y puntos para obtener el valor de la comida a través del acceso anidado
(¡no se limite a copiar el valor en la variable!)
Rspta: let capFave = spaceship.crew.captain['favorite foods'][0]
2. En este momento, la propiedad de los passengers tiene un valor null. En su lugar,
asigne como su valor una matriz de objetos. Estos objetos deben representar a los
pasajeros de la spaceship como objetos individuales. Cree al menos un objeto
pasajero en la matriz que tenga al menos un par clave-valor.
Rspta: spaceship.passengers = [{name: 'Space Dog'}]
3. Cree una variable firstPassenger y asigne el primer pasajero como su valor (el
elemento en el índice 0 de la matriz spaceship.passengers que acaba de crear).
Asegúrese de usar la notación de corchetes y puntos para obtener el objeto del
pasajero a través del acceso anidado (¡no solo copie el objeto en la variable!)
Rspta: let firstPassenger = spaceship.passengers[0]

Pasar por referencia: Los objetos se pasan por referencia. Esto significa
que cuando pasamos una variable asignada a un objeto a una función como
argumento, la computadora interpreta el nombre del parámetro como apuntando al
espacio en la memoria que contiene ese objeto. Como resultado, las funciones que
cambian las propiedades del objeto en realidad mutan el objeto de forma permanente
(incluso cuando el objeto se asigna a una variable const).

const spaceship = {
homePlanet : 'Earth',
color : 'silver'
};
let paintIt = obj => {
obj.color = 'glorious gold'
};
paintIt(spaceship);
spaceship.color // Returns 'glorious gold'

Nuestra función paintIt() cambió permanentemente el color de nuestro objeto

spaceship Sin embargo, la reasignación de la variable spaceship no funcionaría de la
misma manera:

let spaceship = {
homePlanet : 'Earth',
color : 'red'
};
let tryReassignment = obj => {
obj = {
identified : false,
'transport type' : 'flying'
}
console.log(obj) // Prints {'identified': false, 'transport type': 'flying'}
};
tryReassignment(spaceship) // The attempt at reassignment does not work.
spaceship // Still returns {homePlanet : 'Earth', color : 'red'};
spaceship = {
identified : false,
'transport type': 'flying'
}; // Regular reassignment still works.

93
Veamos lo que sucedió en el ejemplo del código:
 Declaramos este objeto spaceship con let. Esto nos permitió reasignarlo a un
nuevo objeto con propiedades identified y de 'transport type' sin problemas.
 Cuando intentamos lo mismo con una función diseñada para reasignar el objeto
que se le pasó, la reasignación no funcionó (aunque llamar a console.log() en el
objeto produjo el resultado esperado).
 Cuando pasamos spaceship a esa función, obj se convirtió en una referencia a la
ubicación de memoria del objeto spaceship, pero no a la variable spaceship. Esto
se debe a que el parámetro obj de la función tryReassignment() es una variable
por derecho propio. El cuerpo de tryReassignment() no tiene ningún conocimiento
de la variable spaceship
 Cuando hicimos la reasignación en el cuerpo de tryReassignment(), la variable obj
pasó a referirse a la ubicación de memoria del objeto {'identified': false, 'transport
type': 'flying'}, mientras que la variable spaceship permaneció sin cambios de su
valor anterior.

Ejercicios:
let spaceship = {
'Fuel Type' : 'Turbo Fuel',
homePlanet : 'Earth'
};
1. Escriba una función greenEnergy() que tenga un objeto como parámetro y
establezca la propiedad 'Fuel Type' de ese objeto en 'avocado oil'.
Rspta:
let greenEnergy = spaceship => {
spaceship['Fuel Type'] = 'avocado oil';
};
2. Escriba una función de forma remotaDisable() que tenga un objeto como
parámetro y establezca (o reasigne) la propiedad disabled de ese objeto en true.
Rspta:
let remotelyDisable = (spaceship) => {
spaceship.disabled = true
}
greenEnergy(spaceship)
remotelyDisable(spaceship)
3. Llame a sus dos funciones con el objeto de la nave espacial en el editor de código,
luego console.log() el objeto de spaceship para confirmar que esas propiedades se
cambiaron/agregaron.
Rspta: console.log(spaceship)
// print: { 'Fuel Type': 'avocado oil',
homePlanet: 'Earth',
disabled: true }

Bucle a través de objetos: Los bucles son herramientas de

programación que repiten un bloque de código hasta que se cumple una condición.
Aprendimos a iterar a través de matrices utilizando su indexación numérica, ¡pero los
pares clave-valor en los objetos no están ordenados! JavaScript nos ha dado una
solución alternativa para iterar a través de objetos con la sintaxis for...in.
for...in ejecutará un bloque de código dado para cada propiedad en un objeto.

let spaceship = {
crew: {
captain: {
name: 'Lily',

94
 degree: 'Computer Engineering',
cheerTeam() { console.log('You got this!') }
},
'chief officer': {
name: 'Dan',
degree: 'Aerospace Engineering',
agree() { console.log('I agree, captain!') }
},
medic: {
name: 'Clementine',
degree: 'Physics',
announce() { console.log(`Jets on!`) } },
translator: {
name: 'Shauna',
degree: 'Conservation Science',
powerFuel() { console.log('The tank is full!') }
}
}
};

// for...in
for (let crewMember in spaceship.crew) {
console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}

Nuestro for...in iterará a través de cada elemento del objeto spaceship.crew. En cada
iteración, la variable crewMember se establece en una de las claves de
spaceship.crew, lo que nos permite registrar una lista de funciones y nombres de los
miembros de la tripulación.

Ejercicios:
let spaceship = {
crew: {
captain: {
name: 'Lily',
degree: 'Computer Engineering',
cheerTeam() { console.log('You got this!') }
},
'chief officer': {
name: 'Dan',
degree: 'Aerospace Engineering',
agree() { console.log('I agree, captain!') }
},
medic: {
name: 'Clementine',
degree: 'Physics',
announce() { console.log(`Jets on!`) } },
translator: {
name: 'Shauna',
degree: 'Conservation Science',
powerFuel() { console.log('The tank is full!') }
}
}
};

95
1. Usando for...in, itere a través del objeto spaceship.crew en el editor de código y
console.log() una lista de funciones y nombres de la tripulación en el siguiente
formato: '[crew member's role]: [crew member's name]', e.g.,'chief officer: Dan'.
Rspta:
for( let crewname in spaceship.crew){
console.log(`${crewname}: ${spaceship.crew[crewname].name}`)
}
// Print:
captain: Lily
chief officer: Dan
medic: Clementine
translator: Shauna
Lily: Computer Engineering
Dan: Aerospace Engineering
Clementine: Physics
Shauna: Conservation Science
2. Usando for...in, itere a través del objeto spaceship.crew en el editor de código y
console.log() una lista de nombres y grados de la tripulación en el siguiente
formato: '[crew member's name]: [crew member's degree]', i.e.,'Lily: Computer
Engineering'.
Rspta:
for(let crewdegree in spaceship.crew){
console.log(`${spaceship.crew[crewdegree].name}:
${spaceship.crew[crewdegree].degree}`)
}
//Print:
captain: Lily
chief officer: Dan
medic: Clementine
translator: Shauna
Lily: Computer Engineering
Dan: Aerospace Engineering
Clementine: Physics
Shauna: Conservation Science

Revisión
 Los objetos almacenan colecciones de pares clave-valor.
 Cada par clave-valor es una propiedad; cuando una propiedad es una función,
se conoce como método.
 Un objeto literal se compone de pares clave-valor separados por comas
rodeados por llaves.
 Puede acceder, agregar o editar una propiedad dentro de un objeto mediante la
notación de puntos o la notación de corchetes.
 Podemos agregar métodos a nuestros objetos literales usando la sintaxis de
clave-valor con expresiones de funciones anónimas como valores o usando la
nueva sintaxis de métodos ES6.
 Podemos navegar por objetos anidados complejos encadenando operadores.
 Los objetos son mutables: podemos cambiar sus propiedades incluso cuando
se declaran con const.
 Los objetos se pasan por referencia: cuando hacemos cambios en un objeto
que se pasa a una función, esos cambios son permanentes.
 Podemos iterar a través de objetos usando la sintaxis For...in.

96
 Objetos Avanzados
(Clase 10)
La palabra clave this: Los objetos son colecciones de datos y
funcionalidad relacionados. Almacenamos esa funcionalidad en métodos en nuestros
objetos:

const goat = {
dietType: 'herbivore',
makeSound() {
console.log('baaa');
}
};

En nuestro objeto goat tenemos un método .makeSound(). Podemos invocar el

método .makeSound() en la goat

goat.makeSound(); // Prints baaa

Bien, tenemos un objeto goat que puede imprimir baaa en la consola. Todo parece
estar funcionando bien. ¿Qué pasaría si quisiéramos agregar un nuevo método a
nuestro objeto goat llamado .diet() que imprima el dietType de goat?

const goat = {
dietType: 'herbivore',
makeSound() {
console.log('baaa');
},
diet() {
console.log(dietType);
}
};
goat.diet();
// Output will be "ReferenceError: dietType is not defined"

Eso es extraño, ¿por qué dietType no está definido a pesar de que es una propiedad
de goat? Eso es porque dentro del alcance del método .diet(), no tenemos acceso
automáticamente a otras propiedades del objeto goat
Aquí es donde esta palabra clave viene al rescate. Si cambiamos el método .diet()
para usar this , .diet() funciona! :

const goat = {
dietType: 'herbivore',
makeSound() {
console.log('baaa');
},
diet() {
console.log(this.dietType);
}
};

97
goat.diet();
// Output: herbivore

La palabra clave this hace referencia al objeto que llama que proporciona acceso a las
propiedades del objeto que llama. En el ejemplo anterior, el objeto que llama es goat y
al usar esto estamos accediendo al objeto goat en sí, y luego a la propiedad dietType
de goat usando la notación de punto de propiedad.

Ejercicios:
1. vamos a crear un nuevo objeto para practicar usando esto. En main.js hay un
objeto robot, agregue una propiedad de model y asígnele un valor de '1E78V2'.
Agregue otra propiedad, energyLevel y asígnele un valor de 100.
2. Dentro del objeto robot, agregue un método llamado provideInfo. Dentro del cuerpo
de provideInfo(), devuelve la siguiente cadena mediante interpolación:
I am MODEL and my current energy level is ENERGYLEVEL.
Reemplace 'MODEL' y 'ENERGYLEVEL' con el model del objeto que llama y la
propiedad energyLevel. Recuerde, para obtener acceso a las propiedades del
objeto que llama dentro de un método, ¡debe usar la palabra clave this!
3. Ahora para comprobar que .provideInfo() tiene acceso a las propiedades internas
del robot. Registre el resultado de llamar al método .provideInfo() en el robot a la
consola.
Rspta:
const robot = {
model: '1E78V2',
energyLevel: 100,
provideInfo (){
return `I am ${this.model} and my current energy level is
${this.energyLevel}.`
}
};
console.log(robot.provideInfo())

Funciones de flecha y métodos: Vimos en el ejercicio anterior que

para un método, el objeto que llama es el objeto al que pertenece el método. Si
usamos la palabra clave this en un método, entonces el valor de this es el objeto que
llama. Sin embargo, se vuelve un poco más complicado cuando comenzamos a usar
funciones de flecha para los métodos. Eche un vistazo al siguiente ejemplo:

const goat = {
dietType: 'herbivore',
makeSound() {
console.log('baaa');
},
diet: () => {
console.log(this.dietType);
}
};

goat.diet(); // Prints undefined

En el comentario, puede ver que la goat.diet() se registraría undefined. ¿Entonces qué

pasó? Tenga en cuenta que el método .diet() se define mediante una función de
flecha.

98
Las funciones de flecha inherentemente unen, o atan, un valor ya definido a la función
en sí que NO es el objeto que llama. En el fragmento de código anterior, el valor de
this es el objeto global, o un objeto que existe en el ámbito global, que no tiene una
propiedad dietType y, por lo tanto, devuelve undefined.
Para leer más sobre las funciones de flecha o el objeto global, consulte la
documentación de MDN sobre el objeto global https://developer.mozilla.org/en-
US/docs/Glossary/Global_object y las funciones de flecha
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Ejercicio:
const robot = {
energyLevel: 100,
checkEnergy: () => {
console.log(`Energy is currently at ${this.energyLevel}%.`)
}
}
robot.checkEnergy();
1. Actualmente, el método .checkEnergy() no produce la salida correcta porque usa la
sintaxis de la función de flecha. Refactorice, o cambie, el método para usar una
expresión de función. Puede escribir la función utilizando el formato abreviado o
abreviado. Después de refactorizar el método, observe que .checkEnergy() tiene
acceso a las demás propiedades internas del objeto robot.
Rspta:
const robot = {
energyLevel: 100,
checkEnergy() {
console.log(`Energy is currently at ${this.energyLevel}%.`)
}
}
robot.checkEnergy(); // Print: Energy is currently at 100%.

Privacidad: Acceder y actualizar las propiedades es fundamental para trabajar

con objetos. Sin embargo, hay casos en los que no queremos que otro código
simplemente acceda y actualice las propiedades de un objeto. Cuando discutimos la
privacidad en los objetos, la definimos como la idea de que solo ciertas propiedades
deberían ser mutables o capaces de cambiar de valor.
Ciertos lenguajes tienen privacidad incorporada para los objetos, pero JavaScript no
tiene esta función. Más bien, los desarrolladores de JavaScript siguen convenciones
de nomenclatura que indican a otros desarrolladores cómo interactuar con una
propiedad. Una convención común es colocar un guión bajo _ antes del nombre de
una propiedad para indicar que la propiedad no debe modificarse. Aquí hay un ejemplo
del uso de _ para anteponer una propiedad.

const bankAccount = {
_amount: 1000
}

En el ejemplo anterior, _amount no está destinado a ser manipulado directamente.

Aun así, todavía es posible reasignar _amount:

99
 bankAccount._amount = 1000000;

Ejercicios:
const robot = {
_energyLevel: 100,
recharge(){
this._energyLevel += 30;
console.log(`Recharged! Energy is currently at ${this._energyLevel}%.`)
}
};
1. Debajo del objeto robot, reasigne la propiedad _energyLevel a 'high'
Rspta: robot._energyLevel='high'
2. Ahora eche un vistazo al nuevo método de recarga en robot. .recharge() agregará
30 a _energyLevel. ¿Qué pasará ahora que _energyLevel no es un número?
Llame a .recharge() en el robot para averiguarlo.
Rspta: robot.recharge()
// Print: Recharged! Energy is currently at high30%.

Captadores Getters: Los captadores son métodos que obtienen y

devuelven las propiedades internas de un objeto. ¡Pero pueden hacer más que
simplemente recuperar el valor de una propiedad! Echemos un vistazo a un método
getter:

const person = {
_firstName: 'John',
_lastName: 'Doe',
get fullName() {
if (this._firstName && this._lastName){
return `${this._firstName} ${this._lastName}`;
} else {
return 'Missing a first name or a last name.';
}
}
}

// To call the getter method:

person.fullName; // 'John Doe'

Observe que en el método getter anterior:

 Usamos la palabra clave get seguida de una función.

 Usamos un condicional if...else para verificar si tanto _firstName como _lastName
existen (asegurándonos de que ambos devuelvan valores verdaderos) y luego
devuelvan un valor diferente dependiendo del resultado.
 Podemos acceder a las propiedades internas del objeto que llama usando esto. En
fullName, estamos accediendo tanto a this._firstName como a this._lastName.
 En la última línea llamamos fullName on person. En general, no es necesario
llamar a los métodos getter con un conjunto de paréntesis. Sintácticamente, parece
que estamos accediendo a una propiedad.
Ahora que hemos repasado la sintaxis, analicemos algunas ventajas notables de usar
métodos getter:

 Los captadores pueden realizar una acción en los datos al obtener una propiedad.

100
 Los captadores pueden devolver diferentes valores usando condicionales.
 En un getter, podemos acceder a las propiedades del objeto que llama usando
this.
 La funcionalidad de nuestro código es más fácil de entender para otros
desarrolladores.

Otra cosa a tener en cuenta cuando se utilizan métodos getter (y setter) es que las
propiedades no pueden compartir el mismo nombre que la función getter/setter. Si lo
hacemos, llamar al método dará como resultado un error de pila de llamadas infinito.
Una solución consiste en agregar un guión bajo antes del nombre de la propiedad,
como hicimos en el ejemplo anterior.

Ejercicios:
const robot = {
_model: '1E78V2',
_energyLevel: 100,
};
1. En robot, cree un método getter llamado energyLevel utilizando la palabra clave
get. Deje el cuerpo de la función en blanco por ahora.
2. Dentro del método getter, agregue una declaración if para verificar si
this._energyLevel es un número usando el operador typeof. Si esa condición es
cierta, devuelve 'My current energy level is ENERGYLEVEL'. Reemplace
ENERGYLEVEL con el valor de this._energyLevel.
3. Si this._energyLevel no es un número, podría ser que la propiedad _energyLevel
se haya alterado. Agreguemos una declaración de devolución predeterminada para
cuando surja tal escenario. Agregue una instrucción else que devuelva 'System
malfunction: cannot retrieve energy level'.
4. Registre el resultado de llamar al método getter energyLevel en el robot en la
consola. ¡Observe que el método devolverá una respuesta formateada en lugar de
solo acceder a una propiedad!
Rspta:
const robot = {
_model: '1E78V2',
_energyLevel: 100,
get energyLevel(){
if(typeof this._energyLevel === 'number') {
return 'My current energy level is ' + this._energyLevel
} else {
return "System malfunction: cannot retrieve energy level"
}
}
};
console.log(robot.energyLevel);
// Print: My current energy level is 100

Establecimiento Setters: Junto con los métodos getter, también

podemos crear métodos setter que reasignan valores de propiedades existentes
dentro de un objeto. Veamos un ejemplo de un método setter:

const person = {
_age: 37,
set age(newAge){
if (typeof newAge === 'number'){

101
 this._age = newAge;
} else {
console.log('You must assign a number to age');
}
}
};

Observe que en el ejemplo anterior:

 Podemos realizar una verificación de qué valor se asigna a this._age.

 Cuando usamos el método setter, solo los valores que son números reasignarán
this._age
 Hay diferentes salidas según los valores que se utilicen para reasignar this._age.

Luego, para usar el método setter:

person.age = 40;
console.log(person._age); // Logs: 40
person.age = '40'; // Logs: You must assign a number to age

Los métodos de establecimiento como la edad no necesitan llamarse con un conjunto

de paréntesis. Sintácticamente, parece que estamos reasignando el valor de una
propiedad.
Al igual que los métodos getter, existen ventajas similares al usar métodos setter que
incluyen verificar la entrada, realizar acciones en las propiedades y mostrar una
intención clara de cómo se supone que se debe usar el objeto. No obstante, incluso
con un método setter, todavía es posible reasignar propiedades directamente. Por
ejemplo, en el ejemplo anterior, aún podemos configurar ._age directamente:

person._age = 'forty-five'
console.log(person._age); // Prints forty-five

Ejercicios:
1. Actualmente, en robot hay un método getter para numOfSensors pero no un
método setter. ¿Qué pasa si necesitamos agregar o quitar algunos sensores?
Solucionemos ese problema. Agregue un método setter llamado numOfSensors
usando la palabra clave set. Proporcione un parámetro de num. Deje el cuerpo de
la función vacío por ahora.
2. Hay un par de cosas que debemos hacer en el método setter:
 Agregue una verificación para ver si num es un número usando el operador
typeof.
 num también debe ser mayor o igual a 0.
 Si se cumplen ambas condiciones, reasignar this._numOfSensors a num.
3. Ahora agregue un else que registre 'Pass in a number that is greater than or equal
to 0' a la consola.
4. Utilice el método de establecimiento numOfSensors en el robot para asignar
_numOfSensors a 100.
5. Para comprobar que el método setter funcionó, console.log() robot.numOfSensors.
Rspta:
const robot = {
_model: '1E78V2',
_energyLevel: 100,
_numOfSensors: 15,

102
 get numOfSensors(){
if(typeof this._numOfSensors === 'number'){
return this._numOfSensors;
} else {
return 'Sensors are currently down.'
}
},
set numOfSensors(num){
if (typeof num === 'number' && num >= 0){
this._numOfSensors = num;
}else {
console.log('Pass in a number that is greater than or equal to 0')
}
}
};
robot.numOfSensors = 100
console.log(robot.numOfSensors)

Funciones de Factory: Hasta ahora hemos estado creando objetos

individualmente, pero hay ocasiones en las que queremos crear muchas instancias de
un objeto rápidamente. Aquí es donde entran las funciones de fábrica. Una fábrica del
mundo real fabrica múltiples copias de un artículo rápidamente y a gran escala. Una
función de fábrica es una función que devuelve un objeto y se puede reutilizar para
crear múltiples instancias de objetos. Las funciones de fábrica también pueden tener
parámetros que nos permitan personalizar el objeto que se devuelve.
Digamos que queríamos crear un objeto para representar monstruos en JavaScript.
Hay muchos tipos diferentes de monstruos y podríamos hacer cada monstruo
individualmente, pero también podemos usar una función de fábrica para hacernos la
vida más fácil. Para lograr este plan diabólico de crear múltiples objetos monstruos,
podemos usar una función de fábrica que tiene parámetros:

const monsterFactory = (name, age, energySource, catchPhrase) => {

return {
name: name,
age: age,
energySource: energySource,
scare() {
console.log(catchPhrase);
}
}
};

En la función monsterFactory anterior, tiene cuatro parámetros y devuelve un objeto

que tiene las propiedades: name, age, energySource, y scare(). Para hacer un objeto
que represente un monstruo específico como un fantasma, podemos llamar a
monsterFactory con los argumentos necesarios y asignar el valor devuelto a una
variable:

const ghost = monsterFactory('Ghouly', 251, 'ectoplasm', 'BOO!');

ghost.scare(); // 'BOO!'

Ahora tenemos un objeto fantasma como resultado de llamar a monsterFactory() con

los argumentos necesarios. Con monsterFactory en su lugar, no tenemos que crear un

103
objeto literal cada vez que necesitamos un nuevo monstruo. En su lugar, podemos
invocar la función monsterFactory con los argumentos necesarios para dominar el
mundo y crear un monstruo para nosotros.

Ejercicios:
1. En lugar de hacer robots individuales como lo hemos estado haciendo, ¡hagamos
una función de fábrica para hacer robots como queramos!. Cree una función de
fábrica llamada robotFactory que tenga dos parámetros model y mobile. Haz que la
función devuelva un objeto. En el objeto, agregue una clave de model con el valor
del parámetro del model. Agregue otra propiedad que tenga una clave de mobile
con un valor del parámetro mobile. Luego agregue un método llamado beep sin un
parámetro que registrará 'Beep Boop' en la consola.
2. Use su función de fábrica declarando una variable const llamada tinCan. Asigne a
tinCan el valor de llamar a robotFactory con el primer argumento de 'P-500' y el
segundo argumento de verdadero.
3. ¡Veamos ahora qué puede hacer tinCan! Llame a .beep() en tinCan.
¡Debería ver 'Beep Boop' impreso en la consola, lo que significa que la función de
fábrica produjo un objeto robot! ¡Juega con tinCan para comprobar las otras
propiedades!
Rspta:
var robotFactory =(model,mobile) =>{
return{
model:model,
mobile:mobile,
beep(){
console.log('Beep Boop')
}
}
}
const tinCan = robotFactory ('P-500' , true)
tinCan.beep()
// print: Beep Boop

Propiedad Value Shorthand: ES6 introdujo algunos atajos nuevos

para asignar propiedades a las variables conocidas como desestructuración.
En el ejercicio anterior, creamos una función de fábrica que nos ayudó a crear objetos.
Tuvimos que asignar a cada propiedad una clave y un valor a pesar de que el nombre
de la clave era el mismo que el nombre del parámetro que le asignamos. Para
recordarnos, aquí hay una versión truncada de la función de fábrica:

const monsterFactory = (name, age) => {

return {
name: name,
age: age
}
};

Imagínese si tuviéramos que incluir más propiedades, ¡ese proceso se volvería

rápidamente tedioso! Pero podemos usar una técnica de desestructuración, llamada
taquigrafía de valor de propiedad, para ahorrarnos algunas pulsaciones de teclas. El
siguiente ejemplo funciona exactamente como el ejemplo anterior:

104
const monsterFactory = (name, age) => {
return {
name,
age
}
};

Ejercicio:
function robotFactory(model, mobile){
return {
model: model,
mobile: mobile,
beep() {
console.log('Beep Boop');
}
}
}

// To check that the property value shorthand technique worked:

const newRobot = robotFactory('P-501', false)
console.log(newRobot.model)
console.log(newRobot.mobile)

1. Use la propiedad value y refactorice la función de fábrica en main.js

Rspta:
function robotFactory(model, mobile){
return {
model,
mobile,
beep() {
console.log('Beep Boop');
}
}
}
// To check that the property value shorthand technique worked:
const newRobot = robotFactory('P-501', false)
console.log(newRobot.model)
console.log(newRobot.mobile)
// Print:
P-501
False

Asignación desestructurada: A menudo queremos extraer pares

clave-valor de los objetos y guardarlos como variables. Tomemos por ejemplo el
siguiente objeto:

const vampire = {
name: 'Dracula',
residence: 'Transylvania',
preferences: {
day: 'stay inside',
night: 'satisfy appetite'
}
};

105
Si quisiéramos extraer la propiedad de residence como variable, podríamos usar el
siguiente código:

const residence = vampire.residence;

console.log(residence); // Prints 'Transylvania'

Sin embargo, también podemos aprovechar una técnica de desestructuración llamada

asignación desestructurada para ahorrarnos algunas pulsaciones de teclas. En la
asignación desestructurada, creamos una variable con el nombre de la clave de un
objeto que está entre llaves { } y le asignamos el objeto. Eche un vistazo al siguiente
ejemplo:

const { residence } = vampire;

console.log(residence); // Prints 'Transylvania'

Vuelva a mirar las propiedades del objeto vampire en el primer ejemplo de código.
Luego, en el ejemplo anterior, declaramos una nueva residence variable que extrae el
valor de la propiedad de residence del vampire. Cuando registramos el valor de
residence en la consola, se imprime 'Transylvania'
Incluso podemos usar la asignación desestructurada para obtener propiedades
anidadas de un objeto:

const { day } = vampire.preferences;

console.log(day); // Prints 'stay inside'

Ejercicios:
const robot = {
model: '1E78V2',
energyLevel: 100,
functionality: {
beep() {
console.log('Beep Boop');
},
fireLaser() {
console.log('Pew Pew');
},
}
};

1. Utilice la asignación desestructurada para crear una variable const denominada

functionality que extraiga la propiedad de functionalitydel robot.
Rspta: const{functionality} = robot
2. Dado que la functionality hace referencia a robot.functionality, podemos llamar a
los métodos disponibles para robot.functionality simplemente a través de
functionality. Aproveche este atajo y llame al método .beep() con la functionality
Rspta: functionality.beep();

Métodos de objetos incorporados En los ejercicios anteriores

hemos estado creando instancias de objetos que tienen sus propios métodos. ¡Pero
también podemos aprovechar los métodos integrados para Objetos!
Por ejemplo, tenemos acceso a métodos de instancias de objetos como:
.hasOwnProperty(), .valueOf(), ¡y muchos más! Practique sus habilidades de lectura
de documentación y consulte: Documentación de instancias de objetos de MDN.

106
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods
También hay métodos de clase de objeto útiles, como Object.assign(), Object.entries()
y Object.keys(), solo por nombrar algunos. Para obtener una lista completa, busque:
Documentación de instancias de objetos de MDN https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods_of_the_Object_c
onstructor
Conozcamos algunos de estos métodos y su documentación.

Nota: Verá errores a medida que avanza en este ejercicio, ¡pero al final los errores se
corregirán!

Ejercicios:
const robot = {
model: 'SAL-1000',
mobile: true,
sentient: false,
armor: 'Steel-plated',
energyLevel: 75
};
// What is missing in the following method call?
const robotKeys = Object.keys();
console.log(robotKeys);
// Declare robotEntries below this line:
console.log(robotEntries);
// Declare newRobot below this line:
console.log(newRobot);

1. En main.js hay un objeto, robot. Nos gustaría tomar los nombres de las
propiedades, también conocidas como claves, y guardar las claves en una matriz
que se asigna a robotKeys. Sin embargo, falta algo en la llamada al método.
Descubra lo que tenemos que incluir leyendo la documentación de Object.keys()
de MDN https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
2. Object.entries() también devolverá una matriz, pero la matriz contendrá más
matrices que tienen tanto la clave como el valor de las propiedades en un objeto.
Declare una variable const llamada robotEntries y asígnele las entradas de robot
llamando a Object.entries().
Para encontrar cómo usar Object.entries(), lea la documentación en MDN
3. Ahora, ¿qué pasa si queremos otro objeto que tenga las propiedades de robot pero
con algunas propiedades adicionales? Object.assign() suena como un gran
método para usar, pero al igual que los ejemplos anteriores, debemos consultar la
documentación de Object.assign() en MDN.
Declare una variable const llamada newRobot. newRobot será un nuevo objeto
que tiene todas las propiedades de robot y las propiedades del siguiente objeto:
{laserBlaster: true, voiceRecognition: true}¡Asegúrese de no cambiar el objeto del
robot!
Rspta:
const robot = {
model: 'SAL-1000',
mobile: true,
sentient: false,
armor: 'Steel-plated',
energyLevel: 75
};

107
 // What is missing in the following method call?
const robotKeys = Object.keys(robot);
console.log(robotKeys);
// Declare robotEntries below this line:
const robotEntries = Object.entries(robot)
console.log(robotEntries);
// Declare newRobot below this line:
const newRobot = Object.assign({
laserBlaster: true,
voiceRecognition: true
},robot)
console.log(newRobot);
//Print:
[ 'model', 'mobile', 'sentient', 'armor', 'energyLevel' ]
[ [ 'model', 'SAL-1000' ],
[ 'mobile', true ],
[ 'sentient', false ],
[ 'armor', 'Steel-plated' ],
[ 'energyLevel', 75 ] ]
{ laserBlaster: true,
voiceRecognition: true,
model: 'SAL-1000',
mobile: true,
sentient: false,
armor: 'Steel-plated',
energyLevel: 75 }

Revisar
 El objeto al que pertenece un método se denomina objeto invocador.
 La palabra clave this se refiere al objeto que llama y se puede usar para acceder a
las propiedades del objeto que llama.
 Los métodos no tienen acceso automáticamente a otras propiedades internas del
objeto que llama.
 El valor de this depende de desde dónde se acceda a this.
 No podemos usar funciones de flecha como métodos si queremos acceder a otras
propiedades internas.
 Los objetos de JavaScript no tienen privacidad incorporada, sino que hay
convenciones a seguir para notificar a otros desarrolladores sobre la intención del
código.
 El uso de un guión bajo antes del nombre de una propiedad significa que el
desarrollador original no tenía la intención de cambiar esa propiedad directamente.
 Los métodos setter y getter permiten formas más detalladas de acceder y asignar
propiedades.
 Las funciones de fábrica nos permiten crear instancias de objetos de forma rápida
y repetida.
 Hay diferentes formas de usar la desestructuración de objetos: una forma es la
forma abreviada del valor de propiedad y otra es la asignación desestructurada.
 Como con cualquier concepto, ¡es una buena habilidad aprender a usar la
documentación con objetos!

108