Вы находитесь на странице: 1из 27

CURSO DE JavaScript

Introducción
JavaScript es un lenguaje de programación basado en la
web ampliamente utilizado que impulsa el comportamiento
dinámico en la mayoría de los sitios web, incluido este.
Consola
Antes de aprender sobre tipos de datos y métodos, necesita
saber cómo imprimir valores en la consola. La consola es
una herramienta que los desarrolladores utilizan para
registrar la salida de sus programas de JavaScript.
El console.log() comando se usa para imprimir o registrar
el texto en la consola.
Ejemplo: console.log ("The Devil Wears Prada");
denotamos el final de la línea con un punto y coma. Aunque su código normalmente se
ejecutará según lo previsto sin un punto y coma, lo mejor es incluir uno para asegurarse de
que su código funcione como se espera en situaciones en las que lo necesita.
Tipos de datos
Los tipos de datos son los componentes básicos de todos los idiomas y piezas esenciales de
cualquier programa.
A continuación se muestran ejemplos de cuatro tipos de datos primitivos que sientan las
bases para todos los programas de JavaScript. Los tipos de datos primitivos, como su
nombre lo indica, son las formas de datos integradas más simples.
console.log('New York City');
console.log(40.7);
console.log(true);
console.log(null);
En el ejemplo anterior, la computadora registra cada uno de los cuatro tipos de datos
primitivos en la consola. Los tipos incluyen:

 Cadenas : cualquier agrupación de caracteres de teclado (letras, espacios, números o


símbolos) rodeada de comillas simples ( 'Hello') o comillas dobles
( "World!"). En el ejemplo anterior, 'New York City'es una cadena.
 Números - Cualquier número, incluidos los números con
decimales: 4, 1516, .002, 23.42. En el ejemplo anterior, 40.7es un número.
 Booleanos - Cualquiera true o false, sin citas. En el ejemplo anterior, true es
un booleano.
 Null - sólo puede ser null. Representa la ausencia de valor.
Repasemos: una cadena es cualquier agrupación de palabras, un número es un
número, nulo es la ausencia de valor y un booleano es un disfraz fantasmal de
Halloween. O no, eso es falso! Es verdadero o falso.

Operadores matemáticos
¡No te preocupes! Las matemáticas no necesitan ser su fuerte para aprender JavaScript. Sin
embargo, hay operadores que necesitará saber para crear programas útiles.
JavaScript es compatible con los siguientes operadores matemáticos :
1. Añadir: +
2. Sustraer: -
3. Multiplicar: *
4. Dividir: /

Todos estos funcionan como puedes adivinar:


console.log(3 + 4); // Equals 7
console.log(5 - 1); // Equals 4
console.log(4 * 2); // Equals 8
console.log(9 / 3); // Equals 3
Propiedades
Cuando introduce una nueva información en un programa de JavaScript, el navegador la
guarda como una instancia del tipo de datos. Una instancia es un caso individual (u objeto)
de un tipo de datos.
JavaScript guardará una nueva información 'Hello', como una instancia de cadena en la
memoria de la computadora. Otro ejemplo, el número 40.7, se almacena como una
instancia del tipo de datos numéricos.
Una instancia, como la cadena 'Hello', tiene información adicional adjunta.
Por ejemplo, cada instancia de cadena tiene una propiedad llamada lengthque almacena el
número de caracteres en ella. Puede recuperar la información de la propiedad al agregar la
cadena con un punto y el nombre de la propiedad:
console.log('Hello'.length);
En el ejemplo anterior, el valor guardado en la length propiedad se recupera de la
cadena, 'Hello'. El programa se imprime 5 en la consola, porque Hello tiene
cinco caracteres.

Métodos incorporados
Si bien la longitud de una cadena se calcula cuando se crea una instancia, una instancia de
cadena también tiene métodos que calculan nueva información según sea necesario. Cuando
se invocan estos métodos incorporados en una instancia, realizan acciones que generan un
resultado.
Los métodos incorporados se llaman o se usan al agregar una instancia con un punto, el
nombre del método y los paréntesis de apertura ( () y cierre ( )). Considera los ejemplos a
continuación:
console.log('Hello'.toUpperCase()); // 'HELLO'
console.log('Hey'.startsWith('H')); // true

Miremos cada línea por separado:


 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 una entrada entre
los paréntesis de apertura y cierre. Como la cadena 'Hey' comienza con la letra 'H',
el método devuelve el booleano true.
Bibliotecas
Los métodos de instancia, por definición, requieren que cree una instancia antes de poder
usarlos. ¿Qué sucede si quiere llamar a un método sin una instancia? Ahí es donde entran
las bibliotecas de JavaScript. Las bibliotecas contienen métodos a los que puede llamar sin
crear una instancia.
Una de esas colecciones contiene métodos matemáticos, acertadamente denominados
la Math biblioteca.
Veamos cómo llama al .random() método desde la Math biblioteca:

