Hacé click acá para dejar tu feedback sobre esta clase. |
En esta lección cubriremos:
Undefinedynull- Operadores de comparación (continuación)
- Flujos de control (continuación)
- Operados lógicos
- Bucles
for arguments
Hay un par de objetos Javascript que realmente no encajan en ningún tipo de dato. Esos son los valores undefined y null. Obtendrás undefined cuando busques algo que no existe, como una variable que aún no tiene un valor. undefined simplemente significa que lo que estás pidiendo no existe.
console.log(variableInexistente); // undefinednull es un objeto que nosotros, los desarrolladores, establecemos cuando queremos decirles a otros desarrolladores que el elemento que están buscando existe, pero no hay ningún valor asociado con él. Mientras que undefined está configurado por Javascript, null está configurado por un desarrollador. Si alguna vez recibes null, debes saber que otro desarrollador estableció ese valor en null
let numeroTelefono = '11-1234-5678';
numeroTelefono = null;
numeroTelefono; // nullUna última cosa a tener en cuenta, ni undefined ni null son cadenas, están escritas tal como están sin comillas, como un booleano.
En estas lecciones hemos hablado sobre los valores booleanos, true y false. Cuando se usa una declaración if u otra declaración que espera un valor booleano (como !, NOT), y la expresión dada no es un valor booleano, Javascript hará algo llamado "coerción de tipo" y transformará lo que sea que se le entregue a un valor booleano. Esto se conoce como "truthy" y "falsey". Cada tipo de datos tiene una veracidad. Acá hay unos ejemplos:
// Datos que son forzados a verdaderos/"true"
true
1
' '
[] // Un array, aprenderemos más sobre esto más adelante
{} // Un objeto, aprenderemos más sobre esto más adelante
function() {}
// Datos que son forzados a falsos/"false"
false
0
undefined
null
'' // Una cadena vacíaEn la última lección usamos operadores de comparación, ahora profundizaremos un poco más sobre cómo funcionan y luego presentaremos un pariente cercano de operadores de comparación, los "operadores lógicos".
En la última lección presentamos nuestros operadores de comparación, (> >= < <= === !==). Estos operadores funcionan como lo harían en una clase de matemáticas, mayor que, menor que, etc. Utilizamos estos operadores para evaluar dos expresiones. A medida que la computadora ejecuta el código, el operador devolverá un verdadero (si la declaración es verdadera) o un falso.
1 > 2; // false
2 < 3; // true
10 >= 10; // true
100 <= 1; // falseEl "triple igual" (===) no debe confundirse con un solo signo igual (que indica asignar un valor a una variable). El triple igual comparará todo sobre los dos elementos, incluido el tipo, y devolverá si son exactamente iguales o no:
(Algo a tener en cuenta: hay un "doble igual" (==) que comparará dos elementos, pero NO tendrá en cuenta sus tipos (1 == '1' // verdadero). Debido a esto , se considera una mala práctica usar el doble igual. Nos gustaría verte siempre usando el triple, y siempre nos verás usándolo.)
1 === 1; // true
1 === '1'; // false
'perro' === 'perro'; // true
'perro' === 'Perro'; // falseEl último operador de comparación que nos gustaría presentarle tiene dos partes.
Primero es el "NOT" (!). Cuando veas esto significará que estamos preguntando lo contrario de la expresión (volveremos a visitar el operador NOT más adelante en esta lección).
Con eso en mente, podemos introducir el "no es igual" (!==). Esto devolverá verdadero si los artículos NO son iguales entre sí de alguna manera. Esto, como el triple igual, tiene en cuenta el tipo de dato.
1 !== 1; // false
1 !== '1'; // true
'perro' !== 'perro'; // false
'perro' !== 'Perro'; // trueEn la última lección aprendimos sobre el operador if. Podemos usar if para verificar y ver si una expresión es true, si es así, ejecute algún código, o si no es así, que omita el código y siga ejecutando el programa.
if (1 + 1 === 2) {
console.log('La expresión es verdadera');
}Para complementar a if, también podemos usar las declaraciones else if y else. Estas declaraciones deben usarse con if y deben venir después de él. Estas declaraciones serán evaluadas si el inicial if devuelve false. Podemos pensar en el else if como otra declaración if que se ha encadenado (podemos tener tantas otras declaraciones if que queramos). Solo se ejecutará un bloque de código de instrucción if o else if. Si en algún momento una declaración devuelve true, ese código se ejecutará y el resto se omitirá:
if (false) {
console.log('Este código será omitido');
} else if (true) {
console.log('Este código correrá');
} else if (true) {
console.log('Este código NO correrá');
}La declaración else siempre aparecerá al final de una cadena if-else o if, y actuará de manera predeterminada. Si ninguna de las expresiones devuelve true, el bloque de código else se ejecutará sin importar qué. Si alguna de las expresiones anteriores if o else if son true, el bloque de código de instrucción else no se ejecutará.
if (false) {
console.log('Este código será omitido');
} else if (false) {
console.log('Este código NO correrá');
} else {
console.log('Este código correrá');
}También podemos combinar dos expresiones de igualdad y preguntar si alguna de las dos es verdadera, si ambas son verdaderas o si ninguna de ellas es verdadera. Para hacer esto, utilizaremos operadores lógicos.
El primer operador lógico que veremos es el operador "Y" ("AND"). Está escrito con dos símbolos (&&). Esto evaluará ambas expresiones y devolverá verdadero si AMBAS expresiones son true. Si uno (o ambos) de ellos es falso, este operador devolverá false:
if (100 > 10 && 10 === 10) {
console.log('Ambas declaraciones son ciertas, este código se ejecutará');
}
if (10 === 9 && 10 > 9) {
console.log('Una de las declaraciones es false, por lo que && devolverá false, y este código no se ejecutará');
}El siguiente es el operador "Ó" ("OR"). Está escrito con dos barras verticales (||). Determinará si una de las expresiones es true. Devolverá true si una (o ambas) de las expresiones es true. Devolverá false si AMBAS expresiones son false:
if (100 > 10 || 10 === 10) {
console.log('Ambas declaraciones son ciertas, este código se ejecutará');
}
if (10 === 9 || 10 > 9) {
console.log('Una de las declaraciones es true, por lo que || devolverá true y este código se ejecutará');
}
if (10 === 9 || 1 > 9) {
console.log('Ambas declaraciones son falsas, por lo que || devolverá false y este código no se ejecutará');
}El último operador lógico es el operador "NOT" ("NO"). Está escrito como un solo signo de exclamación (!). Vimos este operador antes al determinar la igualdad (!==). Como antes, el operador NOT devolverá el valor booleano opuesto de lo que se le pasa:
if (!false) {
console.log('El ! devolverá true, porque es lo contrario de false, así que ste código se ejecutará');
}
if (!(1 === 1)) {
console.log('1 es igual a 1, de modo que la expresión devuelve true. El operador ! devolverá lo contrario de eso, por lo que este código se ejecutará');
}Un par de cosas a tener en cuenta sobre los operadores lógicos.
-
Las expresiones se evalúan en orden, y la computadora omitirá cualquier expresión redundante. En una declaración
&&, si la primera expresión esfalse, la segunda expresión no se evaluará porque AMBAS expresiones deben sertrue. Lo mismo para la declaración||. Si la primera expresión esverdadero, la segunda no se evaluará porque solo debe haber una declaraciónverdaderopara cumplir con los requisitos del operador. -
Usá paréntesis. Como vimos en el segundo ejemplo de operador
!, usamos paréntesis para evaluar PRIMERO lo que estaba dentro de los paréntesis, luego aplicamos el operador!. Podemos ajustar cualquier expresión entre paréntesis y se evaluará antes de evaluar la expresión como un todo.
La mayoría del software se ejecuta en bucles, evaluando expresiones una y otra vez hasta que devuelve lo que estamos buscando o se detiene después de cierto tiempo. Javascript tiene dos expresiones de bucle incorporadas y hoy veremos la primera, el bucle "for".
Los bucles for tienen una sintaxis única, similar a la instrucción if, pero un poco más compleja. Primero tenemos la palabra clave for, seguida de paréntesis y luego abrir y cerrar llaves. Dentro de los paréntesis necesitaremos tres cosas. Primero, debemos declarar una variable, esto es sobre lo que se repetirá el bucle. Entonces tendremos una expresión condicional, el ciclo continuará sucediendo hasta que esta declaración sea false. Tercero, incrementaremos nuestra variable. Las tres declaraciones están separadas por un punto y coma.
for (let i = 0 ; i < 10 ; i++ ) {
// | Declaramos una variable | Expresión condcicional | Incrementamos la variable |
console.log(i);
}En este ejemplo, vemos que inicialmente establecemos nuestra variable i en 0, el ciclo se ejecutará y cada vez que llegue al final, aumentará el contador en uno. El bucle for evaluará la expresión condicional. Si es true, se ejecutará nuevamente, si es false dejará de funcionar.
Vimos en el último ejemplo el operador ++. Esta es la abreviatura de Javascript para "Establecer el valor de la variable a su valor actual más uno". Hay algunas más de estas expresiones abreviadas de matemática / asignación variable, las visitaremos en las próximas lecciones.
Es posible que un bucle se atasque en lo que llamamos un "bucle infinito". Debes asegurarte de que haya una forma de finalizar el bucle. Ejemplo de un bucle infinito:
for (let i = 0; i >= 0; i++) {
console.log(i);
}Debido a que nuestra expresión condicional SIEMPRE será true ( i nunca será menor que 0), este ciclo se ejecutará esencialmente para siempre. Esto interrumpirá su programa y puede bloquear su navegador web o computadora.
Como vimos anteriormente, las funciones son objetos invocables, y podemos hacerlo pasándoles argumentos que varíen el comportamiento de estas.
> function log(str) {
console.log(str)
}
> log('hola!')
< 'hola!'Si sabemos las variables a tomar, como en el ejemplo str, podemos darle nombre a este parámetro. Sino hay una propiedad arguments , propia de todas las funciones, que contiene los parámetros pasados como argumento.
> function args() {
console.log(arguments)
}
> args('hola!', 'otro parametro', 3)
< ["hola!", "otro parametro", 3, callee: 'function', Symbol(Symbol.iterator): 'function']arguments nos da acceso a la n cantidad como parámetros, pero tengamos en cuenta que no es un Arreglo.
> function args() {
return Array.isArray(arguments)
}
> args(1,2,3)
< falseSi queremos saber cuantos parámetros puede recibir una función podemos usar la propiedad length.
> args.length
< 0 // porque en la función `args` definimos 0 parámetros