console.log(Math.random()); // random number between 0 and 1

En el ejemplo anterior, llamamos al .random()método al anexar el nombre de la


biblioteca con un punto, el nombre del método y los paréntesis de apertura ( () y
cierre ( )). Este método devuelve un número aleatorio entre 0 y 1. Este código
imprime un número aleatorio entre 0 y 1.

Para generar un número aleatorio entre 0 y 50, podríamos multiplicar este


resultado por 50, así:
Math.random() * 50;

La respuesta en el ejemplo anterior probablemente sea un decimal. Para asegurarse


de que la respuesta es un número entero, JavaScript proporciona un método
integrado llamado Math.floor(). Math.floor()toma un número decimal y
redondea al número entero más cercano. Puede usar Math.floor()para redondear
un número aleatorio como este:
Math.floor(Math.random() * 50);
En este caso:
1. Math.random genera un número aleatorio entre 0 y 1.
2. Luego multiplicamos ese número por 50, así que ahora tenemos un número entre 0 y
50.
3. Luego, Math.floorredondea el número al número entero más cercano.
Comentarios
A medida que escribimos JavaScript, podemos crear comentarios en nuestro código.
Los programas no evalúan los comentarios cuando los ejecuta. En otras palabras, existen
solo para lectores humanos. Los buenos comentarios son útiles para usted y para otros
desarrolladores, ya que describen lo que hace el código.
Hay dos tipos de comentarios de código en JavaScript:
1. Un comentario de una sola línea comentará a cabo una sola línea y se denota con dos
barras inclinadas // que precede a una línea de código JavaScript.
// The first 5 decimals of pi
console.log('Pi is equal to ' + 3.14159);
Un comentario multilínea comentará varias líneas y se denotará con /*para comenzar
el comentario y */finalizar el comentario.

/*
console.log('All of this code');
console.log('Is commented out');
console.log('And will not be executed);
*/

Variables
Los programadores usan variables para escribir código que es fácil de entender y reutilizar.
Imagina que estás escribiendo una aplicación meteorológica. Su termómetro externo
informa la temperatura en grados Celsius, pero su objetivo es registrar la temperatura en
Fahrenheit.

Ahí es donde entran las variables. Las variables nos permiten asignar datos a una
palabra y usar la palabra para hacer referencia a los datos. Si los datos cambian
(como los grados Celsius) podemos reemplazar el valor de la variable en lugar de
volver a escribir el programa.

En esta lección, aprenderá sobre dos formas de declarar variables : lety const.

Crear una variable: const


Vamos a bucear y ver una variable en la naturaleza. Aquí es cómo declaras una variable
constante :
const myName = 'Arya';
console.log(myName);
// Output: Arya
Consideremos el ejemplo de arriba:
1. const, abreviatura de constante, es una palabra clave de JavaScript que crea una
nueva variable con un valor que no puede cambiar.
2. myNamees el nombre de la variable. Observe que la palabra no tiene espacios, y
capitalizamos el N. Capitalizar de esta manera es una convención estándar en
JavaScript llamada camelCasing , porque las letras mayúsculas se parecen a las
jorobas en la espalda de un camello.
3. =es el operador de asignación . Asigna el valor ( 'Arya') a la variable ( myName).
4. 'Arya'es el valor asignado ( =) a la variable myName.
5. Después se declara la variable, podemos imprimir 'Arya'a la consola
con: console.log(myName).

6. Puede guardar cualquier tipo de datos en una variable. Por ejemplo, aquí
guardamos números:
7. const myAge = 11; console.log(myAge); // Output: 11
8. En el ejemplo anterior, en la línea 1, la myAgevariable está configurada
en 11. Debajo de eso, console.log()se usa para imprimir 11en la consola.

Crea una variable: lety


En la tarea final del ejercicio anterior, recibiste el siguiente error:
TypeError: Assignment to constant variable.
JavaScript arrojó un error porque asignó un nuevo valor a una variable constante. Las
variables constantes, como su nombre lo indica, son constantes; no puede asignarles un
valor diferente.
Sin embargo, las variables pueden reasignarse.
let meal = 'Enchiladas';
console.log(meal); meal = 'Tacos';
console.log(meal);
// output: Enchiladas // output: Tacos

En el ejemplo anterior, la let palabra clave se usa para crear la meal variable con
la cadena 'Enchiladas' guardada en ella. En la línea tres, la meal variable se
cambia para almacenar la cadena 'Tacos'.

Usted puede preguntarse, cuándo usar const vs let. En general, solo use const si
el valor guardado en una variable no cambia en su programa.
Indefinido
¿Qué sucede si crea una variable, pero no le asigna un valor?
JavaScript crea espacio para esta variable en la memoria y lo configura en undefined. No
definido es el quinto y último tipo de datos primitivo. JavaScript asigna el tipo de datos
indefinido a las variables que no tienen asignado un valor.
let whatAmI;

En el ejemplo anterior, creamos la variable whatAmI sin ningún valor asignado. JavaScript
crea la variable y la establece igual al valor undefined.

Interpolación de cadenas
En ejercicios anteriores, asignamos cadenas a las variables. Aquí, aprenderá cómo insertar
el contenido guardado en una variable en una cadena.
El término de JavaScript para insertar los datos guardados en una variable en una cadena es
la interpolación de cadenas .
El +operador, conocido hasta ahora como operador de adición, se usa para interpolar
(insertar) una variable de cadena en una cadena, de la siguiente manera:
let myPet = 'armadillo';
console.log('I own a pet ' + myPet + '.');
// Output: 'I own a pet armadillo.'

Interpolación de cadenas II
En la versión más nueva de JavaScript (ES6), podemos insertar variables en cadenas con
facilidad, haciendo dos cosas:
1. En lugar de usar comillas alrededor de la cadena, use los trazos atrás (esta tecla
generalmente se encuentra en la parte superior de su teclado, a la izquierda de
la 1tecla).
2. Envuelva su variable con ${myVariable}, seguido de una oración. No +es necesario.
La interpolación de cadenas ES6 es más fácil que el método que utilizó en el último
ejercicio. Con la interpolación de ES6, podemos insertar variables directamente en
nuestro texto.

Se parece a esto:
let myPet = 'armadillo'
console.log(`I own a pet ${myPet}.`)
// Output: 'I own a pet armadillo.'
En el ejemplo anterior, los backticks (`) envuelven toda la cadena. La variable
( myPet) se inserta usando ${}. La cadena resultante es:
I own a pet armadillo.

ejercicio:
const kelvin = prompt('What is the kelvin temperature today?');

//El pronostico de hoy tiene un valor constante. Usando prompt que


genera una venta emergente para pedir una entrada al usuario.

const celsius = kelvin - 273;

// conversion celcius a Kelvin.

let farenheit = celsius *(9/5)+32;

//Conversion para el calculo de farenheit.

farenheit = Math.floor(farenheit);

//Math.floor redondea el resultado.

console.log(`The Temperatures is ${farenheit}degrees farenheit.`);

//Usando el metodo de interpolacion.


FLUJO DE CONTROL

declaraciones if / else
La tarea principal de la programación es escribir listas de instrucciones para computadoras
o traducir nuestras ideas de lenguaje humano a lenguaje de computadora.
Aprendamos cómo podemos pedirle a JavaScript que piense como nosotros y tomar
decisiones de la manera en que lo hacemos.
Comenzaremos con el lenguaje humano. Muchas decisiones que tomamos todos los días se
reducen a esta oración de alguna forma:
"Si algo es cierto, hagamos la opción 1, o si no es así, hagamos la opción 2".
Esta oración se ve bastante similar cuando la escribimos con JavaScript. Ver por ti mismo:
let needsCoffee = true; if (needsCoffee === true) { console.log('Finding coffee'); } else {
console.log('Keep on keeping on!'); }

1. Las líneas de código entre llaves se llaman bloques. if/ las else declaraciones tienen
dos bloques de código. Si la variable needsCoffeees true, el programa ejecutará el
primer bloque de código. De lo contrario, ejecutará el otro bloque de código.
2. needsCoffeees la condición que estamos verificando dentro de
los ifparéntesis. Como es igual a true, nuestro programa ejecutará el código entre la
primera llave de apertura {(línea 2) y la primera llave de cierre }(línea 4). Ignorará
la else { ... }parte. En este caso, veríamos el Finding coffeeregistro en la
consola.
3. Si lo needsCoffeefuera false, solo se ejecutará la console.log()instrucción en
el elsebloque.
if/ elsedeclaraciones son cómo los programas pueden procesar las preguntas de
sí / no mediante programación.

Ejemplo:

if (isSoccerFan === true){

console.log('Goal!');

}else{

console.log('No goal');

}
Valores verdaderos y falsos
En el ejercicio anterior, escribimos if/ elsedeclaraciones. Si una condición dada
fuera true, se ejecutaría un bloque de código. Si esa condición fuera false, se ejecutaría
un bloque de código diferente. Sin embargo, hay tipos de datos que no son
booleanos. Exploremos los conceptos de verdadero y falso en las variables que contienen
otros tipos de datos, incluidas las cadenas y los números.
En JavaScript, todas las variables y condiciones tienen un valor de verdad o falso .
let variableOne = 'I Exist!'; if (variableOne) { // This code will run because variableOne contains a
truthy value. } else { // This code will not run because the first block ran. }

En la primera línea del programa anterior, se crea y establece una variable. El valor
de esta variable es una cadena en lugar de un booleano. ¿Cómo determina este
programa qué bloque de código ejecutar?

La segunda línea de este programa verifica una condición if (variableOne). En el


ejercicio anterior, verificamos si una variable era verdadera o falsa. Al solo escribir
el nombre de la variable como la condición, estamos comprobando la veracidad de
la variableOne. En este caso, variableOne contiene un valor de verdad.
Si cambiamos if (variableOne)para decir if (variableTwo), esa condición
evaluaría falsear porque no hemos creado una variable llamada variableTwo en
este programa. En otras palabras, variableOne es verdad y variableTwo es falso.

Todas las variables que se han creado y establecido son verdaderas (y se evaluarán
como verdaderas si son la condición de una sentencia de control de flujo) a menos
que contengan uno de los siete valores enumerados a continuación:
 false
 0 y -0
 ""y ''(cadenas vacías)
 null
 undefined
 NaN (No un número)
 document.all (algo que rara vez encontrarás)

Existe una distinción importante entre el valor de una variable y su


veracidad: variableOne el valor de "yo existo" porque esos son los datos
guardados en la variable. variableOne es verdad porque existe y no contiene
ninguno de los siete valores de falsy enumerados anteriormente.
En la programación, a menudo evaluamos si una expresión es verdadera o
no. Convenientemente, JavaScript proporciona una notación abreviada para esto.
let isRaining = true; if (isRaining) { console.log('Carry an umbrella!'); } else {
console.log('Enjoy the sun!'); }
En el ejemplo anterior, la condición es simple if (isRaining). En JavaScript, esto
es evaluar si isRaininges verdad. Si lees el código en voz alta, suena como una
simple oración: "Si está lloviendo, lleva un paraguas. ¡O bien, disfruta del sol!"

JavaScript proporciona un operador para intercambiar la veracidad y la falsedad de


los valores: el signo de exclamación ( !). Podemos usar esto en declaraciones
condicionales como abreviatura para verificar si el valor de una variable se evalúa
como falso en lugar de verdadero.
let isPhoneCharged = true;
if (!isPhoneCharged) {
console.log('Plug in your phone!');
} else { console.log('No need to charge!');
}
En el ejemplo anterior, el programa comprueba si
se isPhoneChargedevalúa false. Porque isPhoneChargedes true, el segundo
bloque de código se ejecutará.

Operadores de comparación
Además de verificar si una variable evalúa true o false, a veces necesitamos comparar
variables con otros valores. Podemos lograr esto con operadores de comparación .
Hay dos comparaciones con las que puede estar familiarizado:
 Menos que: <
 Mas grande que: >

También puedes reconocer estos:


 Menos que o igual a: <=
 Mayor qué o igual a: >=

Estas comparaciones evalúan a true o false.


Hay dos comparaciones más útiles que podemos hacer. A menudo, es posible que
deseemos comprobar si dos cosas son iguales entre sí o si no lo son.
1. Para verificar si dos cosas se igualan, escribimos ===(tres =signos seguidos).
2. Para verificar si dos cosas no son iguales, escribimos !==(una exclamación con
dos =signos en una fila).
Puede ser confuso cuándo usar un =signo y cuándo usar tres ===signos. Use una
sola =para asignar un valor a una variable. Use ===para comparar los valores de dos
variables diferentes.

más si las declaraciones


Hemos explorado if/ else declaraciones que responden preguntas que son sí o no. ¿Qué
podemos hacer si tenemos una pregunta que tiene múltiples condiciones de sí o múltiples
condiciones?
Podemos agregar más condiciones a nuestra if/ else declaración con else if. Vea
cómo esto se ajusta a nuestro conocimiento actual de if/ else declaraciones:
let stopLight = 'green';
if (stopLight === 'red') {
console.log('Stop');
} else if (stopLight === 'yellow') {
console.log('Slow down');
} else if (stopLight === 'green') {
console.log('Go!');
} else { console.log('Caution, unknown!');
}
1. Creamos una variable llamada stopLightque está asignada a la cadena green.

2. Luego, hay una instrucción if/ elsecon múltiples condiciones, usando else
if. else ifnos permite verificar múltiples valores de la stopLightvariable y dar
salida a diferentes cosas en función de su color.

El bloque termina con el singular elseque hemos visto antes. El elsees un


comodín para cualquier otra situación. Por ejemplo, si stopLightparpadeaba en
azul, el último elselo captaría y devolvería un mensaje predeterminado.
Ejemplo:

if (moonPhase === 'full') {

console.log('Howl!');

} else if (moonPhase === 'mostly full') {

console.log('Arms and legs are getting hairier');

} else if (moonPhase === 'mostly new') {

console.log('Back on two feet');

} else {

console.log('Invalid moon phase');

Operadores logicos
Podemos traducir ciertos pensamientos en código JavaScript como, "¿Son estas cosas
iguales?" con ===, o, "¿Hay algo más grande que otra cosa?" con >.
En inglés, a veces decimos "ambas cosas" o "cualquiera de estas cosas". Vamos a traducir
esas frases en JavaScript con operadores especiales llamados operadores lógicos .
1. Para decir "ambos deben ser verdad", usamos &&.
2. Para decir "cualquiera puede ser cierto", lo usamos ||.

Por ejemplo:
if (stopLight === 'green' && pedestrians === false) {
console.log('Go!');
} else { console.log('Stop');
}
1. En el ejemplo anterior, nos aseguramos de que el stopLightes 'green'y ( &&) no
hay peatones antes de iniciar sesión Go!.
2. Si cualquiera de esas condiciones es falsa, nos registramos Stop.

Al igual que los operadores que aprendimos anteriormente, estos operadores


lógicos devolverán cualquiera trueo false.
Al igual que los operadores que aprendimos anteriormente, estos operadores
lógicos devolverán cualquiera true o false.

Estos operadores lógicos son útiles al escribir if/ else declaraciones, ya que nos
permiten asegurarnos de que múltiples variables sean verdaderas o
falsas. Podemos combinar estos operadores con todos los que hemos aprendido a
lo largo de esta lección.

let isFoggyNight = false;

if (moonPhase === 'full' || isFoggyNight === false) {

console.log('Howl!');

} else if (moonPhase === 'mostly full') {

console.log('Arms and legs are getting hairier');

} else if (moonPhase === 'mostly new') {

console.log('Back on two feet');

} else {

console.log('Invalid moon phase');

}
Declaraciones de interruptor
Antes de continuar, volvamos a las else ifdeclaraciones.
Usar else ifes una gran herramienta para cuando tenemos algunas condiciones diferentes
que nos gustaría considerar.
else ifes limitado, sin embargo. Si queremos escribir un programa con 25 condiciones
diferentes, como una caja registradora de JavaScript, tendríamos que escribir una gran
cantidad de código, y puede ser difícil de leer y entender.
Para lidiar con los momentos en los que necesita muchas else ifcondiciones, podemos
recurrir a una switchdeclaración para escribir un código más conciso y legible.

Para una computadora, una switch declaración y una if/ else declaración son las
mismas, pero una switch declaración puede ser más fácil de leer para otros
humanos. Parte de ser un buen desarrollador es escribir un código que las
computadoras y otros humanos puedan leer.

switch las declaraciones se ven así:

let groceryItem = 'papaya';


switch (groceryItem) {
case 'tomato':
console.log('Tomatoes are $0.49');
break;
case 'lime':
console.log('Limes are $1.49');
break;
case 'papaya':
console.log('Papayas are $1.29');
break;
default:
console.log('Invalid item');
break;
}
1. La switch palabra clave inicia la declaración y es seguida por ( ... ), que
contiene la condición con la que cada una case se comparará. En el ejemplo, la
condición es groceryItem.
2. Dentro del bloque { ... }, hay cases. case es como la else if parte de
una declaración if/ else if/ else. La palabra después de la
primera casees 'tomato'. Si se groceryItem iguala 'tomato', ese
caso console.log()se ejecutará.
3. groceryItemes igual a 'papaya', por lo que la primera y la segunda case
afirmación se omiten. El tercero se case ejecuta desde el case is 'papaya', que
coincide con groceryItemel valor. Este programa en particular se registrará Papayas
are $1.29.
4. Luego, el programa se detiene con la break palabra clave. Esta palabra clave
evitará que la switch declaración ejecute más de su código. Sin agregar break al
final de cada caso, el programa ejecutará el código para todos los casos coincidentes
y el código predeterminado también. Este comportamiento es diferente de
las sentencias if/ else conditional que ejecutan solo un bloque de código.
5. Al final de cada switch declaración, hay una default condición. Si ninguno de
los cases es verdadero, entonces este código se ejecutará.

Ejemplo:

let moonPhase = 'full';

switch (moonPhase) {

case 'full':

console.log('Howl!');

break;

case 'mostly full':

console.log('Arms and legs are getting hairier');

break;

case 'mostly new':

console.log('Back on two feet');

break;

default:

console.log('Invalid moon phase');

break;

}
Operador Ternario
En el ejercicio anterior, aprendimos taquigrafía para
escribir declaraciones / if/ múltiples para que sean más fáciles de leer. JavaScript también
proporciona una manera de acortar simples / declaraciones llamados el operador
ternario .else if else if else
let isNightTime = true;
if (isNightTime) {
console.log('Turn on the lights!');
} else {
console.log('Turn off the lights!');
}
En el ejemplo anterior, vemos un patrón muy familiar. Vea el ejemplo a continuación para
una forma equivalente de expresar esto.
isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');
El código en el ejemplo anterior operará exactamente como el código del ejemplo
anterior. Vamos a dividir este ejemplo en sus partes:
1. isNightTime ?- la declaración condicional seguida de un signo de
interrogación. Esto verifica si isNightTimees verdad.
2. console.log ('Turn on the lights!') - Este código se ejecutará si la
condición es verdadera.
3. : - dos puntos separa los dos bloques de código diferentes que se pueden ejecutar.
4. console.log('Turn off the lights!'); - este código se ejecutará si la
condición es faly

En este ejemplo, verificamos si el valor de una variable era verdadero o falso. El


operador ternario se puede usar para cualquier condición que se pueda
evaluar true o false, como las que tienen operadores de comparación.
age >= 16 ?
console.log('You are old enough to drive in the United States!') :
console.log('You are not old enough to drive in the United States!');

En el ejemplo anterior, el enunciado condicional comprueba si el valor de la variable agees


mayor o igual a 16. De ser así, se registrará en la consola un mensaje que indica que el
usuario tiene la edad suficiente para conducir. De lo contrario, se registrará un mensaje
que indica que el usuario no tiene la edad suficiente para conducir.
Ejemplo:

isLocked ? console.log('You will need a key to open the door.') :


console.log('You will not need a key to open the door.');

let isCorrect = true;

isCorrect ? console.log('Correct!') : console.log('Incorrect!');

let favoritePhrase = 'Love That!';

favoritePhrase === 'Love That!' ? console.log('I love that!') : console.log("I


don't love that!");

Revisión: flujo de control


¡Camino a seguir! Acabamos de aprender muchos conceptos de flujo de control:
 if/ las elsedeclaraciones toman decisiones binarias y ejecutan código diferente en
función de las condiciones.
 Todas las condiciones se evalúan como verdaderas o falsas.
 Podemos agregar más declaraciones condicionales a if/ elsedeclaraciones con else
if.
 switchdeclaraciones hacen complicada if/ elsedeclaraciones más fácil de leer y
lograr el mismo resultado.
 El operador ternario ( ?) y dos puntos ( :) nos permiten refactorizar
simples if/ elsedeclaraciones. Los operadores de comparación, incluyendo <, >, <=,
y >=pueden comparar dos variables o valores.
 Después de comparar dos valores, la instrucción condicional se evalúa
como trueo false.
 El operador lógico &&verifica si ambos lados de una condición son verdaderos.
 El operador lógico ||verifica si alguno de los lados es verdadero.
 El operador lógico !==verifica si los dos lados no son iguales.
 Un signo de exclamación ( !) cambia la veracidad / falsedad del valor de una variable.
 Un símbolo igual ( =) se usa para asignar un valor a una variable.
 Tres símbolos iguales ( ===) se usan para verificar si dos variables son iguales entre sí.
Introducción a las funciones
Una función es un bloque de código diseñado para realizar una tarea.
Las funciones son como recetas. Aceptan datos, realizan acciones sobre esos datos y
devuelven un resultado. La belleza de las funciones es que nos permiten escribir un bloque
de código una vez, luego podemos reutilizarlo una y otra vez sin volver a escribir el mismo
código.
Eche un vistazo al código en este ejercicio. Este código enciende la calculadora si está
actualmente apagada y la apaga si la calculadora está actualmente encendida.
Vea si puede descubrir cómo funciona este código. En el próximo ejercicio, lo
recorreremos línea por línea.

const pressPowerButton = () => {


if (calculatorIsOn) {
console.log('Calculator turning off.');
calculatorIsOn = false;
} else {
console.log('Calculator turning on.');
calculatorIsOn = true;
}
};

pressPowerButton();
// Output: Calculator turning on.

pressPowerButton();
// Output: Calculator turning off.
¿Cómo funciona este código?
let calculatorIsOn = false;
const pressPowerButton = () => {
if (calculatorIsOn) {
console.log('Calculator turning off.');
calculatorIsOn = false;
} else { console.log('Calculator turning on.');
calculatorIsOn = true; } };
pressPowerButton();
// Output: Calculator turning on.
pressPowerButton(); // Output: Calculator turning off.
Exploremos cada parte en detalle.

1. Creamos una función nombrada pressPowerButton.


 const pressPowerButtoncrea una variable con un nombre de pila escrito
en camelCase .
 La variable se establece igual =a un conjunto de paréntesis seguido de un token de
flecha () =>, lo que indica que la variable almacena una función. Esta sintaxis se
conoce como sintaxis de la función de flecha .
 Finalmente, entre las llaves, {}está el cuerpo dela función o las declaraciones de
JavaScript que definen la función. Esto es seguido por un punto y coma ;. En
JavaScript, cualquier código entre llaves se conoce también como bloque .
 . Dentro del cuerpo de la función está una if/ elsedeclaración.

 3. En las últimas líneas, llamamos a la función escribiendo su nombre


seguido de un punto y coma pressPowerButton();. Esto ejecuta la función,
ejecutando todo el código dentro del cuerpo de la función.

 4. Ejecutamos el código en el cuerpo de la función dos veces sin tener que


escribir el mismo conjunto de instrucciones dos veces. ¡Las funciones
pueden hacer que el código sea reutilizable!
Parámetros
Hasta ahora, nuestra función no ha requerido ninguna entrada. También podemos escribir
funciones que aceptan datos. Hacemos esto con parámetros . Los parámetros son variables
en una definición de función que representan datos que podemos ingresar en la función.
const multiplyByThirteen = (inputNumber) => {
console.log(inputNumber * 13);
};
multiplyByThirteen(9);
// Output: 117
Vamos a explorar cómo funciona esta función:
1. Añadimos inputNumberdentro del paréntesis () =>de
la multiplyByThirteenfunción. inputNumberes un parámetro
2. Dentro de la multiplyByThirteen()función, utilizamos console.logpara
imprimir el inputNumbermultiplicado por 13.
3. Cuando llamamos a la multiplyByThirteen()función en la última línea,
establecemos el inputNumberparámetro. Aquí, lo configuramos para 9. Luego, dentro
del bloque de funciones, 9se multiplica por 13, lo que resulta en la 117impresión de la
consola.
4. Nota sobre la terminología: inputNumberes un parámetro, pero cuando
llamamos multiplyByThirteen(9), 9se llama un argumento . En otras palabras,
los argumentos se proporcionan cuando se llama a una función, y los parámetros
reciben argumentos como su valor. Cuando nos fijamos el valor 9como argumento,
nos pasamos un valor de la función.
Los parámetros nos permiten escribir la lógica dentro de las funciones que se
modifican cuando llamamos a la función. Esto hace que las funciones sean más
flexibles.

Ejemplo:
const takeOrder = (topping) => {
console.log('Order: pizza topped with ' + topping);
};
takeOrder('mushrooms');
Si podemos establecer un parámetro, ¿podemos establecer dos?

Podemos establecer tantos parámetros como nos gustaría agregándolos cuando


declaramos la función, separados por comas, de esta manera:
const getAverage = (numberOne, numberTwo) => {
const average = (numberOne + numberTwo) / 2 ;
console.log(average);
};
getAverage(365, 27);
// Output: 196

1. La getAverage()función tiene dos parámetros: numberOney numberTwo, ambos


ingresados entre paréntesis ().
2. Cuando llamamos a la getAverage()función en la última línea, incluimos dos
números como parámetros, también separados por comas.
En este caso, le estamos diciendo a la función que asigne numberOneel valor
de 365y numberTwoel valor de 27. Estamos pasando 365y 27a
la getAverage()función.
3. Cuando se getAverage()ejecuta, la función sabe qué numberOnee numberTwoigual,
ya que pasamos en dos parámetros cuando llamamos a la función. Por lo tanto,
evalúa (365 + 27) / 2y almacena el resultado en la averagevariable. Cuando se
registra en la consola, el valor de averagees 196.

Al agregar múltiples parámetros, podemos crear funciones que son más


flexibles. Ahora la función tiene dos variables que podemos definir cuando llamamos a
la función.
Ejemplo:

console.log('Order: ' + crustType + ' pizza topped with ' + topping);


};

takeOrder('mushroom', 'thin crust');


takeOrder('spinach', 'whole wheat');
takeOrder('pepperoni', 'brooklyn style');
Regreso
Usar console.log()como resultado de una función no es el mejor uso de una función. El
propósito de una función es tomar alguna entrada, realizar alguna tarea en esa entrada y
luego devolver un resultado.
Para devolver un resultado, podemos usar la return palabra clave. Eche un vistazo a
nuestra función del último ejercicio, ahora reescrito ligeramente:
const getAverage = (numberOne, numberTwo) => {
const average = (numberOne + numberTwo) / 2;
return average;
}
console.log(getAverage(365, 27));
// Output: 196

En lugar de usar console.log()dentro de la getAverage()función, utilizamos


la return palabra clave. return tomará el valor de la variable y la devolverá.

2. En la última línea, llamamos a la getAverage()función dentro de


una console.log()instrucción, que arrojó el resultado de 196.

3. Este código logró el mismo resultado que antes, sin embargo, ahora nuestro código es
mejor. ¿Por qué? Si quisiéramos usar la getAverage()función en otro lugar de nuestro
programa, podríamos hacerlo sin imprimir el resultado a la consola. El uso return
generalmente es una mejor práctica al escribir funciones, ya que hace que su código sea
más fácil de mantener y flexible.

Ejemplo:
const takeOrder = (topping, crustType) => {
orderCount++;
console.log('Order: ' + crustType + ' pizza topped with ' + topping);
};
takeOrder('mushroom', 'thin crust');
takeOrder('spinach', 'whole wheat');
takeOrder('pepperoni', 'brooklyn style');
const getSubTotal = (itemCount) => {
return itemCount * 7.5;
};
console.log(getSubTotal(orderCount));
En el último ejercicio, señalamos que el uso return hace que los programas sean
más sostenibles y flexibles, pero ¿cómo exactamente?

Cuando funciona return su valor, podemos usarlos juntos y dentro de otro. Si


nuestra calculadora necesitara tener una operación de Celsius a Fahrenheit,
podríamos escribirla con dos funciones como esta:
const multiplyByNineFifths = (celsius) => {
return celsius * (9/5);
};
const getFahrenheit = (celsius) => {
return multiplyByNineFifths(celsius) + 32;
};
console.log('The temperature is ' + getFahrenheit(15) + '°F');
// Output: The temperature is 59°F
Eche un vistazo a la getFahrenheit()función. Dentro de su bloque, lo
llamamos multiplyByNineFifths()y le pasamos los grados
en celsius. La multiplyByNineFifths()función multiplica
el celsiuspor (9/5). Luego devolvió su valor para que la getFahrenheit()función
pueda continuar y agregarle 32.

Finalmente, en la última línea, interpolamos la llamada de función dentro de


una console.log()declaración. Esto funciona porque getFahrenheit()devuelve
su valor.

Podemos usar funciones para separar pequeños bits de lógica o tareas, y luego
usarlos cuando lo necesitemos. Las funciones de escritura pueden ayudar a resolver
problemas grandes y difíciles y descomponerlos en problemas pequeños y
manejables.
 Ejemplo: (Se debe calcular un impuesto a las ventas del 6% por cada pedido
completo. Esto debe basarse en el subtotal.
 El total, que es el subtotal más impuestos, también debe calcularse.)

const takeOrder = (topping, crustType) => {

orderCount++;

console.log('Order: ' + crustType + ' pizza topped with ' + topping);

};

takeOrder('mushroom', 'thin crust');

takeOrder('spinach', 'whole wheat');

takeOrder('pepperoni', 'brooklyn style');

const getSubTotal = (itemCount) => {

return itemCount * 7.5;

};

const getTax = () => {

return getSubTotal(orderCount) * 0.06;

};

const getTotal = () => {

return getSubTotal(orderCount) + getTax();

};

console.log(getSubTotal(orderCount));

console.log(getTotal());
FUNCIONES

Declaraciones de funciones
Ahora que tenemos un conocimiento de las funciones en JavaScript, echemos un vistazo
más amplio al tipo de funciones que veremos. Las funciones en JavaScript generalmente se
declaran como una declaración de función o una expresión de función .
Una declaración de función es una función que está vinculada a un identificador o nombre.
function square (number) {
return number * number;
}
console.log(square(5));
// Output: 25.

Las declaraciones de funciones requieren la palabra clave function, un nombre y


un cuerpo de función. Puede identificar esto mediante el uso de function
square()y a {}continuación. Las declaraciones de funciones no terminan en un
punto y coma.

Vamos a crear una declaración de función básica.

Ejemplo:
use una declaración de función para crear una nueva función llamada isGreaterThan. La
función debe tomar dos parámetros, numberOney numberTwo.
¿Atascado? Obtén un consejo

2.
Dentro de la función, usando una instrucción if/ else, crea la siguiente lógica:
Si numberOnees mayor que numberTwo, regresa true.
De lo contrario, regresa false.
3.
Llame a la isGreaterThan()función con dos argumentos de su elección.
function isGreaterThan(numberOne, numberTwo){
if(numberOne > numberTwo){
return true;
} else {
return false;
}
}
isGreaterThan(4, 8)

Expresiones de funciones
Una expresión de función es similar a la declaración de función, con la excepción de que el
identificador puede ser omitido, creando una función anónima. Las expresiones de
funciones a menudo se almacenan en una variable. Puede identificar una expresión de
función por la ausencia de un nombre de función inmediatamente detrás de la palabra clave
de función.
const square = function (number) {
return number * number;
};
console.log(square(5)); /
/ Output: 25.

También tenga en cuenta que las expresiones de función terminan con un punto y
coma, ya que están almacenadas en una variable.

En esta lección, hemos estado utilizando principalmente un tipo de expresión de


función conocida como función de flecha. La sintaxis de la función de flecha es una
sintaxis más corta para una expresión de función. Puede identificar funciones de
flecha mediante el uso de paréntesis y el token de flecha () =>.
const square = (number) => {
return number * number;
};
console.log(square(5));
Es importante familiarizarse con las múltiples formas de escribir funciones, ya que las
encontrará en el código JavaScript.

Вам также может понравиться